CSS语法 1、CSS样式表特征 1、继承性 大多数CSS属性是可以被继承的 2、层叠性 可以为一个元素定义多个样式规则 多个样式规则中，如果样式声明不重复的话，那么则可以层叠为一个样式规则 3、优先级 样式定义冲突(重复)时，会按照不同样式的优先级来应用样式 低：浏览器缺省设置(User Agent) 中：外部样式表或内部样式表 就近原则 高：内联样式
注意：继承的样式和自定义样式冲突时，永远都是以自定义的为主 4、!important 规则 显示调整样式属性的优先级 只要 !important 出现，永远都以!important 的为主 语法： 选择器{属性:属性值 !important;}
css选择器 优先级 实例：
<!doctype html> <html> <head> <title>标题</title> <meta charset="utf-8"> <style> #d1 p.p1{color:red;} span{color:green;} </style> </head> <body> <div id="d1"> <p class="p1"> <span id="s1">div中的p中的span</span> </p> </div> </body> </html> 注意：尽量少用CSS样式表特征实例：
<!doctype html> <html> <head> <title>标题</title> <meta charset="utf-8"> <!--引入外部样式表--> <link rel="stylesheet" href="style_01.css"> <style> div{font-size:24px;} div{background-color:yellow !important;} div{color:blue;} </style> </head> <body> <div style="color:purple;background:gray;font-size:12px;">这是一个DIV</div> <p>这是一个p</p> </body> </html>2、CSS基础选择器(重难点) 1、作用 规范了页面中哪些元素能够使用定义好的样式 同时也帮助我们去匹配页面上的元素 2、选择器 1、通用选择器(了解) 1、作用 匹配页面上所有的元素 2、语法 *{样式声明;} 3、注意 效率低，尽量不用 尽可能通过 继承性 去代替通用选择器的效果 CSS选择器 实例：
<!doctype html> <html> <head> <title>标题</title> <meta charset="utf-8"> <style> /*1、通过 通用选择器 设置所有标记的文本颜色为红色*/ body{ color:red; } </style> </head> <body> <div>这是一个div</div> <h3>这是一个h3元素</h3> <p>这是一个段落元素</p> </body> </html>2、元素选择器 又名：标签选择器，标记选择器 1、作用 匹配页面某一指定元素 比如： 页面所有的 div 元素 页面所有的 p 元素 2、语法 元素{} ex: h1{color:red;} h2{color:blue;}
3、类选择器(重点) 1、作用 允许元素使用附带的class属性值，对选择器进行引用 2、语法 以 . 作为开始 .类名{}
类名：字母，数字，_,-组成,不能以数字开始
引用类选择器:通过元素的 class 属性，进行引用 CSS类选择器实例：
<!doctype html> <html> <head> <title>标题</title> <meta charset="utf-8"> <style> .redColor{ color:red; } .greenColor{color:green;} .blueColor{color:blue;} /*设置 class值为 redColor 的 p元素 的背景颜色为 Yellow*/ p.redColor{ background-color:yellow; } .bigSize{ font-size:24px; } /*声明定义 id为d1的元素的样式*/ #d1{ background-color:red; color:green; font-size:36pt; } </style> </head> <body> <!-- ID选择器 --> <div id="d1">使用ID选择器设置样式</div> <!-- 红色 --> <div class="redColor bigSize">这是第一个div</div> <!-- 绿色 --> <div class="greenColor">这是第二个div</div> <!-- 蓝色 --> <div class="blueColor">这是第三个div</div> <p class="redColor bigSize">这是一个p元素</p> </body> </html>3、特殊用法-分类选择器 设置class值为redColor的p元素的 背景颜色为 Yellow 1、作用 将 元素选择器和类选择器结合到一起，从而实现对某种元素的不同样式的细分控制 2、语法 元素选择器.类选择器{ 样式声明; } p.redColor{ background-color:yellow; } 4、特殊引用-多类选择器 1、作用 可以让一个元素同时引用多个类选择器,中间用空格分开即可 4、id选择器(重点) 1、作用 只匹配指定ID值得元素 2、语法 #id值{} 5、群组选择器 1 、作用 选择器声明以逗号来隔开的选择器列表.其目的是为了声明一组选择器中的公共样式 2、语法 选择器1,选择器2,选择器3,…,{
}
ex： 设置页面上所有的p元素，span元素，id为d1元素，class为redColor的元素的文本颜色 为 红色 p,span,#d1,.redColor{ color:red; } 等同于 p{color:red;} span{color:red;} #d1{color:red;} .redColor{color:red;} 6、后代选择器 1 、作用 用于匹配某元素的后代元素时使用 2、语法 选择器1 选择器2{ } 7、子代选择器 1、作用 用于匹配某元素的子代元素 2、语法 选择器1>选择器2{
} CSS后代子代选择器实例：
<!doctype html> <html> <head> <title>标题</title> <meta charset="utf-8"> <style> /*1、控制 id为d1元素里面所有的span元素的文本颜色为红色*/ #d1 span{ color:red; } /*2、控制 div中的span(子代)背景颜色为黄色*/ #d1>span{ background-color:yellow; } /*3、将 div中的p中的span 的背景颜色改为绿色*/ #d1>p>span{ background-color:green; } </style> </head> <body> <div id="d1"> <!-- 即是d1的后代元素，也是d1的子代元素 --> <span>div中的span</span> <p> <!-- 只是d1的后代元素 --> <span>div中的p中的span</span> </p> </div> </body> </html>8、伪类选择器 1、作用 为了匹配元素不同的状态的 2、语法 :伪类选择器{} 3、分类 1、链接伪类 :link :匹配 超链接 未被访问时的状态 :visited :匹配 超链接 被访问过的状态 2、动态伪类 :hover :匹配鼠标悬停在 html 元素时的状态 :active : 匹配 html元素 被激活时的状态 :focus : 匹配html元素获取焦点时的状态(文本框与密码框)
3、目标伪类 4、元素状态伪类 5、结构伪类 6、否定伪类CSS伪类选择器实例：
<!doctype html> <html> <head> <title>标题</title> <meta charset="utf-8"> <style> a:link{ color:orange; text-decoration:none;/*去掉下划线*/ } /*a被访问过后*/ a:visited{ color:blue; } /*a 鼠标悬停时*/ a:hover{ color:red; text-decoration:underline; } /*a 被激活时*/ a:active{ font-size:24px; } </style> </head> <body> <a href="http://www.csdn.net" target="_blank"></a> </body> </html>CSS 语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
h1 {color:red; font-size:14px;}小常多重声明： 请注意提示哦：如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。
CSS声明总是以分号(;)结束，声明总以大括号({})括起来:
p {color:red;text-align:center;} 为了让CSS可读性更强，你可以每行只描述一个属性:
实例：
p { color:red; text-align:center; }CSS 注释 注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 “/" 开始, 以 "/” 结束, 实例如下:
/*这是个注释*/ p { text-align:center; /*这是另一个注释*/ color:black; font-family:arial; }CSS语法实例如下：（仅供参考)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> <style> body {background-color:yellow;} h1 {font-size:36pt;} h2 {color:blue;} p {margin-left:50px;} </style> </head> <body> <h1>这个标题设置的大小为 36 pt</h1> <h2>这个标题设置的颜色为蓝色：blue</h2> <p>这个段落的左外边距为 50 像素：50px</p> </body> </html>小常小提示：是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
