CSS，层叠样式表单，为HTML定义样式。可以定义在HTML文档中，也可以定义在外部文件中
优点
1）通过单个样式表控制多个文档的布局（外部文件）
2）更精准的布局控制
3）为不同的媒体类型采取不同的布局
CSS语法格式
由选择符、属性、值三部分组成：选择符{属性:值}
选择符通常是用户希望定义的HTML元素或标签，属性是用户希望改变的外观，每个属性都有一个值
注意
1）当属性值是多个单词组成的时候，需要加引号
h1{font-family:”Courier New”}
2）如果需要对一个选择符指定多个属性时，使用分号隔开
p{font-size:15;color:red}
3）样式的继承：所有嵌套在某个HTML标签中的标签都会自动继承外层标签设置的样式
对body，p设置样式，那么body中标签a使用body样式，body中标签p使用自己的样式
<html> <head> <style type="text/css"> body {font-size:30px} a {color:green} p {font-size:40px;color:red} </style> </head> <body> <p>This is a paragraph1</p> <a href="#">This is link1</a> <p>This is a paragraph2</p> <a href="#">This is link2</a> </body> </html>
CSS选择符
CSS选择符主要有HTML选择符、CLASS选择符、ID选择符。优先级：ID选择符>CLASS选择符>HTML选择符
1 HTML选择符
HTML选择符就是以HTML标签作为选择符的情况
p{font-size:15;color:red}
其作用域是HTML页面中所有符合条件HTML标签
在HTML选择符中，存在一种特殊的选择符。包含选择符，指用空格隔开的两个或多个单一选择符组成的字符串
div p{color:red;font-size:12}
为div标签中的p标签定义样式，这样的优先级高于单一选择符的情况。
<html> <head> <style type="text/css"> a{font-size:12px} table a{font-size:18px;color:#FF0000} </style> </head> <body> <a href="http://www.tup.tsinghua.edu.cn">清华大学出版社</a> <br/><br/> <table border="1"> <tr><td><a href="http://www.tup.tsinghua.edu.cn">清华大学出版社</a></td></tr> </table> <br/> <table border="1"> <tr><td>清华大学出版社</td></tr> </table> </body> </html>
CLASS选择符
在HTML标签中的class属性使用的选择符。以符号 . 定义
1）关联选择符
可以为同一元素(HTML标签)定义不同的样式
<html> <head> <style type="text/css"> p.red{color:red} p.yellow{color:yellow} p.green{color:green} </style> </head> <body> <p class="red">这是红灯的样式</p> <p class="yellow">这是黄灯的样式</p> <p class="green">这是绿灯的样式</p> </body> </html>
2）独立CLASS选择符
可以为多个不同的元素定义相同的样式
<html> <head> <style type="text/css"> .title{text-align:center;color:blue} </style> </head> <body> <p class="title">居中的蓝色段落</p> <h1 class="title">居中的蓝色标题 </h1> </body> </html>
CLASS选择符也可以被用作包含选择符
在下面这种情况CLASS选择符的包含选择符优先级大于HTML标签的包含选择符
<html> <head> <style type="text/css"> table.mytable td{ border:1px solid #00FF00;/*边框为1像素的绿色单实线*/ color:#FFCC99 } table td{ border:5px; color:red } </style> </head> <body> <table class="mytable"> <tr><td>第一个表格</td></tr> </table> <br/><br/> <table> <tr><td>第二个表格</td><tr> </table> </body> </html>
ID选择符
ID属性用来定义某一特定的HTML标签，一个网页文件中只能有一个标签使用某一特定的ID。ID选择符以 # 定义
<html> <head> <style type="text/css"> #header{text-align:center;color:blue} </style> </head> <body> <div id="header"> 欢迎来到清华大学出版社 <div> </body> </html>
伪元素选择符
为一个HTML元素的各种状态和部分内容定义样式的一种方法。
例如，使用伪元素选择符可以为超链接标签<a>的正常状态、访问过的状态、选中的状态、光标移动到链接上的状态定义样式；还有段落的首字母和首行也可以用伪元素选择符来定义样式
格式 选择符:伪元素{属性:值}
a:hover{color:red}
超链接标签的四种状态
a:link 超链接的正常状态
a:hover 鼠标移动到超链接上的状态
a:active 超链接选中的状态
a:visited 访问过的超链接的状态
CSS伪元素也可以与CLASS选择符配合使用
a.red:visited{color:#00FF00}
CSS设置样式
内联样式
灵活，简单方便
<body> <h1 style="font-family:黑体;color:blue"> 在这里使用了h1标记 </h1> </body>
嵌入样式
一个样式可以在一个页面多次应用
<head> <style type="text/css"> h1 {font-family:黑体;color:blue;} </style> </head>
外部样式
需要一个外部的样式表文件(.css)，可以为多个网页共同饮用，提高了代码的可重用性，又可以做到页面的风格统一
<head> <link rel="stylesheet" type="text/css" href="h1.css"> </head>
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表，下面4中央时优先级一次升高
1）浏览器缺省设置
2）外部样式
3）嵌入样式
4）内联样式
样式表控制字体
1）字型：font-family
2）大小：font-size
3）斜体：font-style
4）加重：font-weight
注：
1）如果一个人字体的名称不只一个单词，加双引号 body{font-family:”gill sans”}
2）行内加入CSS规则，使用单引号<p style=”font-family:’gill sans’”></p>
3）如果将CSS规则的说明组合在一起，经自提控制放在最后
文字特殊效果
1）字体参数：font-variant
2）文字变形：text-transform
3）文字修饰：text-decoration
字间距：in(英寸)、cm(厘米)、mm(毫米)、pt(点数)、pc(打字机字间距)、em(ems)、ex(x-height)、 px(像素)