CSS：权威指南读书笔记 第一章 CSS基础

第一章? ?CSS基础

样式的简史

CSS最早在1994年提出，1996年12月W3C推出了CSS规范的第一个版本，1998年W3C发布了CSS的第二个版本即CSS2.0,2001年5月W3C开始进行CSS3标准的制定，到目前为止该标准还没有最终定稿。

结构规则

浏览器引擎前缀

有时您会看到带有连字符和标签的CSS片段，如下所示：-o-border-image。这些浏览器引擎前缀是浏览器供应商标记属性、值或其他CSS片段为实验性或专有（或两者兼有）的一种方式。截至2023年初，一些浏览器引擎前缀是多余的，表1-1显示了最常见的前缀。

表1-1. 一些常见的供应商前缀

前缀 ????????????????????????供应商

-epub- ???????????????????国际数字出版论坛ePub格式

-moz- ????????????????????基于Gecko的浏览器（例如Mozilla Firefox）

-ms-? ? ? ? ? ? ? ? ? ? ? ?微软Internet Explorer

-o-? ? ? ? ? ? ? ? ? ? ? ? ? 基于Opera的浏览器

-webkit-? ? ? ? ? ? ? ? ? 基于WebKit的浏览器（例如Apple Safari和Google Chrome）

空白处理

CSS基本上对规则之间的空格不敏感，并且在很大程度上对规则内的空格不敏感，尽管存在一些例外。总的来说，CSS对待空格的方式与HTML相同：任何空格序列在解析时都会被压缩为一个空格。

CSS注释

/*? 注释内容 */? ? ?可以行注释也可快注释?

替换和非替换元素

替换元素用于指示应替换为文档中直接表示的内容的内容。也许最熟悉的HTML示例是<img>元素，它被外部文档的图像文件替换。实际上，<img>没有实际内容。

同样，input元素也可以被替换——通过单选按钮、复选框、文本输入框或其他，具体取决于它的类型。

大多数HTML元素是非替换元素。它们的内容由用户代理（通常是浏览器）在元素本身生成的框内呈现。

元素显示角色

CSS 有两个基本的显示角色：块级格式化上下文和内联上下文

块级元素

默认情况下，块级元素生成一个元素框，该框（默认情况下）填充其父元素的内容区域，并且在其侧面不能有其他元素。换句话说，它在元素框前后生成了“换行”。HTML中最熟悉的块元素是<p>和<div>。替换元素可以是块级元素，但通常不是。

在CSS中，这被称为元素生成块格式上下文。这也意味着该元素生成了一个块级外部显示类型。元素内部的部分可能具有不同的显示类型。

块级元素是指在页面上以块的形式展现，单独占据一行或多行空间，如div、p、h1等。这些元素默认情况下会从上到下排列，同时宽度会自动填满其父级容器。

内联级元素

默认情况下，内联级元素在一行文本中生成一个元素框，并且不会中断该行的流。最好的内联元素示例是HTML中的<a>元素。其他候选者包括<strong>和<em>。这些元素在其自身前后不会生成“换行”，因此它们可以出现在另一个元素的内容中而不破坏其显示。

在CSS中，这被称为元素生成内联格式上下文。这也意味着该元素生成了一个内联外部显示类型。元素内部的部分可能具有不同的显示类型。

内联级元素（行内元素）是指在页面中以行内的方式展现，不会单独占据一行空间，只会按顺序从左往右排列，如a、span、em等。这些元素的宽度默认根据其包含的内容来决定，并且无法设置宽度、高度、外边距和内边距等属性。

为了了解这是如何工作的，让我们详细了解一下CSS属性display。?

dispaly属性的作用
在CSS中display属性表示"显示框类型"，即不同的盒模型。简单来说，可以把块级盒子转成内联盒子，也可以把内联盒子转换为块级盒子。

display的分类

< display-outside >? ?? ? ??block | inline | run-in
< display-inside >? ? ? ? ? ?low | flow-root | table | flex | grid | ruby
< display-listitem >? ? ? ? ?list-item && < display-outside >? && [ flow | flow-root]?
< display-internal >? ? ? ? ?table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
< display-box >? ? ? ? ? ? ??contents | none
< display-legacy >? ? ? ? ??inline-block | inline-list-item | inline-table | inline-flex | inline-grid

display-outside(外部值)
外部值就是定义自身元素的外部表现，而不影响其内的子元素。
block：将元素表示为块级元素
inline：将元素表示为内联盒子
run-in：实际是块元素和行内元素的混合，可以使某些元素成为下一个块级框元素的行内部分。实验性质的属性，浏览器兼容不好

display-inside(内部值)
和外部值相反，内部值就是定义子元素布局的。像flex，grid这些都会影响到子元素的布局形式。

low-root：一个BFC的块级盒子
table：带有内部表格布局的块级盒子。
flex：带有内部弹性布局的块级盒子
grid：带有内部网格布局的块级盒子

flex布局和grid网格布局都是强大的布局属性，在当下的网页布局中，大多数是采用这两种布局。

CSS引入方式

<link> 标签 （链入外部样式表）

首先，考虑使用 <link> 标签：

<link> 标签属性?

rel??必需。定义当前文档与被链接文档之间的关系。rel 是 relationship的英文缩写。

值：alternate archives author bookmark external first help icon last license next nofollow noreferrer pingback prefetch prev search sidebar stylesheet tag? up

type 可选。规定被链接文档的 MIME 类型。默认值为text/css

href??这个属性的值是样式表的URL。这个URL可以是绝对的也可以是相对的。

media??规定被链接文档将显示在什么设备上。这个属性的值是一个或多个媒体描述符，这些描述符是关于媒体类型和这些媒体功能的规则，每个规则都用逗号分隔。

候选样式表

所谓 候选样式表（alternate stylesheet）， 就是定义多套样式，其中一套为默认样式，其余为候选样式，供用户选择。

多数基于 Gecko 的浏览器，如 FireFox 和 Opera，都支持候选样式表。Internet Explorer 元素不支持，不过可以借助 JavaScript。基于 WebKit 的浏览器不支持候选样式表。

<style> 元素（内部样式）

?<style> 元素是包含样式表的一种方式，它写在文档中： <style>...</style><style>标签之间的样式被称为文档样式表或嵌入式样式表（因为这种样式的样式表嵌入在文档中）。

@import 指令

与 <link> 类似，@import 可以指导 web 浏览器加载外部样式表，并在其样式下渲染 HTML 文档。唯一的重大区别是命令的语法和位置。如您所见，@import 在 <style> 元素中找到。它必须放在其他 CSS 规则之前，否则根本不起作用。另一个可以添加到 @import 指令中的描述符是级联层标识符。这将所有导入样式表中的样式分配给一个级联层。

HTTP链接

截至2022年底，支持HTTP链接样式表的常用浏览器是Firefox家族和Opera。

内联样式

如果您想只为一个单独的元素分配一些样式，而不需要嵌入或外部样式表，您可以使用 HTML 的 style 属性：