CSS权威指南（第4版）第一章 CSS和文档

TanXinNiao commented 3 years ago

这是我看的第二本前端书，这时我已经有前端基础了，这本书主要是能让我扫清自己基础中的残缺，让前端基础更完整。这本书好家伙，上千页，20章，我就不像上本书一样一一列举细节了，而是只列些重点以及容易忽略的因素

层叠样式表(Cascading Style Sheet, CSS)是一个强大的工具，能影响一个或一组文档的表现。CSS几乎触及Web的每个角落，甚至很多非Web环境也能见到它的身影。例如，基于Gecko的浏览器使用CSS影响窗体自身的表现，很多RSS客户端允许使用 CSS定制订阅源和订阅源中的文章，而且有些即时通信客户端使用CSS装饰聊天窗口。 JavaScript框架，甚至是JavaScript自身使用的句法中处处可见CSS的身影。

TanXinNiao commented 3 years ago

置换元素和非置换元素

CSS依赖元素，但并非每个元素都以同样的方式创建。例如，图像和段落是不同类型的元素，span和div也不同。对CSS来说，元素通常有两种形式：置换元素和非置换元素。

置换元素

置换元素(replaced element)指用来置换元素内容的部分不由文档内容直接表示。在 HTML中，最常见的置换元素要数img,它的内容由文档之外的图像文件替换。其实，通过下面这个简单的例子可以看出，img元素没有内容： \ input元素类似，根据类型的不同，会替换成单选按钮、复选框或文本输入框

非置换元素

HTML元素大部分是非置换元素(nonreplaced element),即元素的内容由用户代理(通常是浏览器)在元素自身生成的框中显示。例如，hi there是非置换元素，用户代理会显示“hi there”文本。段落、标题、单元格、列表，以及HTML中其他几乎所有元素都是非置换元素。 有个细节是行内元素中的置换元素如img，input能设置宽高，而非置换元素a,span不能设置宽高

TanXinNiao commented 3 years ago

display

取值 | [\ II〈display-inside〉] |\ | \ | \ | \ \ block | inline | run-in

\ flow I flow-root I table | flex | grid | ruby

TanXinNiao commented 3 years ago

link 标签

如果浏览器支持候选样式表，会使用link元素title属性的值生成候选样式列表。对下面的示例来说：

<link rel="stylesheet" type="text/css" href="sheetl.css" title="Default">
  <link rel="alternate stylesheet" type="text/css" href="bigtext.css" titles="Big Text">
  <link rel="alternate stylesheet" type="text/css" href=" zany.css" title="Crazy colors!">

浏览器默认使用第一个样式表（这里是名为“Default”的样式表），此外用户还可以自行选择想使用的样式表。

TanXinNiao commented 3 years ago

厂商前缀

截至2016年年末，厂商前缀的使用趋势有所减缓，因为新版浏览器逐渐删除了对带前缀的属性和值的支持。如今，编写CSS时你完全可以不使用厂商前缀，不过偶尔会遇到别人使用，或者在以前的代码基中见到。

TanXinNiao commented 3 years ago

媒体查询

媒体査询可以在下述几个地方使用： link元素的media属性。 style元素的media属性。 @import声明的媒体描述符部分。 @media声明的媒体描述符部分。

下面是这个CSS中比较简单的两个规则：

hl {
      color: maroon;
    }

    @media projection {
      body {
        background: yellow;
      }
    }

针对这个例子，在所有媒体中，hl元素的颜色都是红褐色，但是，在投影媒体中body 元素会有一个黄色背景。

媒体类型

媒体査询最基本的形式媒体类型，由CSS2引入。媒体类型就是指明不同媒体的标注： all 用于所有展示媒体。 print 为有视力的用户打印文档时使用，也在预览打印效果时使用。 screen 在屏幕媒体（如桌面电脑的显示器）上展示文档时使用。在桌面计算机上运行的所有Web浏览器都是屏幕媒体用户代理。多个媒体类型使用逗号分隔罗列。

媒体描述符

