1. Johngo学长首页
  2. 技术点详细复盘专题
  3. Python

CSS 笔记

• Python • 阅读 69

CSS，或 Cascading Style Sheets （层叠样式表或级联样式表），用来给浏览器添加样式。

内联 Inline Style

使用 style 属性来引入 CSS

嵌入 Embedded Style

在 <head></head> 标签里使用 <style></code> 标签</p><pre><code class="language-html"><head> <br /> <style> h1 { color: blue; } </style> </p> <p>

外联 External Style Sheets

把 HTML 代码和 CSS 代码分别存储到两个文件中，在 <head></head> 标签中通过 <link> 标签引入 CSS



selector {
    property: value;  /* declaration */
}

其中 selector 为选择器，declaration 为声明，property 为声明中的属性，value 为声明的属性值。

每个元素的样式规则都应该有开始和结束大括号（ { 和 }）。 还需要确保元素的样式定义在开始和结束样式标签之间，并且每条样式规则都以分号 ;结束。

通用选择器 Universal Selector

使用 * 来选择所有元素，称为通用选择器或通配符。

* {
  color: blue;
}

元素/类型选择器 Element/Type Selector

元素选择器或者类型选择器()选择 HTML 元素。

h2 {
  color: green;
}

类选择器 Class Selector

.blue-text {
  color: blue;
}

CSS 的 class 具有可重用性，可应用于各种 HTML 元素。

注意:

  • 在 CSS style 元素里，class 名以一个句点开头。 在 HTML 元素的 class 属性中，class 名的开头没有 .。
  • 不能用数字开头命名类或者 ID。
  • 即使某个 HTML 元素有多个类，CSS 选择器只是其中一个，仍然会匹配该元素。

记得在一个元素上可以同时应用多个 class，使用空格来分隔不同 class 即可， 例如：

ID 选择器 ID Selector

#red {
  color: red;
}

每一个 HTML 元素都有一个 id 属性。

使用 id 的好处：通过 id 选择器来改变单个元素的样式。

根据规范， id 属性应是唯一的。 尽管浏览器并非必须执行这条规范，但这是广泛认可的最佳实践。

注意在 style 标签里，声明 class 的时候必须在名字前插入 . 符号。 同样，在声明 id 的时候，也必须在名字前插入 # 符号。

如果浏览器遇到多个 id，css 规则依然会生效。但是，任何具有 id 属性的元素应该具有唯一的值。

属性选择器 Attribute Selector

使用 [attr=value] 属性选择器来修改样式。这个选择器使用特定的属性值来匹配和设置元素样式。

属性修改器可以和正则表达式配合。

例如，下面的代码会改变所有 type 为 radio 的元素的外边距。

[type='radio'] {
  margin: 20px 0px 20px 0px;
}

也可以匹配一个属性，不针对属性值。

[type] {
  margin: 20px 0px 20px 0px;
}

加上 s 来区分大小写， i 忽略大小写：

[data-type='primary' s] {
  color: red;
}

分组选择器 Grouping Selector

可以用逗号分割多个选择器：

strong,em,.my-class,[lang] {
  color: red;
}

伪类选择器 Pseudo Class

伪类是可以添加到选择器上的关键字，用来选择特定状态的元素。

伪类使用单个冒号： :

a:hover {
  color: blue;
}
/* 这条规则的作用是：当光标放在超链接上时，超链接显示蓝色 */

a:visited {
  color: pink;
}
/* 这条规则的作用是：当访问超连接后，超链接显示粉色 */

p:nth-child(even) {
  color: red;
}
/* 这条规则的作用是：选择所有的偶数段落，把文本颜色设置为红色 */

伪元素使用两个冒号： ::。

::before 创建一个伪元素，它是所选元素的第一个子元素； ::after 创建一个伪元素，它是所选元素的最后一个子元素。

