day07
CSS继承和层叠
CSS继承
好处：
1.父元素设置样式，子元素可以继承部分属性
2.减少代码
CSS层叠
可以定义多个样式
不冲突时，多个样式可层叠为一个
冲突时，按不同样式规则优先级来应用样式
CSS优先级
CSS使用优先级
CSS选择器优先级
id选择器>class选择器>标签选择器>通配符选择器
同类样式多次引用，样式表中后定义的优先级高
CSS优先级规则
同一样式表中：
1.权值相同
就近原则
2.权值不同
CSS样式权值高，就使用哪种样式
选择器权值
标签选择器：权值为1
类选择器和伪类：权值为10
ID选择器：权值为100
通配符选择器：权值为0
行内样式：权值为1000
!important规则
可调整样式规则的优先级
添加在样式规则之后，中间用空格隔开
CSS样式命名
常用的CSS样式命名
1）页面结构
页头：header 导航:nav
页面主体：main 侧栏：sidebar
页尾：footer 栏目：column
内容：content/container 页面外围控制：wrapper
容器：container 左右中：left right center
2）导航
导航：nav 左导航：leftsidebar
主导航：mainnav 右导航：rightsidebar
子导航：subnav 菜单：menu
顶导航：topnav 子菜单：submenu
边导航：sidebar 标题：title
摘要：summary
3）功能
标志：logo 注册：register
广告：banner 搜索：search
登录：login 功能区：shop
登陆条：loginbar 标题：title
案例：
css_jc.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS继承和层叠</title> <style type="text/css"> p{font-size: 23px} div{color: red;border: 1px solid blue;} div div{color: green;} div div{color: orange;} div{font-size: 24px} </style> </head> <body> <div> <p>CSS<span>继承</span></p> <div>CSS层叠</div> </div> <p>CSS继承和层叠</p> </body> </html>
css_priority.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS选择器优先级</title> <style type="text/css"> div{color: red;} #idgreen{color: green;} /*.classblue{color: blue;} .classyellow{color: yellow;}*/ div{color: gray;} *{color: black;} b{color: purple;} /*1*/ p b{color: yellow !important;} /*2*/ .classblue{color: blue;} /*10*/ div #test2 b{color: gray;} /*102*/ #test1 p b{color: orange;} /*102*/ div p .classblue{color: red;} /*12*/ </style> </head> <body> <p>单独使用</p> <div>使用标签选择器样式</div> <div id="idgreen">使用ID样式</div> <div class="classblue">使用class样式</div> <!--id选择器>标签选择器 class选择器>标签选择器 --> <p>同一个元素引用标签,id,class定义的样式</p> <div class="classblue" id="idgreen">CSS样式，同时引用标签,id,class定义的样式</div> <div id="idgreen" class="classblue">CSS样式，同时引用标签,id,class定义的样式</div> <!-- id选择器>class选择器>标签选择器 --> <p></p> <div class="classblue classyellow">CSS优先级，蓝色在前，黄色在后</div> <div class="classyellow classblue">CSS优先级，蓝色在后，黄色在前</div> <div>CSS优先级</div> <!-- 优先级结果：同类样式多次引用，样式表中后定义的优先级高 --> <p>派生选择器优先级</p> <div id="test1"> <h1>CSS样式优先级</h1> <p id="test2">所谓<b class="classblue" style="color: red;">CSS优先级</b>，指CSS样式在浏览器中被解析的先后顺序</p> <div><b>权值相同</b>，就近原则；<b>权值不同</b>，哪个权值高，使用哪个。</div> </div> </body> </html>