CSS权威指南(第四版)
css权威指南(第四版),内容更新至CSS3。CSS(Cascading Style Sheet,层叠样式表)。但是因为书被别人借走,阅读暂停(太惨了……)以后更不更新就看对前端有没有兴趣了吧。
第一章 CSS和文档
CSS3由多个独立的模块构成,各模块可以独立演进,相应的,从此不再有类似“CSS3”这样的叫法
1.2 元素
1.2.1 置换元素和非置换元素
1.2.2 元素的显示方式
块级元素:前后断行。(列表元素是特殊的块级元素)
行内元素:在行内生成元素框
HTML中,行内元素可以放在块级元素内,反过来则不行
CSS中,都可
1.3 把CSS应用到HTML上
link
标签:<link rel="stylesheet" type="text/css" href="sheet1.css" media="all">
,链接外部样式表
@import
声明:@import url(sheet2.css)
候选样式表
把rel
属性修改为rel="alternate"
添加tltle="Default"
或tltle="Big Text"
等名称,用户可自行选择样式
不为样式表设定标题(tltle),那么它就是永久样式表,始终用于显示文档。若设置多个首选样式表且都设置标题,仅会生效一个,但是不确定那个。
1.3.2 style元素
style元素可以直接包含应用到文档上的样式,也可以通过@import
导入
1.3.3 @import
指令
@import
指令必须放在<stylr>
内部,且必须放在其它CSS之前
1.3.4 HTTP链接
没看懂,略
1.3.5 行内样式
<p style="color: maroon"> <p>
1.4样式表中的内容
1.4.1 标记
样式表中不能有标记
1.4.2 规则的结构
略
1.4.3 厂商前缀
略
1.4.4 处理空白
多个空白合成一个空白
1.4.5 CSS注释
1 | /* |
1.5 媒体查询
1.5.1 用法
link
的media属性
style
的media属性
@import
的媒体描述部分
@media
的媒体描述部分
1.5.3 媒体类型
all:所有
print:预览打印
screen:屏幕,web浏览器
1.5.4 媒体描述符
print and(条件)
and,not,only关键字连接,无or关键字
1.5.5媒体特性描述符和值的类型
略
1.6 特性查询
1 | @supports(color: black) |
1 | @supports(display: grid) |
1 | /*支持取反运算符*/ |
1.7 小结
略
第二章 选择符
2.1 样式的基本规则
2.1.1 元素选择符
2.1.2 声明和关键字
空格,逗号,斜线分隔关键字
2.2 群组
2.2.1 群组选择符
h2, p {color: gray;}
通用选择符:*{color: red;}
2.2.2 群组声明
2.2.3 二者结合
2.2.4 在旧浏览器中使用新元素
document.createElement('main')
添加<main>
元素
2.3 类选择符和ID选择符
2.3.1 类选择符
1 | .warning{font-weight: bold;} |
2.3.2 多个类
1 | <p class="urgent warning"> </p> |
2.3.3 ID选择符
1 | #mostImportant{color: red; background: yellow;} |
2.3.4 在类选择符和ID选择符之间选择
- 类选择符可以赋予更多元素,ID选择符智能一个文档中一次
- ID选择符不能串在一起使用
- ID选择符的权重更高
- 二者都可能区分大小写
2.4 属性选择符
分为简单属性选择符、精确属性值选择符、部分匹配属性值选择符、起始值属性选择符