第一章:css和文档
- 替换元素/非替换元素
- 替换内容
- 例如input、img,本身没有意义,标签内容指向一个外部内容
- 非替换内容
- 大部分的元素 div、p、span
- 块级元素/行内元素
- 块级元素
- 会生成一个元素框,填充
父元素内容区域
,旁边不能有其他元素 - 常见p div
- 特殊块级 列表,前面会有标记符
- 会生成一个元素框,填充
- 行内元素
- 会在
文本行内
生成元素框, - 不会生成分割。破坏显示
- 会在
- 行内元素可以继承块级,反之不行(实际可以,可能浏览器变高级了。。)
- 块级元素
- 选择器
- 空格分割和
>
分割的区别-
>
一定为子元素
-
-
+
选择兄弟元素- 必须是相邻的,且为下一个
- 伪类选择器
- a:visited :hover
- a(锚元素)会创建一个页面到另一个页面的链接,浏览器会比较历史纪录和创建的链接,例如:visited清除浏览器访问记录后会被清除。
- a:visited :hover
- 链接伪类
- 链接伪类应用于锚元素a,:link
- :link 可用于body,表示body里面有link的元素的样式,例如a
- 链接伪类应用于锚元素a,:link
- 动态伪类
- 根据用户行为来改变文档外观:focus:hover:active
- 元素选择child、lang before after
- lang是根据元素里面的lang来选择样式,而不是根据文字语言
- 空格分割和
第二章 : 结构层叠
- 特殊性
-
样式匹配到多个,特殊性最高的规则胜出
-
- 重要性
- !important
- 继承
- 样式会应用到子元素中
- 边框不能继承
- 继承的值没有特殊性
- table的继承bug
- 字体大小比继承的字体要小
-
层叠规则
值和单位
- web安全颜色
- 指在256色计算机系统总能避免抖动的颜色
- RGB 20% 和 51的倍数(对应十六进制33的倍数)包括0% 0
- 十六进制记分
- 00、33、66、99、CC、FF
- 指在256色计算机系统总能避免抖动的颜色
- 长度单位
- 绝对长度
- 厘米、英尺、毫米、点(72分之1英尺)、派卡(12点)
- 相对长度
- px像素
- 浏览器一个像素点
- em和ex
- em相对于字体大小,元素字体大小14px,1em=14px,根据元素不同而不同,使用em设置字体大小会根据父元素的字体变化
- ex小写字体x的大小,不同字体也会有影响,约等于0.5em
- px像素
- 绝对长度
字体
文本属性
- 文本缩进
- text-indent 可用百分比
tag
- 浏览器加载css,会进行合并
- rel=alternate + title来设置候选样式表
- 较老浏览器不支持@import,可以用来css hack
- 非互斥伪类可以一起使用