::before 和 ::after 必须配合 content 来使用。 这个属性通常用来给元素添加内容诸如图片或者文字。 尽管有时 ::before 和 ::after 是用来实现形状而非文字，但 content 属性仍然是必需的，此时它的值可以是空字符串。

.heart::before {
  content: "";
  background-color: yellow;
  border-radius: 25%;
  position: absolute;
  height: 50px;
  width: 70px;
  top: -50px;
  left: 5px;
}

在上面的例子里，class 为 heart元素的 ::before 伪类添加了一个黄色的长方形，长方形的高和宽分别为 50px 和 70px。 这个矩形有圆角，因为它的 border-radius为 25%，它的位置是绝对位置，位于离元素左边和顶部分别是 5px、 50px 的位置。

不过，伪元素不限于插入内容。您还可以使用它们来定位元素的特定部分。例如，假设您有一个列表，则可以使用 ::marker 为列表中的每个项目符号点（或数字）设置样式

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

您还可以使用 ::selection 为用户突出显示的内容设置样式。

::selection {
  background: black;
  color: white;
}

复杂选择器

复杂选择器实现更精准的定位。

只能向下级联，选择子元素，而不能向上选择父元素。

连结符位于两个选择器之间。

这种连结符用于定位子元素，使用空格 。

后代连结符是递归的。

p strong {
  color: blue;
}

/* 这段代码只匹配 p 元素的 strong 子元素 */

使用 + 选择在同一个父元素下，紧跟在另一元素之后的元素。

p + strong {
  color: blue;
}

使用 ~ 选择在同一父元素下的，某个元素后的元素。

可以配合使用 :checked 伪类创造一个纯 CSS switch 元素。

:checked ~ .toggle__decor {
  background: rebeccapureple;
}

孩子选择器或直接后代选择器使用 > 限制连结符仅仅应用于直接后代上。

组合选择器 Compound selector

可以把选择器组合：

a.my-class {
  color: red;
}

/* 选择具有 my-class 类的超链接 */

级联是一种解决当多个 CSS 规则应用于一个 HTML 元素产生冲突时的算法。

级联由 4 部分组成：

  • 位置和次序：CSS 规则出现的次序
  • 优先级（Specificity）：决定哪个 CSS 选择器有最强的匹配
  • 来源（Origin）：确定 CSS 的来源，例如：浏览器风格，浏览器扩展或者自己编写的 CSS
  • 重要性：有些 CSS 规则比其他要更加优先，例如： !important。

位置和次序

  • 对于多个相同形式的选择器规则，最后一个声明的生效。因为浏览器是从上往下读取的。
  • 在 HTML 中多个 link 标签链接 CSS 文件，最后一个 link 标签生效。style 标签同理。
  • 如果 style 标签声明在 link 标签之前，那么 link 标签生效。
  • 内联 style 属性会覆盖除了 !important 之外所有的规则。
  • 同一选择器下的多条同种规则，最后一条规则生效。

优先级

使用权重或者评分机制计算哪个选择器具有最高的优先性。

优先级计算是累积的，每种选择器都有特定的分数，把分数叠加就是优先级的分数。

CSS 选择器应该尽可能简单。

优先级评分：

  • 通用选择器 * ：0 分
  • 元素或者伪元素选择器：1 分
  • 类，伪类，属性选择器：10 分
  • :not() 伪类本身不加分，但是传入的参数加分，例如： :not(.my-class) 为 10 分
  • ID 选择器：100 分
  • 注意是 ID 选择器而不是带有 id 的属性选择器
  • 内联 style 属性：1000 分
  • !important：10000 分，这是单个条目能得到的最大分

分数相同的情况下，会应用最下面的 CSS 规则。

页面的 CSS 并不仅仅来源于程序员编写的 CSS 代码。

