CSS 和文档

[xiongshj]

CSS 和文档

这是学习《CSS 权威指南》第 1 章的笔记。

元素

对 CSS 来说，元素通常有两种形式：置换元素和非置换元素。

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

HTML 元素大部分是非置换元素，即元素的内容由用户代理（通常是浏览器）在元素自身生成的框中显示。

把 CSS 应用到 HTML 上

link 标签

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

候选样式表，定义方式为把 rel 属性的值设为 alternate stylesheet。仅当用户自己选择，文档才会使用候选样式表渲染。

style 元素

开始和结束 style 标签之间的样式表称为文档样式表或嵌入式样式表。

style 元素可以直接包含应用到文档上的样式，也可以通过 @import 指令引入外部样式表。

@import 指令

@import 指令也可以显示导入的样式表应用于何种媒体，方法是在样式表的 URL 后面提供媒体描述符:

@import url(sheet2.css) all;
@import url(blueworld.css) screen;
@import url(zany.css) projection, print;

CSS 要求样式表中的 @import 指令必须在所有样式规则前面。遵守规范的用户代理会忽略放在样式规则（例如 body {color: red;}）后面的 @import 指令。

HTTP 链接

为文档关联 CSS 还有一种鲜为人知的方式：使用 HTTP 首部。

截至2017年年末，广泛支持 HTTP 链接样式表的浏览器有 Firefox 和 Opera。

样式表中的内容

一些常用的厂商前缀

前缀	厂商
-epub-	国际数字出版论坛制定的 ePub 格式
-moz-	基于 Mozilla 的浏览器（如 Firefox）
-ms-	微软 Internet Explorer
-o-	基于 Opera 的浏览器
-webkit-	基于 WebKit 的浏览器（如 Safari 和 Chrome）

在 CSS 中，注释只能使用 /* */ 编写。

媒体查询

媒体类型

媒体查询最基本的形式媒体类型，由 CSS2 引入。媒体类型就是指明不同媒体的标注。

为媒体类型加上特性描述符（例如，描述指定媒体的分辨率或色深）之后事情就变得有趣了。

媒体描述符

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

@media all and (min-resolution: 960dpi) { ... }
@media (min-resolution: 960dpi) { ... }

一般情况下，媒体特性描述符的格式类似于 CSS 中的一对属性和值。二者最大的区别是，特性描述符可以不指定值。

多个特性描述符使用逻辑关键字 and 连接。

not：对整个查询取反。假如所有条件为真，那样式表不会应用到文档上。not 关键字只能在媒体查询的开头使用。

only：在不支持媒体查询的旧浏览器中隐藏样式表。only 关键字只能用在媒体查询的开头。

特性查询

根据用户代理是否支持特性的 CSS 属性及其值来应用一段样式，这个功能称为特性查询(feature query)。

@support (color: balck) {
  body {
    color: black;
  }
  
  h1 {
    color: purple;
  }

  h2 {
    color: navy;
  }
}

特性查询是渐进增强样式的完美方式。

特性查询在结构上与媒体查询很像，可以与媒体查询互相嵌套。

小结

逃避虽然可耻，但是有用。

逃避虽然有用，但是可耻。