CSS笔记

date

Oct 5, 2021

slug

css

status

Published

基础

CSS 指的是层叠样式表 (Cascading Style Sheets)也称级联样式表

CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素

CSS 节省了大量工作。它可以同时控制多张网页的布局

外部样式表存储在 CSS 文件中

CSS 规则集（rule-set）由选择器和声明块组成：

选择器

可以将 CSS 选择器分为五类：

简单选择器（根据名称、id、类来选取元素）

组合器选择器（根据它们之间的特定关系来选取元素）

伪类选择器（根据特定状态选取元素）

伪元素选择器（选取元素的一部分并设置其样式）

属性选择器（根据属性或属性值来选取元素）

CSS id 选择器：要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

注意：id 名称不能以数字开头。

CSS 类选择器：如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

CSS 通用选择器：通用选择器（*）选择页面上的所有的 HTML 元素。

CSS 分组选择器：如需对选择器进行分组，请用逗号来分隔每个选择器。

使用

有三种插入样式表的方法：

外部 CSS

内部 CSS

行内 CSS

每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。

内部样式是在 head 部分的 <style> 元素中进行定义。

如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

如果在不同样式表中为同一选择器（元素）定义了一些属性，则将使用最后读取的样式表中的值。

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

行内样式（在 HTML 元素中）

外部和内部样式表（在 head 部分）

浏览器默认样式

注释

位于 <style> 元素内的 CSS 注释，以 /* 开始，以 */ 结束

背景

图像仅在水平方向重复 (background-repeat: repeat-x;)

如需垂直重复图像，请设置 background-repeat: repeat-y;

background-repeat 属性还可指定只显示一次背景图像：no-repeat;

background-position 属性用于指定背景图像的位置。

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）

在使用简写属性时，属性值的顺序为：

background-color

background-image

background-repeat

background-attachment

background-position

边框

border-style 属性指定要显示的边框类型。

允许以下值：

dotted - 定义点线边框

dashed - 定义虚线边框

solid - 定义实线边框

double - 定义双边框

groove - 定义 3D 坡口边框。效果取决于 border-color 值

ridge - 定义 3D 脊线边框。效果取决于 border-color 值

inset - 定义 3D inset 边框。效果取决于 border-color 值

outset - 定义 3D outset 边框。效果取决于 border-color 值

none - 定义无边框

hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

如果 border-style 属性设置四个值：

border-style: dotted solid double dashed;

上边框是虚线

右边框是实线

下边框是双线

左边框是虚线

如果 border-style 属性设置三个值：

border-style: dotted solid double;

上边框是虚线

右和左边框是实线

下边框是双线

如果 border-style 属性设置两个值：

border-style: dotted solid;

上和下边框是虚线

右和左边框是实线

外边距

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。

所有外边距属性都可以设置以下值：

auto - 浏览器来计算外边距

length - 以 px、pt、cm 等单位指定外边距

% - 指定以包含元素宽度的百分比计的外边距

inherit - 指定应从父元素继承外边距

提示：允许负值。

可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。

然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并

如果这个外边距遇到另一个元素的外边距，它还会发生合并

注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

内边距

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。

CSS width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。

因此，如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。

若要将宽度保持为 300px，无论填充量如何，那么您可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

高度和宽度

height 和 width 属性不包括内边距、边框或外边距！它们设置的是元素的内边距、边框和外边距内的区域的高度/宽度！

框模型

所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。

CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。

提示：背景应用于由内容和内边距、边框组成的区域。

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。

轮廓

注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

文本

text-align 属性用于设置文本的水平对齐方式。

当 text-align 属性设置为 "justify" 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）

text-decoration 属性用于设置或删除文本装饰。

注释：建议不要在非链接文本加下划线，因为这经常会使读者感到困惑。

text-transform 属性用于指定文本中的大写和小写字母。

text-indent 属性用于指定文本第一行的缩进

letter-spacing 属性用于指定文本中字符之间的间距

line-height 属性用于指定行之间的间距

word-spacing 属性用于指定文本中单词之间的间距

text-shadow 属性为文本添加阴影。最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）

字体

在 CSS 中，有五个通用字体族：

衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。

无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。

等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。

草书字体（Cursive）- 模仿了人类的笔迹。

幻想字体（Fantasy）- 是装饰性/俏皮的字体。

所有不同的字体名称都属于这五个通用字体系列之一。

font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。

注释：如果字体名称不止一个单词，则必须用引号引起来，例如："Times New Roman"。

font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

normal - 文字正常显示

italic - 文本以斜体显示

oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。

在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。

1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

可以使用 vw 单位设置文本大小，它的意思是“视口宽度”（"viewport width"）。这样，文本大小将遵循浏览器窗口的大小

视口（Viewport）是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。

如果您不想使用 HTML 中的任何标准字体，则可以使用 Google Fonts API 向页面添加数百种其他字体。

只需添加一个样式表链接并引用选择的字体系列

链接

四种链接状态分别是：

a:link - 正常的，未访问的链接

a:visited - 用户访问过的链接

a:hover - 用户将鼠标悬停在链接上时

a:active - 链接被点击时

如果为多个链接状态设置样式，请遵循如下顺序规则：

a:hover 必须在 a:link 和 a:visited 之后

a:active 必须在 a:hover 之后

列表

在使用简写属性时，属性值的顺序为：

list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）

list-style-position（指定列表项标记应显示在内容流的内部还是外部）

list-style-image（将图像指定为列表项标记）

如果缺少上述属性值之一，则将插入缺失属性的默认值（如果有）。

表格

向 <th> 和 <td> 添加 border-bottom 属性，以实现水平分隔线

在 <tr> 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行

为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color

display

每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline

块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。

块级元素的一些例子：

<div>

<h1> - <h6>

<form>

<header>

<footer>

<section>

内联元素不从新行开始，仅占用所需的宽度。

行内元素的一些例子：

<span>

<img>

display: none; 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。

注意：设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。

通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中

visibility:hidden; 也可以隐藏元素。但是，该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局

Position

position 属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）。

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

HTML 元素默认情况下的定位方式为 static（静态）。静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: relative; 的元素相对于其正常位置进行定位。设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。固定定位的元素不会在页面中通常应放置的位置上留出空隙。

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

注意：“被定位的”元素是其位置除 static 以外的任何元素。

position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

注意：Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。 Safari 需要 -webkit- 前缀。您还必须至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用。

z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。元素可以设置正或负的堆叠顺序

Overflow

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性可设置以下值：

visible - 默认。溢出没有被剪裁。内容在元素框外渲染

hidden - 溢出被剪裁，其余内容将不可见

scroll - 溢出被剪裁，同时添加滚动条以查看其余内容

auto - 与 scroll 类似，但仅在必要时添加滚动条

注释：overflow 属性仅适用于具有指定高度的块元素。

overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出：

overflow-x 指定如何处理内容的左/右边缘。

overflow-y 指定如何处理内容的上/下边缘。

float

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一：

left - 元素浮动到其容器的左侧

right - 元素浮动在其容器的右侧

none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。

inherit - 元素继承其父级的 float 值

最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。

clear

clear 属性可设置以下值之一：

none - 允许两侧都有浮动元素。默认值

left - 左侧不允许浮动元素

right- 右侧不允许浮动元素

both - 左侧或右侧均不允许浮动元素

inherit - 元素继承其父级的 clear 值

使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。

在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方。

如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：可以向包含元素添加 overflow: auto;，来解决此问题

新的现代 clearfix hack 技术使用起来更安全，以下代码被应用于多数网站

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

display

display: inline-block与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。

同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。

与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。

垂直对齐

一个简单的解决方案是使用上下内边距

如需同时垂直和水平对齐，请使用 padding 和 text-align: center;

另一个技巧是使用其值等于 height 属性值的 line-height 属性

另一种解决方案是使用 position 和 transform 属性

还可以使用 flexbox 将内容居中。请注意，IE10 以及更早的版本不支持 flexbox

组合器

组合器是解释选择器之间关系的某种机制。

CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。

CSS 中有四种不同的组合器：

后代选择器 (空格)

子选择器 (>)

相邻兄弟选择器 (+)

通用兄弟选择器 (~)

后代选择器匹配属于指定元素后代的所有元素。

下面的例子选择 <div> 元素内的所有 <p> 元素：

div p {
  background-color: yellow;
}

子选择器匹配属于指定元素子元素的所有元素。

下面的例子选择属于 <div> 元素子元素的所有 <p> 元素，<div>子元素<section>的子元素<p>则不行

div > p {
  background-color: yellow;
}

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。

兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

下面的例子选择紧随 <div> 元素之后的 <p> 元素：

div + p {
  background-color: yellow;
}

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

下面的例子选择前面有 <div> 元素的所有 <p> 元素：

div ~ p {
  background-color: yellow;
}

伪类

伪类用于定义元素的特殊状态。

例如，它可以用于：

设置鼠标悬停在元素上时的样式

为已访问和未访问链接设置不同的样式

