这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
一、本堂课重点内容：
- CSS 代码构成
- CSS 使用方法
- CSS 流程之选择器组、文本渲染
- 调试 CSS
-
CSS 选择器的特异度
-
CSS 继承
-
CSS 求值过程解析
-
CSS 布局方式及相关技术
-
CSS 盒模型 - 行级
-
CSS 盒模型 - 块级
二、详细知识点介绍：
理解CSS
用来定义元素样式
eg：
h1 {
color:white;
font-size:14px;
}
学习内容
- CSS 代码构成
- CSS 使用方法
- CSS 流程之选择器组、文本渲染
- 调试 CSS
-
CSS 选择器的特异度
-
CSS 继承
-
CSS 求值过程解析
-
CSS 布局方式及相关技术
-
CSS 盒模型 - 行级
-
CSS 盒模型 - 块级
使用CSS
- 外链 <推荐>
- 嵌入
- 内联
CSS的工作
选择器
- 通配选择器：* {...}
- 标签选择器：h1 {...}
- id选择器：#id {...} （唯一）
- 类选择器：.class值 {...} （可多个）
- 属性选择器：[属性名] {...}
- 伪类： 标签：动作 {...}
^=（以什么开头）：^="#" 以#开头的样式
=".jpg" 以.jpg结尾的样式
组合
选择器的特异度
# id
. 伪类
E 标签
#nav .list li a:link 特异度：1 2 2
.hd ul.links a 特异度:0 2 2
CSS继承
在子类没有设置样式时，会去继承父类样式
CSS求值过程
三、实践练习例子：
CSS样式结构
h1 {
color:white;
font-size:14px;
}
四、课后个人总结：
-
本章不容易掌握的内容及容易混淆的知识：
本章内容分为三部分从理解CSS，CSS的继承和特异度，CSS的块级、行级讲解，其中不易掌握的部分是关于CSS样式的具体使用，以及在CSS中样式的组合使用，需要进行多次的联系与实践。
其中CSS容易产生的混淆是各个选择器中的使用，用以对不同选择器的特点的理解产生混乱的记忆。对CSS的实践有一定的影响。
五、引用参考：