对于在link元素或@import声明中设定过媒体类型的人来说，一定不会对媒体査询的位置感到陌生。下面两种方式都能把指定的外部样式表应用到彩打上：

<link href="print-color.css" type="text/css" media="print and (color)" rel="stylesheet">
@import url(print-color.css) print and (color);

能使用媒体类型的地方都能使用媒体查询。继续以彩打为例，这意味着可以通过一个逗号分隔的列表列出多个査询：

<link href="print-color.css" type="text/css" 
media="print and (color),screen and (color-depth: 8)" rel="stylesheet"> print and (color), screen and (color-depth: 8);>

只要其中一个媒体查询的条件得到满足，就会应用指定的样式表。对前面的^import声明来说，使用彩色打印机打印文档，或者在色深足够的环境中渲染文档时会使用print¬color.css 如果使用的是黑白打印机，两个査询的条件都不满足，因此print-color, css不会应用到文档上。

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

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

一般情况下，媒体特性描述符的格式类似于css中的一对属性和值。二者之间最大的区别是，特性描述符可以不指定值。因此，任何彩色媒体都符合(color)指定的条件，任何色深为16位的彩色媒体都符合(color: 16)指定的条件。其实，不指定值时是在做判断。比如说，(color)的意思是“这个媒体是彩色的吗？ ” 多个特性描述符使用逻辑关键字and连接。媒体査询中可使用的逻辑关键字有两个： and 连接的两个或多个媒体特性必须同时满足条件，整个査询得到的结果才是真值。例如, (color) and (orientation: landscape) and (min-device-width: 8OOpx)表示三个条件都要满足：当媒体环境是彩色的、横向放着，而且设备的屏幕宽至少为800 像素，才会应用样式表。 not 对整个査询取反。假如所有条件都为真，那样式表不会应用到文档上。例如，not (color) and (orientation: landscape) and (min-device-width: 800px)表示三个条目都满足时，整个语句得到的结果与之相反。因此，当媒体环境是彩色的、横向放着，而且设备的屏幕宽至少为800像素，样式表不会应用到文档上。除此之外的情况下，都将应用样式表。注意，not关键字只能在媒体查询的开头使用。写为这样是无效的：(color) and not (min-device-width: 800px)o如果真这样写，媒体查询将被忽略。还要注意，太旧的浏览器不支持媒体査询，因此会跳过媒体描述符以not开头的样式表。

TanXinNiao commented 3 years ago

特性查询

015-2016年间，CSS新增了一个功能：根据用户代理是否支持特定的CSS属性及其值来应用一段样式。这个功能称为特性査询(feature query)。特性査询在结构上与媒体査询很像。假设我们想在用户代理支持color属性时(显然是支持的)为元素设定颜色，可以这样写：

@supports (color: black) ( body {color: black;} hl {color: purple;} h2 (color: navy;} } 上述代码的意思其实是，“如果你能识别并处理color: black这样的属性和值组合，那就应用这段样式，否则，跳过这段样式。特性査询是渐进增强样式的完美方式。比如说你想在浮动布局之外增加栅格布局，可以保留现有的布局方式，在样式表中添加下面这段样式：

@supports (display: grid ) (
  section#main {display: grid;}
  /*去掉旧布局的样式♦/
  /*栅格布局的样式*/
}

@supports (display: flex) {
      @media screen {
        /*针对屏幕媒体的弹性盒样式*/
      }

      @media print {
        /*针对印刷媒体的弹性盒样式*/
      }
    }

反过来，也可以在实现响应式设计的媒体査询块中添加@supports()块有时，我们想使用的属性与测试的属性不同。还以栅格布局为例，你可能想在支持栅格时修改布局元素的外边距等。下面是简化的版本：

div#main (overflow: hidden;}
div.column {float: left; margin-right: lem;}
div.column:last-child {margin-right: 0;}
@supports (display: grid) {
  div#main {display: grid; grid-gap: lem 0;
  overflow: visible;}
  div#main div.column {margin: 0;}
}

此外，还可以使用取反运算符。例如，下述样式在不支持栅格布局时应用 @supports not (display: grid)

TanXinNiao / blog