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>02CSS继承，层叠和优先级07
原文地址：https://www.cnblogs.com/shink1117/p/8414108.html