课程名称：前端零基础入门（体系课）
课程章节：第四章 CSS继承、层叠和优先级/ 第五章 CSS 应用
主讲老师：(课程中没有显示)
课程内容：
今天学习的内容包括：
CSS继承
CSS层叠
CSS优先级
常用的CSS样式命名
总结
课程收获：
CSS继承和层叠
-从父元素那继承部分属性
-继承的好处：
1.父元素设置样式，子元素可以继承部分属性
2.减少CSS代码
3.不是所有属性都可以继承（与浏览器也会有关系）
-层叠
1.可以定义多个样式
2.不冲突时，多个样式可层叠为一个
3.冲突时，按不同样式规则优先级来应用样式 (当我们上级元素定义的元素与元素本身冲突时会忽略继承的样式)
Chrome浏览器默认字体大小16px
h1默认字体大小font-size:2em(2em:基本字体大小的两倍)
现在h1字体大小是32px
子元素继承父元素下面的样式
不是所有属性都可以从父级继承
在ie6以下的浏览器 表格不会继承body以下的属性
有些标签本身就带有默认样式例如h1
行内样式>内部样式>外部样式
（链入外部样式表与内部样式表之间的优先级取决于所处位置的先后，最后定义的优先级最高，就近原则）
id选择器优先于class选择器也优先于标签选择器
同类样式多次引用，样式表中后定义的优先级高
离引用样式元素最近 就会引用谁（就近原则）
选择器权值计算：
便签选择器：权值为1
类选择器和伪类：权值为10
ID选择器：权值为100
通配符选择器:权值为0
行内样式：权值为1000
CSS优先级规则
同一样式表中：
权值相同：就近原则(离被设置元素越近优先级越高)
权值不同：根据权值来判断CSS样式，哪种CSS样式权值高，就使用哪种样式
CSS优先级总结
1)！important优先级最高
2）css使用方法优先级
行内样式>内部样式>外部样式 （link和style采用就近原则）
3）样式表优先级
id>class>标签>通配符（*）。
权值相同 采用就近原则
权值不同 采用权值高的
CSS样式命名：
1.采用英文字母 、数字以及-和_命名
2.以小写字母开头，不能以数字和-、_开头
3.命名形式：单字，连字符，下划线和驼峰
4.使用有意义的命名
id和class使用
1.id不要滥用，谨慎使用
2.适当使用class
2.常用的CSS样式命名
1）页面结构
页头：header / 导航：nav / 页面主体：main / 侧栏：sidebar / 页尾：footer
栏目：column / 内容：content或container / 页面外围控制：wrapper
容器：container / 左右中：left right center
2）导航
导航：nav / 左导航：leftsidebar /右导航：rightsidebar /
主导航：mainnav / 子导航：subnav / / 顶导航：topnav /
菜单：menu / 子菜单： submenu /
标题：title / 摘要：summary
3）功能
标志：logo / 广告：banner / 登陆：login / 登录条：loginbar
注册：register / 搜索：search /功能区：shop /标题：title
3.设置css样式时，id和class使用
1）id不要滥用，谨慎使用（在文档中id是唯一的，不能多次使用）
2）适当使用class
CSS的样式命名中，采用英文字母、数字及”_”和“-”命名，以小写字母开头；
不能以数字和”_”、“-”开头，如果是两个单词的命名，可以用驼峰形式来写；
如何引用CSS样式
1.行内样式（内联样式）
在开始标签内添加style样式属性
如 <p style:"color:red;" > 内容</p>
2.内部样式表（嵌入样式）
内部样式（嵌入样式），把CSS样式代码写在
<style type:"text/css">
样式.....
</style>
说明:<style>要放在<head>标签之间
3.外部样式表（Link链入）
(1).外部样式表，把CSS样式代码写在独立的一个文件中
(2).拓展名：CSS文件名.CSS
(3).引入外部文件：
<link href="XX.css" rel="stylesheet" type="text/css" />
说明:<link>要放在<head>标签之间
4.导入式（@import）
(1)@import “外部CSS样式”
说明:@import要放在<style>标签内最开始
CSS选择器
1.标签选择器 （以HTML标签作为选择器）
2.类选择器 （为HTML标签添加class属性，通过.class的名字来设置CSS样式属性，一个元素有多个类时要用空格分开）
3.ID选择器 （为HTML添加ID属性，用#ID的名字来设置CSS样式属性，）
4.全局选择器 （所有标签设置样式用星号来表示，也叫通配符选择器）
5.群组选择器 （集体统一设置样式，选择器之间用逗号隔开）
6.后代选择器 （根据HTML文档的上下文关系来确定的选择器，设置后代选择器样式的时候用空格隔开）
CSS优先级
(1)!important声明最高
(2)CSS使用方法的优先级
行内样式>内部样式>外部样式
注意:link链入外部样式和style内部样式优先级 ，取决于先后顺序
(3)样式表中的优先级
ID选择器>class选择器>标签选择器>通配符
注意：权值相同 就近原则，权值不同使用权值最高的
CSS命名规范
1.采用英文字母，数字以及“-”和“_”命名
2.以小写字母开头，不能以数字和“-”、“_”开头
3.命名形式：单字，连字符，下划线和驼峰
4.使用有意义的命名
今天学习课程共用了105分钟，学习了CSS继承、层叠和优先级和CSS应用以及对这几天学习的内容进行了总结，今天也是收获满满的一天，希望能够每天学习一点点,一直坚持下去，加油!
共同学习，写下你的评论
评论加载中...
作者其他优质文章
