1.基础知识

1. 什么是CSS

CSS（层叠样式表）用于设置和布置网页——例如，更改内容的字体、颜色、大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。

2. CSS语法

CSS 是一门基于规则的语言 —— 你能定义用于你的网页中特定元素样式的一组规则。一个 CSS 样式表可以包含很多个规则。

语法由一个 选择器（selector）起头。它选择了我们将要用来添加样式的 HTML 元素。

接着输入一对大括号 { }。在大括号内部定义一个或多个形式为属性（property）—值（value）对的声明。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。

冒号之前是属性，冒号之后是值。不同的 CSS 属性对应不同的合法值。

1.CSS 应用于文档的三种方法：使用外部样式表、使用内部样式表和使用内联样式。

外部样式表在一个单独的扩展名为 .css 的文件中包含 CSS。

一个内部样式表驻留在 HTML 文档内部。要创建一个内部样式表，你要把 CSS 放置在包含在 HTML <head> 元素中的 <style> 元素内。

内联样式是影响单个 HTML 元素的 CSS 声明，包含在元素的 style 属性中。注意：尽可能避免以这种方式使用 CSS。这不符合最佳实践。

2.选择器

选择器用来指定网页上我们想要样式化的HTML元素。选择器以 HTML 为目标，对内容应用样式。每个 CSS 规则都以一个选择器或一组选择器为开始，去告诉浏览器这些规则应该应用到哪些元素上。选择器所选择的元素，叫做“选择器的对象”。

如果你有多个使用相同样式的 CSS 选择器，那么这些单独的选择器可以被混编为一个“选择器列表”，这样，规则就可以应用到所有的单个选择器上了。

当你使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略。

1.类型选择器

类型选择器有时也叫做“标签名选择器”或者是“元素选择器”，因为它在文档中选择了一个 HTML 标签/元素的缘故。如：

span {
}
strong {
}
em {
}

2.全局选择器

全局选择器，是由一个星号（*）代指的，它选中了文档中的所有内容（或者是父元素中的所有内容，比如，它紧随在其他元素以及邻代运算符之后的时候）。如：

* {
    margin: 0;
}

上面用全局选择器，移去了所有元素上的外边距。

3.类选择器

类选择器以一个句点（.）开头，会选择文档中应用了这个类的所有物件。

.highlight {
    background-color: yellow;
}
<h1 class="highlight">Class selectors</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo
    melon azuki bean garlic.</p>

4.id选择器

ID 选择器开头为#而非句点，不过基本上和类选择器是同种用法。可是在一篇文档中，一个 ID 只会用到一次。它能选中设定了id的元素，你可以在 ID 前面加上类型选择器，只指向元素和 ID 都匹配的类。

h1#heading {
    color: rebeccapurple;
}
<p id="one">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
    greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

3.属性和值

在最基本的层面上，CSS 由两个组成部分组成：

属性：人类可读的标识符，指示想要更改的样式特征。如 font-size、width、background-color。
值：每个指定的属性都有一个值，这个值表示如何对属性施加样式。

当一个属性与一个值配对时，这种配对被称为 CSS声明 。CSS 声明块与选择器 配对，以生成 CSS 规则集（或称 CSS 规则）。

CSS 属性和值是不区分大小写的。一个属性——值对中的属性和值用冒号（:）分隔。

2.布局与定位

1.正常流布局

正常布局流（normal flow）是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。

2.弹性盒

Flexbox 是 CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。要使用 flexbox，你只需要在想要进行 flex 布局的父元素上应用display: flex ，所有直接子元素都将会按照 flex 进行布局。

3.网格

Grid 布局用于同时在两个维度上把元素按行和列排列整齐。

4.浮动

应用 float 值，诸如 left 能够让块级元素互相并排成一行，而不是一个堆叠在另一个上面。

5.定位

定位 (positioning) 能够让我们把一个元素从它原本在正常布局流 (normal flow) 中应该在的位置移动到另一个位置。定位 (positioning) 并不是一种用来给你做主要页面布局的方式，它更像是让你去管理和微调页面中的一个特殊项的位置。

6. CSS 表格布局

表格的布局方式可以用在非表格内容上，可以使用display: table和相关属性在非表元素上使用。

7.多列布局

这个Multi-column layout属性可以让块按列布局，比如报纸的内容就是一列一列排布的。

属性

display属性

display 属性 — 标准的 value，比如block, inline 或者 inline-block 元素在正常布局流中的表现形式 . 接着是全新的布局方式，通过设置display的值，比如 CSS Grid和 Flexbox).

position属性

position 属性 — 允许你精准设置盒子中的盒子的位置，正常布局流中，默认为 static ，使用其他值会引起元素不同的布局方式，例如将元素固定到浏览器视口的左上角。

