CSS概述<选择器总结>
概述：CSS是指层叠样式表，他是定义如何显示HTML元素，样式表通常存储在样式表中,通常存储在.css文件中，下面对css的选择器进行总结，便大家夯实基础！
1 语法规范：
每个样式规则有两个部分：选择器和样式声明
2 CSS规则特性：继承性，层叠，后定义样式优先：
3 CSS选择器
4.1 元素选择器：选择所有同名的元素
4.2 类选择器：元素中可以定义相同的类，同时类选择器通常和id选择器互补共用
4.3 id选择器：元素选择器中可以定义不同的id，id选择器保持元素个性
4.4 派生选择器：根据上下级关系选择元素
4.5 伪类选择器：元素的不同状态，用于相应鼠标滑动事件
4.6选择器分组，不同id的选择器用逗号隔开
index.html源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <link rel ="stylesheet" href="index.css"> <body> <div id="header"><a>退出</a></div> <div id="navi">此处显示 id "navi" 的内容</div> <div class="main">此处显示 class "main" 的内容</div> <div id="operate" class="subdiv">此处显示 class "operate" 的内容</div> <div id="data" class="subdiv">此处显示 id "data" 的内容</div> <div id="pages" class="subdiv">此处显示 id "pages" 的内容</div> <div id="footer"> <p>版权所有©加拿大达内IT培训公司</p> </div> </body> </html>
index.css
/*元素选择器：选择所有同名的元素*/ div{ border:2px solid blue; margin:0 auto; } /*id选择器*/ #header{height:61px; text-align:right} #navi{width:100%;height:91px;} #main{width:950px; height:410px; border:5px solid#8ac1db} #footer{height:50px; } /*类选择器补充不同的样式*/ .subdiv{width:910px;} #operate{height:30px} #data{height:340px} #pages{height:28px} /*选择器分组，临时发现个别元素具有相同的属性*/ #header,#footer{width:960px} #header a{ text-decoration:none color:blue; line-height:61px /*行高等于容器高度*/ } /*选择器派生：根据上下级关系选择元素时*/ #footer p{text-align:center} /*伪类：元素的不同状态*/ #header a:hover{ font-size:20px}/*鼠标滑过*/ #header a:active{ color:red}/*鼠标按下时候*/
程序截图：
5其他的样式：
其他的小细节：1如果需要设置容器内部垂直居中，小技巧是：设置行高等于容器高度，例如 line-height:61px /*行高等于容器高度*/
2如果需要相应鼠标事件，一般用伪类，并且hover，action这两个经常用，例如：/*伪类：元素的不同状态*/ #header a:hover{ font-size:20px}/*鼠标滑过*/ #header a:active{ color:red}/*鼠标按下时候*/
