前端零基础学习Day-Seven

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