设置元素获得焦点时的样式

伪类的语法：

selector:pseudo-class {
  property: value;
}

在下面的例子中，选择器匹配所有 <p> 元素中的第一个 <i> 元素：

p i:first-child {
  color: blue;
}

在下面的例子中，选择器匹配作为另一个元素的第一个子元素的 <p> 元素中的所有 <i> 元素：

p:first-child i {
  color: blue;
}

伪元素

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

设置元素的首字母、首行的样式

在元素的内容之前或之后插入内容

注意：::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

字体属性

颜色属性

背景属性

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear

请注意双冒号表示法 - ::first-line 对比 :first-line

不透明度

opacity 属性的取值范围为 0.0-1.0。值越低，越透明

opacity 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时更改不透明度

使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读

导航栏

导航栏 = 链接列表

导航栏需要标准 HTML 作为基础。

在我们的实例中，将用标准的 HTML 列表构建导航栏。

导航栏基本上就是链接列表，因此使用 <ul> 和 <li> 元素会很有意义

有两种创建水平导航栏的方法：使用行内或浮动列表项

构建水平导航栏的一种方法是，将 <li> 元素指定为 inline

为 <ul> 添加 position: sticky;，以创建粘性导航栏。粘性元素会根据滚动位置在相对和固定之间切换。它是相对定位的，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）

下拉菜单

.dropdown 类使用 position:relative，当我们希望将下拉内容放置在下拉按钮的正下方（使用 position:absolute）时，需要使用该类。

.dropdown-content 类保存实际的下拉菜单内容。默认情况下它是隐藏的，并将在悬停时显示（请看下文）。请注意，min-width 设置为 160px。可随时更改此设置。提示：如果您希望下拉内容的宽度与下拉按钮的宽度一样，请将宽度设置为 100％（设置 overflow:auto 可实现在小屏幕上滚动）。

当用户将鼠标移到下拉按钮上时，:hover 选择器用于显示下拉菜单。

属性选择器

CSS [attribute] 选择器：[attribute] 选择器用于选取带有指定属性的元素。

CSS [attribute="value"] 选择器：[attribute="value"] 选择器用于选取带有指定属性和值的元素。

CSS [attribute~="value"] 选择器：[attribute~="value"] 选择器选取属性值包含指定词的元素。

CSS [attribute|="value"] 选择器：[attribute|="value"] 选择器用于选取指定属性以指定值开头的元素。

CSS [attribute^="value"] 选择器：[attribute^="value"] 选择器用于选取指定属性以指定值开头的元素。

CSS [attribute$="value"] 选择器：[attribute$="value"] 选择器用于选取指定属性以指定值结尾的元素。（值不必是完整单词

CSS [attribute*="value"] 选择器：[attribute*="value"] 选择器选取属性值包含指定词的元素。

计数器

CSS 计数器就像“变量”。变量值可以通过 CSS 规则递增（将跟踪它们的使用次数）。

如需使用 CSS 计数器，我们将使用以下属性：

counter-reset - 创建或重置计数器

counter-increment - 递增计数器值

content - 插入生成的内容

counter() 或 counters() 函数 - 将计数器的值添加到元素

如需使用 CSS 计数器，必须首先使用 counter-reset 创建它。

特异性

如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出。

将特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。

通用选择器（*）具有较低的特异性，而 ID 选择器具有较高的特异性！

每个选择器在特异性层次结构中都有其位置。以下四种类别定义了选择器的特异性级别：

行内样式 - 行内（内联）样式直接附加到要设置样式的元素。实例：<h1 style="color: #ffffff;">。

ID - ID 是页面元素的唯一标识符，例如 #navbar。

类、属性和伪类 - 此类别包括 .classes、[attributes] 和伪类，例如：:hover、:focus 等。

元素和伪元素 - 此类别包括元素名称和伪元素，比如 h1、div、:before 和 :after。

特异性规则 1：在特异性相同的情况下：最新的规则很重要 - 如果将同一规则两次写入外部样式表，那么样式表中后面的规将更靠近要设置样式的元素，因此会被应用

特异性规则 2：ID 选择器比属性选择器拥有更高的特异性

特异性规则 3：上下文选择器比单一元素选择器更具体 - 嵌入式样式表更靠近要设置样式的元素。

特异性规则 4：类选择器会击败任意数量的元素选择器 - 类选择器（诸如 .intro 会击败 h1、p、div 等）

此外，通用选择器以及被继承的值拥有 0 - * 的特异性，body * 及类似拥有 0 的特异性。被继承的值的特异性也为 0。