CSS权威指南读书笔记（一）

目录

第一章 CSS和文档

1.1 Web样式简介

1.2 元素

1.3把CSS运用到HTML上

①link标签

②style元素

③@import指令

④HTTP链接

⑤行内样式

1.4 样式表中的内容

1.5 媒体查询

①媒体查询可以在下述几个地方使用：

②媒体描述符

1.6 特性查询

---

第一章 CSS和文档

1.1 Web样式简介

略

1.2 元素

元素通常有两种形式：置换元素和非置换元素。

置换元素：置换元素指用来置换元素内容的部分不由文档内容直接表示。如img，input

非置换元素：非置换元素指元素的内容由动态代理（浏览器）在元素生成的框中显示。段落、标题、单元格、列表以及HTML中其他几乎所有元素都是非置换元素。

除了置换元素和非置换元素之外，CSS还把元素分成块级和行内两种基本类型。除此之外还有其他类型，但这两种是最常见的。

块级元素：简单来说，块级元素在元素框前后都“断行”。最常见的块级元素是p和div。

行内元素：行内元素在一行文本内生成元素框，不打断所在行。

HTML层次要求，行内元素可以放在块级元素中，反之则不行。

1.3把CSS运用到HTML上

①link标签

<link rel="stylesheet" type="text/css" href="sheet1.css" media="all">

注意：link标签必须放在head元素中，不能放在其他元素中。

rel可选属性有stylesheet，alternate stylesheet（候选样式表）。仅当用户自己选择时，文档才会使用候选样式表渲染。

此外，还可以给link标签设置title值。一旦为属性为rel的stylesheet的link元素设定标题，也就是将其定为首选样式表，这意味着浏览器默认使用此样式表。如果不为样式表设定标题，那它就是永久样式表，始终用于文档。

②style元素

<style type="text/css">...</style>

③@import指令

@import url(sheet2.css);

注意：@import指令在style元素内部，而且必须放在其他CSS规则前面。并且@import指令导入的每个样式表都会使用，无法指定候选样式表。

在外部样式表中不能包含任何文档标记，也就是不能使用link元素，但是可以使用@import指令。

④HTTP链接

Header add link "</ui/testing.css>;rel=stylesheet;type=text/css"

⑤行内样式

<p style="color: gray">...</p>

注意：不能在style属性中使用import指令，也不能有完整的规则。

1.4 样式表中的内容

略

1.5 媒体查询

①媒体查询可以在下述几个地方使用：

• link元素的media属性
• style元素的media属性
• @import声明的媒体描述符部分
• @media声明的媒体描述符部分

②媒体描述符

一个媒体描述符包含一个媒体类型和一个或多个媒体特性列表，其中特性描述符要放在圆括号中。如果没有媒体类型，那就应用到所有媒体上。因此下面两个示例是等效的。

@media all and (min-resolution: 96pi) {...}

@media (min-resolution: 96pi) {...}

多个特性描述符使用逻辑关键字连接。媒体查询中可使用的逻辑关键字有两个，and和not。

注意：not关键字只能在媒体查询的开头使用。

媒体设备不支持or关键字。不过分隔多个媒体查询的逗号相当于or。

1.6 特性查询

@supports (display: grid) {
    section#main {display: grid}
    ...
}