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
2
3
/*
可以分行不能嵌套
*/

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
2
3
4
5
6
@supports(color: black)
{
body {color:black;}
h1 {color: purple;}
h2 {color: navy;}
}
1
2
3
4
5
6
7
@supports(display: grid)
{
section#main {display: grid;}
/*去掉旧布局的样式*/
/*栅格布局的样式*/
}
特性查询是渐进增强样式的完美方式
1
2
3
/*支持取反运算符*/
@supports not (display: grid)
/*支持and or运算符*/

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
2
3
.warning{font-weight: bold;}
p.warning{font-weight: bold;}
span.warning{font-style: italic}

2.3.2 多个类

1
2
3
4
<p class="urgent warning"> </p>
.warning{font-weight: bold;}
.urgent{font-style: italic;}
.warning.urgent{background: silver;}

2.3.3 ID选择符

1
2
3
#mostImportant{color: red; background: yellow;}

<h1 id="mostImportant"> </h1>

2.3.4 在类选择符和ID选择符之间选择

  1. 类选择符可以赋予更多元素,ID选择符智能一个文档中一次
  2. ID选择符不能串在一起使用
  3. ID选择符的权重更高
  4. 二者都可能区分大小写

2.4 属性选择符

分为简单属性选择符、精确属性值选择符、部分匹配属性值选择符、起始值属性选择符

2.4.1 简单属性选择符