HTML 样式- CSS
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式:
<!DOCTYPE html> <html> <body> <div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div> <div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;"> <div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div> <h3>Look! Styles and colors</h3> <div style="letter-spacing:12px;">Manipulate Text</div> <div style="color:#40B3DF;">Colors <span style="background-color:#B4009E;color:#ffffff;">Boxes</span> </div> <div style="color:#000000;">and more...</div> </div> </body> </html>
效果:
CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
1、实例背景颜色:
<!DOCTYPE html> <html> <body style="background-color:yellow;"> <h2 style="background-color:red;">This is a heading</h2> <p style="background-color:green;">This is a paragraph.</p> </body> </html>
效果:
2、字体大小、颜色(使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义字体的样式)
<!DOCTYPE html> <html> <body> <h1 style="font-family:verdana;">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html>
效果:
3、文本对齐(使用 text-align(文字对齐)属性指定文本的水平与垂直对齐方式);
<!DOCTYPE html> <html> <body> <h1 style="text-align:center;">Center-aligned heading</h1> <p>This is a paragraph.</p> </body> </html>
效果:
在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
内部样式表(当单个文件需要特别样式时,就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表) :
<head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>
外部引用(当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观) - 使用外部 CSS 文件
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>