3.层叠与继承

1.层叠

样式表层叠——简单的说，就是 CSS 规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。

下面的示例中，我们有两个关于 <h1> 的规则。<h1> 最后显示蓝色——这两个规则来自同一个源，且具有相同的元素选择器，有相同的优先级，所以顺序在最后的生效。

h1 { 
    color: red; 
}
h1 { 
    color: blue; 
}
    
<h1>This is my heading.</h1>

2.优先级

与层叠密切相关的概念是优先级，决定在发生冲突的时候应该使用哪条规则。

浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。它基本上是一个衡量选择器具体选择哪些区域的尺度：

一个元素选择器不是很具体，则会选择页面上该类型的所有元素，所以它的优先级就会低一些。
一个类选择器稍微具体点，则会选择该页面中有特定 class 属性值的元素，所以它的优先级就要高一点。

两个适用于 <h1> 的规则：下面的 <h1> 最后会显示红色——类选择器 main-heading 有更高的优先级，因此就会被应用——即使元素选择器顺序在它后面。

.main-heading { 
    color: red; 
}
        
h1 { 
    color: blue; 
}

<h1 class="main-heading">This is my heading.</h1>

3.继承

CSS 为控制继承提供了五个特殊的通用属性值。每个 CSS 属性都接收这些值。

inherit 设置该属性会使子元素属性和父元素相同。实际上，就是“开启继承”。
initial 将应用于选定元素的属性值设置为该属性的 初始值。
revert 将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于 unset。
revert-layer 将应用于选定元素的属性值重置为在上一个层叠层 中建立的值。
unset 将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial 一样

4.响应式设计

响应式 Web 设计不是单独的技术，它是描述 Web 设计的一种方式、或者是一组最佳实践的一个词，它是用来建立可以响应查看内容的设备的样式的一个词。现代的 CSS 布局方式基本上就是响应式的，而且我们在 Web 平台上内置了新的东西，使得设计响应式站点变得容易。

1.媒介查询

响应式设计仅仅是因为媒介查询才新兴起来的。媒介查询允许我们运行一系列测试，例如用户的屏幕是否大于某个宽度或者某个分辨率，并将 CSS 选择性地适应用户的需要应用在样式化页面上。

你可以在一张样式表上加入多条媒体查询，调整整个页面或者部分页面以达到适应各式屏幕尺寸的最佳效果。媒体查询，以及样式改变时的点，被叫做断点（breakpoints）。

使用媒体查询时的一种通用方式是，为窄屏设备（例如移动设备）创建一个简单的单栏布局，然后检查是否是大些的屏幕，在你知道你有足够容纳的屏幕宽度的时候，开始采用一种多栏的布局。这经常被描述为移动优先设计。

2.灵活网格

响应式站点不只是在断点之间改变它们的布局，它们是建立在灵活网格上的。一个灵活网格意味着你不需要适配每个可能使用的设备尺寸，然后为其建立一个精确到像素级的适配布局。那种方式在现存有如此多种不同大小设备的前提下是不可能实现的，比如至少在台式机上，人们并不总是让他们的浏览器窗口最大化的。

使用灵活网格，你只需要加进去一个断点，在内容看起来不齐整的时候改变设计。例如如果一行随着屏幕大小增加而增长得不可读的长，或者是一个盒子在变窄时把每行的两个单词挤到一起。

3.现代布局技术

现代布局方式，例如多栏布局、伸缩盒 和网格默认是响应式的。它们都假设你在尽力创建一个可伸缩网格，而且给了你更容易这样做的方式。

1.多个列

这些布局方式中最老的一个是多个列，即当你指定一个column-count的时候，这意指你希望把你的内容分成多少列。浏览器之后会算出这些列的大小，这是一个随着屏幕尺寸变化的尺寸。

2.伸缩盒

在伸缩盒中，初始的行为是，弹性的物件将参照容器里面的空间的大小，缩小和分布物件之间的空间。通过更改flex-grow和 flex-shrink的值，你可以指示在物件遇到周围有更多或者更少的空间的情况下，你所期望的物件表现。

3.CSS 网格

在 CSS 网格布局中，fr单位许可了跨网格轨道可用空间的分布。

4.响应式图像

响应式图像，使用了<picture>元素和<img> srcset和sizes 特性，解决了这两个问题。你可以提供附带着“提示”（描述图像最适合的屏幕尺寸和分辨率的元数据）的多种尺寸，浏览器将会选择对设备最合适的图像，以确保用户下载尺寸适合他们使用的设备的图像。

第六届字节跳动青训营笔记 理解CSS｜ 青训营