来源的优先级如下(从最低到最高优先级)：

  • 用户代理为基础的样式：浏览器默认应用到 HTML 的样式
  • 本地用户样式：操作系统层级，例如，基础字体大小，或者减弱动态效果等；也有可能是浏览器扩展添加的样式
  • 编写的 CSS：自己编写的 CSS
  • 使用了 !important
  • 本地用户样式使用 !important
  • 用户代理使用 !important

重要性

重要性的优先级(从最低到最高优先级)：

  • 常规规则，例如字体大小，背景，文本颜色
  • animation 规则
  • !important 规则
  • transition 规则

动画和转换的优先级很高，因为它们的预期效果就是改变视觉。

根元素 html 不会继承任何样式，因为它是第一个元素。

每一个 HTML 页面都含有 body 元素，可以在 body 元素上使用 CSS 样式。

设置 body 元素样式的方法跟设置其他 HTML 元素样式的方式一样，并且其他元素也会继承 body 中所设置的样式。

继承是自上而下的。

并不是所有的 CSS 属性都是可以继承的。

每一个 HTML 元素的每个 CSS 属性都有初始值。初始值并不会继承而是作为级联失败时的默认属性。

使用 inherit 关键字使任何属性继承父元素的值。

.my-component strong {
  font-weight: inherit;
}

使用 initial 关键字恢复属性值为默认值。

aside strong {
  font-weight: initial;
}

当某属性是可继承时， unset 关键字和 inherit 等同；反之和 initial 等同。因为记住哪些 CSS 属性是可继承的很难，所以 unset 可以发挥作用。

如果又给 p 加入了一些属性，为了避免手动调整特定的 unset，可以添加 all 属性，保证所有值都是不继承的。

/* p 的全局样式 */
p {
  margin: 2em;
  color: goldenrod;
}

/* 重设 aside 中 p 的样式 */
aside p {
  margin: unset;
  color: unset;
}

/* 重设 aside 中 p 的所有样式 */
aside p {
  margin: unset;
  color: unset;
  all: unset;
}

