1.复合选择器
复合选择器 一般会有几个标签混合使用 。把多个组合成一个 称之为复合
1.1标签指定式 复合选择器 （交集选择器）
格式： 标记选择器+ 类名/ID名称 { 属性：值;}
实际情况用的相对少。 但是 高手 会用的特别好。
加选 shift 减选 alt 交叉 shift+alt
1.2后代选择器 （父子级关系）
格式： 选择器1 选择器2 ... { 属性：值;}
选择器1 一定是 选择器2 的父级 选择器2 一定是选择器1 的子级
<div>
<p> 测试</p>
</div>
div p{color:red;}
注意： 选择器之间一定用空格隔开。
1.3并集选择器 (集体声明)
代码冗余
注释： （隐形战斗机）
注释 ：代码看不见（不执行） 程序员（人）能看见
语法： /* 内容 */
并集选择器适合于： 多个标签具有同一种样式。
<style type="text/css"> /*p{color:#F00; } span{color:#F00;} ul{color:#F00;}*/ p,span,ul{color:#F00;} </style>
核心： 标签之间用 逗号 隔开。
2.通配符选择器 (*)
我们window 系统有两个通配符 : * 和 ?
* 所有的意思。
*{color:#F00;} 所有的标签都是红色
大家觉得： *{color:red;} 简单
还是 p,div,span,ul{color:red;} 简单
写起来简单 但是 代码执行起来还是第二个简单。
注意：我们现在几乎不用 * ，现在它只剩下一个作用，就是用来测试用。
3.伪类选择器（链接伪类 a ）
伪类： 伪娘 女汉子
** 嗲 伪类：明明不存在，但是确实有实际效果。
.class
伪类 ：（冒号）
关于链接：
a:link 链接平时（正常）的状态
a:visited 链接访问过之后的状态 （点击后）
a:hover 鼠标经过时候的状态
a:active 鼠标点击时的状态
单词：
text-decoration： 文本修饰
<style type="text/css"> a:link{color:#000; text-decoration:none; }/*文本修饰为没有下划线*/ a:visited{color:#F90; text-decoration:none;} /*点击后，为黄色 没有下划线*/ a:hover{color:#F00; text-decoration:underline;} /*鼠标经过的时候，为红色下划线*/ a:active{color:#00ff00; text-decoration:underline;} /*鼠标点击的时候，为绿色 下划线*/
/*现在都可以这么写：*/
a{color:#000; text-decoration:none;} a:hover{color:#F00; text-decoration:underline;}
注意： 如果四个状态写全了，必须按照:
顺序不能颠倒
l v h a
第一种记忆： l ov e h a t e 由爱生恨
第二种记忆 ： l v h a o lv包包 好
导航栏小案例：
案例分析：
1. 因为鼠标放上去会变换图片和文字 就应该用到 链接伪类。
2. 链接 a 属于那种显示模式：行内显示模式。在这里需要把它转换成：行内块元素。
3.指定相应背景图片
代码准备：
1. 一般是先准备结构 （标签） 后准备样式。
<!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> <style type="text/css"> div{text-align:center;} div a{width:88px; height:44px; background-image:url(gray.JPG);display:inline-block; color:#FFF; text-decoration:none; line-height:44px;} div a:hover{background-image:url(red.JPG); color:#F90;} </style> </head> <body> <div> <a href="#">首页</a> <a href="#">相册</a> <a href="#">作品</a> <a href="#">生活</a> <a href="#">展示</a> <a href="#">留言</a> </div> </body> </html>
4.行高不简单
基线位置 : asdfasdffgjjhkjlkjl
行高是两行文字 基线之间的距离 ：
我们会发现： 如果给一个块级盒子的高度 和它的行高相等 ，这个盒子的文字就会在盒子里面垂直居中。（注意，只限一行文字）
5.css 背景的设置
background-color: 背景颜色
background-image:url() 背景图片
background-repeat: 背景是否平铺
默认是平铺的 no-repeat 不平铺
background-position 背景图片位置
top bottom left right center (中间) 方位名词
background-position: x坐标 y坐标； 精确像素
注意： x坐标和y坐标的顺序不能颠倒。
背景简写：
background: 背景图片 背景位置 背景颜色 背景重复等等；
属性的各个值用空格隔开。
以后我们碰到像背景这样的属性我们称之为 复合属性。
背景的最后一个属性值： 背景固定 （兼容性不好）
background-attachment: 背景固定还是滚动
默认是scroll 滚动的 fixed 固定的
6.边框 (border)
border-color 边框颜色
border-width 边框粗细
border-style 边框样式 实线 虚线 双线 、、
border-color 边框颜色
border-width 边框粗细
一般情况 我们都是用像素作为单位
比如： border-width：1px；
border-style 边框样式
none : 无边框。与任何指定的border-width值无关
hidden : none : 无边框。与任何指定的border-width值无关
hidden : 隐藏边框。IE不支持
dotted : 点线。
dashed : 虚线。
solid : 实线边框（重点）
double : 双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 根据border-color的值画3D凹槽
ridge : 根据border-color的值画菱形边框
inset : 根据border-color的值画3D凹边
outset : 根据border-color的值画3D凸边隐藏边框。IE不支持
边框简写
border: 1px solid #f00;
用空格隔开
border:solid 1px #f00;
border-top:1px solid #f00;
7.行业动态案例
注意：测量时，边框线是不计算在宽和高内的。
<!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> <style type="text/css"> .hd{height:35px; width:238px; border:1px solid #D9E0EE; border-top:3px solid #FF8400; border-bottom:0;} .bd{height:130px; width:238px; border:1px solid #D9E0EE; } .bd ul li{line-height:24px;} .bd a{font-size:12px; text-decoration:none; color:#3c3c3c;} .bd a:hover{color:#FF8400; text-decoration:underline;} </style> </head> <body> <div class="hd"></div> <div class="bd"> <ul> <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li> <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li> <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li> <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li> </ul> </div> </body> </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> <style type="text/css"> .hd{height:35px; width:238px; border:1px solid #D9E0EE; border-top:3px solid #FF8400; border-bottom:0; text-indent:2em; font-weight:bold; line-height:35px;} .bd{height:130px; width:238px; border:1px solid #D9E0EE; } .bd ul li{line-height:24px; background:url(hhh.jpg) no-repeat left center; text-indent:1em;} .bd ul{list-style:none; /*清除列表样式*/} .bd a{font-size:12px; text-decoration:none; color:#3c3c3c;} .bd a:hover{color:#FF8400; text-decoration:underline;} </style> </head> <body> <div class="hd">行业动态</div> <div class="bd"> <ul> <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li> <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li> <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li> <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li> </ul> </div> </body> </html>
列表样式： list-style:none; 清除列表样式
转载请备注。