CSS继承和层叠
CSS继承
-
子元素从父元素那继承部分CSS属性，但不是所有的属性都可以继承
-
好处：减少CSS代码
-
继承的优先级比较低
CSS层叠
-
可以定义多个样式
-
不冲突时，多个样式可层叠为一个
-
冲突时，按不同样式规则优先级来 应用样式
CSS权值
-
CSS优先级规则：
同一个样式表中：
1.权值相同：就近原则（离被设置元素越近优先级越高）
2.权值不同：根据权值来判断CSS样式，哪种CSS样式权值高，就使用哪种样式
-
选择器权值：
-
标签选择器权值：1
-
类选择器和伪类：10
-
ID选择器权值：100
-
通配符（*）选择器：0
-
行内样式：1000
-
-
权值规则：
-
统计不同选择器的个数
-
每类选择器的个数乘以相应权值
-
把所有的值相加得出选择器的权值
-
#main div.warning h2{...}
id:1 class:1 标签:1
1*100=100 1*10=10 2*1=2
权值：100+10+2=112
-
!important规则
-
可调整样式规则的优先级,important优先级最高
-
添加在样式规则之后，中间用空格隔开
-
div{color:red !important;}
-
CSS样式命名
-
采用英文字母、数字以及“-”“_”命名
-
以小写字母开头，不能以数字和“-”“_”开头
-
命名形式：单字，连字符，下划线和驼峰
/*全部小写*/
.special{......}
/*驼峰写法*/
.mainTitle{......}
.main-title{......}
.main_title{......}
-
使用有意义命名
-
常见CSS样式命名：
1.页面结构：
页头：header
页面主体：main
页尾：footer
内容：content/container
容器：container
导航：nav
侧栏：sidebar
栏目：column
页面外围控制：wrapper
左右中：left center right
2.导航
导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题：title
摘要：summary
3.功能：
标志：logo
广告：banner
登录：login
登陆条：loginbar
注册：register
搜索：search
功能区：shop
-
id不要滥用，谨慎使用
-
适当使用class