! important > 内联 > id 选择器 > 多个 class 中声明在最后的样式(CSS) > class 选择器 > 继承（body）

  • HTML 元素里应用的 class 的先后顺序无关紧要。
  • 但是，在 <style></code> 标签里面声明的 <code>class</code> 顺序十分重要，之后的声明会覆盖之前的声明。 第二个声明的优先级始终高于第一个声明。因为：浏览器是由上到下读取 CSS的。这就意味着，如果发生冲突，浏览器将会应用最后声明的样式。它会检查 CSS 声明顺序，而不是 HTML 使用顺序！</p></li><li><p>id 选择器无论在 <code>style</code> 标签的任何位置声明，都会覆盖 class 声明的样式。</p></li><li><p>使用 CSS 库， CSS 库中的样式也许会意外覆盖原有 CSS 样式。可以使用 <code>!important</code> 保证 CSS 样式不受影响</p><pre><code class="language-css">color: red !important; </code></pre></li></ul><p><code>px</code> 值，即像素。 像素是一个长度单位，它告诉浏览器应该如何调整元素的大小和位置。</p><p><strong>单位长度的类型可以分成 2 种：相对和绝对</strong>。</p><p>有些单位长度选项是相对视窗大小来改变值的， 这种设定符合响应式网页设计的原则。</p><h2 id="绝对单位-absolute-unit">绝对单位 Absolute Unit</h2><p>绝对单位与长度的物理单位相关。 例如，<code>in</code> 和 <code>mm</code> 分别代表着英寸和毫米。 绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，这就可能会造成误差。</p><h2 id="相对单位-relative-unit">相对单位 Relative Unit</h2><p>相对单位长度，比如 <code>em</code> 和 <code>rem</code>，它们的实际值会依赖其他长度的值而决定。 比如 <code>em</code> 的大小基于元素字体的大小。 如果使用它来设置 <code>font-size</code> 值，它的值会跟随父元素的 <code>font-size</code> 值来改变。</p><p>预指定颜色（predefined color）</p><pre><code class="language-css">color: blue;</li> </ul> <p>black silver gray white maroon red purple fuchsia green lime olive yellow navy blue teal aqua </code></pre><p>十六进制编码，简称 hex。</p><blockquote><p>Hexadecimals（或 hex）基于 16 位数字， 它包括 16 种不同字符。0-9 的符号代表 0 到 9 的值。 A、B、C、D、E、F 代表 10 至 15 的值。在 CSS 里面，使用 6 个十六进制的数字来代表颜色，每两个数字控制一种颜色，分别是红（R）、绿（G）、蓝（B）。 例如，<code>#000000</code> 代表黑色，同时也是最小的值。</p></blockquote><p>红色的 <code>#FF0000</code> 十六进制编码可以缩写成 <code>#F00</code>。 在这种缩写形式里，三个数字分别代表着红（R）、绿（G）、蓝（B）三原色。</p><p>不能混用缩写和全称。</p><pre><code class="language-css">color: #000000; color: #F00 /<em> 缩写 </em>/ color: #F000 /<em> error </em>/ </code></pre><p>RGB 值只需要指定每种颜色的亮度大小，数值范围从 0 到 255；或者用百分制表示。</p><p>黑色是(0,0,0)，白色是(255,255,255)。</p><p>RGB 后加入 <code>\</code> 表示透明度。</p><p>RGB 与 HEX 表示是等价的。</p><pre><code class="language-css">color: rgb(0,0,0)</p> <p>color: rgb(0%,0%,0%)</p> <p>color: rgb(0 0 0 / 0.5) </code></pre><blockquote><p>rgba 代表：<br>r = red 红色<br>g = green 绿色<br>b = blue 蓝色<br>a = alpha 透明度</p></blockquote><p>RGB 值可以取在 0 到 255 之间。 alpha 值可取在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明；也可以取十六进制的值。</p><p><code>rgba()</code> 在需要设置颜色透明度时十分有用， 可以做出一些很漂亮的半透明效果。</p><pre><code class="language-css">background-color: rgba(4,4,4,0.1)</p> <p>background-color: #000000BF </code></pre><p>注意：rgb() 和 hsl() 函数的逗号被取消了，因为新的颜色函数，例如 lab() 和 lch() 都是使用空格作为分隔符。但是为了向下兼容，可以继续使用逗号。</p><p>色相、饱和度、亮度 Hue、Saturation、Lightness</p><p>颜色具有多种特性，包括色相、饱和度和亮度。 CSS3 引入了 <code>hsl()</code>做为颜色的描述方式。</p><p><strong>色相</strong> 是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。 在 <code>hsl()</code> 里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。</p><p><strong>饱和度</strong> 是指色彩的纯度，也就是颜色里灰色的占比。 饱和度越高则灰色占比越少，色彩也就越纯；反之则完全是灰色。 饱和度的取值范围是表示灰色所占百分比的 0 至 100。</p><p><strong>亮度</strong> 决定颜色的明暗程度，也就是颜色里白色或者黑色的占比。 其中，100% 的亮度表示纯白色， 0% 的亮度则表示纯黑色；而 50% 的亮度就表示在色相中选取的颜色。</p><p>下面是一些使用 <code>hsl()</code> 描述颜色的例子，颜色都为满饱和度，中等亮度:</p><p class="node-read-div2p">颜色 HSL 红 hsl(0, 100%, 50%) 黄 hsl(60, 100%, 50%) 绿 hsl(120, 100%, 50%) 蓝绿 hsl(180, 100%, 50%) 蓝 hsl(240, 100%, 50%) 品红 hsl(300, 100%, 50%)</p><pre><code class="language-css">color: hsl(0,100%,50%); color: hsl(.5turn 40% 60%); color: hsl(2rad 50% 50%); color: hsl(0 0% 0% / 20%) </code></pre><p>HSLA 之于 HSL 类似于 RGBA 和 RGB。</p><h2 id="互补色-complementary-color">互补色 Complementary Color</h2><p>色环是一个近色相邻、异色相离的圆环。 当两个颜色恰好在色环的两端时，这两个颜色就互为补色。 两个互为补色的颜色会在混合后变成灰色。 然而，补色搭配能形成强烈的视觉对比效果。</p><p>例子：</p><blockquote><p>红色（#FF0000）和蓝绿色 (#00FFFF)<br>绿色（#00FF00）和品红色（#FF00FF）<br>蓝色（#0000FF）和黄色（#FFFF00）</p></blockquote><h2 id="二次色--三次色-secondary-color--tertiary-color">二次色 & 三次色 Secondary color & Tertiary color</h2><p>电脑显示器和各类屏幕都是基于颜色叠加的模型：将红（R）、绿（G）、蓝（B）三原色的色光以不同的比例相加，就可以产生各种色彩光。 这在现代色彩理论中叫作三原色光模式（RGB Color Model）。</p><p>红色（R）、绿色（G）和蓝色（B）叫作三原色。 如果把两种原色相加，就可以产生二次色：蓝绿（G+B）、品红（R+B）和黄色（R+G）。 这些二次色恰好是在合成它们时未使用的原色的补色，即在色环中位于两端。 例如，品红色是红色和蓝色相加产生，它是绿色的补色。</p><p>三次色是由原色和二次色相加产生的颜色， 例如，在 RGB 颜色模型中，红色（原色）和黄色（二次色）相加产生橙色（三次色）。 将这六种颜色中相邻的颜色相加，便产生了十二色色环。</p><h2 id="文本颜色-text-color">文本颜色 Text Color</h2><pre><code class="language-css">color: 颜色 </code></pre><h2 id="背景颜色-background-color">背景颜色 Background Color</h2><pre><code class="language-css">background-color: 颜色 </code></pre><h2 id="颜色关键字">颜色关键字</h2><p>CSS 共有 148 种颜色关键字，用纯英语表示。</p><p>所有的关键字是大小写敏感的，但是很多系统颜色是首字母大写的，这是为了区分两者。</p><p>也有几种特殊关键字：</p><ul><li><code>transparent</code> 是全透明的颜色，是背景颜色的默认值</li><li><code>currentColor</code> 是 <code>color</code> 属性上下文的动态计算值。例如：文本颜色为红色， 把边框颜色设置为 <code>currentColor</code> ，那么边框颜色也是红色。</li></ul><h2 id="字体大小-font-size">字体大小 Font Size</h2><pre><code class="language-css">font-size: 30px; </code></pre><h2 id="字体族名-font-family">字体族名 Font Family</h2><pre><code class="language-css">font-family: sans-serif; </code></pre><h2 id="引入-google-字体">引入 Google 字体</h2><p>要引入 Google Font，需要从 Google Fonts 上复制字体的 URL，并粘贴到 HTML 里面。</p><pre><code class="language-css"><link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"></p> <p>font-family: FAMILY_NAME, GENERIC_NAME; </code></pre><p>字体名区分大小写，并且如果字体名含有空格，则在声明时需要用引号包起来。 例如，使用 <code>"Open Sans"</code> 字体需要添加引号，而 <code>Lobster</code> 则不需要。</p><h2 id="字体降级-degrade">字体降级 Degrade</h2><p>所有浏览器都有几种默认字体， 包括 <code>monospace</code>、<code>serif</code> 和 <code>sans-serif</code>。</p><p>在字体不可用的时候，可以告诉浏览器通过"降级"去使用其他字体。</p><p>如果想把一个元素的字体设置成 <code>Helvetica</code>，但当 <code>Helvetica</code> 不可用时，降级使用 <code>sans-serif</code> 字体，那么可以这样写：</p><pre><code class="language-css">p { font-family: Helvetica, sans-serif; } </code></pre><p>通用字体名不区分大小写。 同时，也不需要使用引号，因为它们是 CSS 中的关键字。</p><pre><code class="language-css">width: 20px; </code></pre><p><code>width</code> 属性来指定元素的宽度。 属性值可以是相对单位（比如 <code>em</code>），绝对单位（比如 <code>px</code>），或者包含块（父元素）宽度的百分比。</p><pre><code class="language-css">height: 20px; </code></pre><p><code>height</code> 属性来指定元素的高度。 属性值可以是相对单位（比如 <code>em</code>），绝对单位（比如 <code>px</code>），或者包含块（父元素）宽度的百分比。</p><p>每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制：内边距 <code>padding</code>、外边距 <code>margin</code> 、边框 <code>border</code>。</p><p>CSS 显示的所有对象都是方框。</p><h2 id="内容和大小">内容和大小</h2><p>默认情况下，内容会影响方框的大小。</p><p>可以通过外部尺寸（extrinsic sizing）来控制方框的大小；或者，使用内部尺寸（intrinsic sizing），让浏览器根据内容大小做决定。</p><p>如果给 HTML 元素规定了宽度，就是使用了外部尺寸，它会控制子内容的大小，可以添加的内容也有限制。如果超过了这个限制，内容就会溢出方框边界。</p><p>防止溢出的一种方法是取消设置 width，或者可以把宽度设置为 <code>min-content</code> ，也就是使用内部宽度。内部宽度会把方框宽度调整为内容的最小宽度。</p><p>当发生溢出时，通过 <code>overflow</code> 管理元素处理溢出的方式。</p><h2 id="方框模型的区域">方框模型的区域</h2><ul><li>content-box 内容框：内容所在区域，可以控制父级元素的大小，通常是最容易发生变化的区域</li><li>padding-box 填充框：位于内容框的周围，方框的内部，是 <code>padding</code> 属性创建的空间。方框的背景在填充框内可见。如果使用 <code>overflow: auto</code> 或者 <code>overflow: scroll</code> ，那么滚动条也会占用该空间。</li><li>border-box 边框：位于填充框周围，是 <code>border</code> 创建的范围。边框是方框的边界，也是可以直观看到的界限。</li><li>margin-box 边距框：位于边框的周围，是 <code>margin</code> 创建的范围。<code>outline</code> 和 <code>shadow-box</code> 也会占据该空间。边距框不会影响边框的大小。</li></ul><h2 id="文档流行内元素和块级元素">文档流：行内元素和块级元素</h2><p>HTML 元素的位置被称为"文档流（document flow）"。</p><p>通过 display 的值为 <code>block</code> 或 <code>inline</code> , 判断行内元素和块级元素。</p><p>块级元素有着其父元素的全部水平宽度，以及其内容的实际高度。块级元素会占据新的一行空间。</p><p>行内元素有边距块，但是其他元素视而不见，使用行内-块级元素可以使解决该问题，同时依然表现为行内元素。</p><p>默认情况下，块级元素会填充可用的行内空间，而行内元素和行内-块级元素（<code>inline-block</code>）的宽度和高度只会和内容一样大。</p><p><code>box-sizing</code> 属性决定了如何计算方框的大小，默认为 <code>box-sizing: content-box</code>。为其值时，设置宽度和高度会应用到内容框中。如果随后设置 <code>padding</code> 和 <code>border</code>，则会将这些值增加到内容框的大小。</p><p>例如：</p><pre><code class="language-css">.mybox { width: 200px; border: 10px solid; padding: 20px; } </code></pre><p>默认的盒子大小是内容框，所以框的宽度是 200 + 2 * 10 + 2 * 20px = 260px。</p><p>也可以修改为：<code>box-sizing: border-box</code>，此时把总宽度应用到边框，内容框为 200px。</p><p>CSS 边框具有 <code>style</code>、<code>color</code>、<code>width</code>、<code>radius</code> 属性，分别代表边框的种类、颜色、宽度、圆角半径。</p><p>除像素外，也可以使用百分比来指定 <code>border-radius</code> 的值。</p><pre><code class="language-css">border-color: red; border-width: 5px; border-style: solid; border-radius: 10px; border-radius: 50%; </code></pre><h2 id="内边距-padding">内边距 Padding</h2><p>内边距 <code>padding</code> 用来控制元素内容与 <code>border</code> 之间的空隙大小。</p><pre><code class="language-css">/<em> 四个方向(单个属性值) padding </em>/ padding: 50px; /<em> 四个方向(多个属性值) padding </em>/ /<em> 方向依次是 上 右 下 左 </em>/ padding: 50px 20px 20px 50px /<em> 各个方向 padding </em>/ padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; </code></pre><h2 id="外边距-margin">外边距 Margin</h2><p>外边距 <code>margin</code> 用来控制元素的 <code>border</code> 与其他元素之间的 <code>border</code> 距离。把元素的 <code>margin</code> 设置为负值，元素会变得占用更多空间。</p><pre><code class="language-css">/<em> 四个方向(单个属性值) margin </em>/ margin: 50px; /<em> 四个方向(多个属性值) margin </em>/ /<em> 方向依次是 上 右 下 左 </em>/ margin: 50px 20px 20px 50px /<em> 各个方向 margin </em>/ margin-top: 20px; margin-left: 20px; margin-right: 20px; margin-bottom: 20px; /<em> 负值 </em>/ margin: -16px; </code></pre><p>CSS 变量可以实现仅需要更新一个值，就可以将更改应用到多个 CSS 样式属性上。</p><p>为创建一个 CSS 变量，在变量名前添加两个连字符号，并为其赋值即可，例子如下：</p><pre><code class="language-css">--penguin-skin: gray; </code></pre><p>为使用 CSS 变量，在属性后添加 <code>var</code> 关键字，然后把变量值用括号括起来。例子如下：</p><pre><code class="language-css">background: var(--penguin-skin); </code></pre><p>可以设置一个备用值来防止由于某些原因导致变量不生效的情况。</p><pre><code class="language-css">background: var(--penguin-skin, black); </code></pre><p>当创建一个变量时，变量会在创建变量的选择器里可用。 同时，在这个选择器的后代选择器里也是可用的。 这是因为 CSS 变量是可继承的，和普通的属性一样。</p><p>CSS 变量经常会定义在 :root 元素内，这样就可被所有选择器继承。<code>:root</code> 是一个伪类选择器，它是一个能够匹配文档根元素的选择器，通常指的是 <code>html</code> 元素。 在 <code>:root</code> 里创建变量在全局都可用，即在任何选择器里都生效。</p><p>当在 <code>:root</code> 里创建变量时，这些变量的作用域是整个页面。如果在元素里创建相同的变量，会重写作用于整个页面的变量的值。</p><p>CSS 变量可以简化媒体查询的定义方式。</p><p>例如，当屏幕小于或大于媒体查询所设置的值，只要更新变量的值，那么使用了此变量的元素样式就都会更改。</p><p>如果想提供浏览器降级方案，在声明之前提供另一个更宽泛的值即可。 这样老旧的浏览器会降级使用这个方案，新的浏览器会在后面的声明里覆盖降级方案。</p></style>

    Original: https://www.cnblogs.com/risejl/p/16706370.html
    Author: Risejl
    Title: CSS 笔记

原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/592095/

转载文章受原作者版权保护。转载请注明原作者出处！

赞 (0)
0

【自取】最近整理的，有需要可以领取学习：



Linux核心资料大放送~

全栈面试题汇总（持续更新&可下载）

一个提高学习100%效率的工具！

【超详细】深度学习面试题目！

LeetCode Python刷题答案下载！

LeetCode Java版刷题答案下载！

LeetCode C++ 版本，抓紧保存！

LeetCode GO语言 刷题答案下载！

大家都在看

亲爱的 Coder【最近整理，可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球