CSS 笔记

  • CSS 笔记已关闭评论
  • 181 次浏览
  • A+
所属分类：Web前端
摘要

CSS，或 Cascading Style Sheets （层叠样式表或级联样式表），用来给浏览器添加样式。
便宜好用的国外VPS推荐

CSS

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

引入 CSS 的方式 Import

内联 Inline Style

使用 style 属性来引入 CSS

<h1 style="color:blue;"></h1>

嵌入 Embedded Style

在 <head> 标签里使用 <style> 标签

<head>   <style>   	h1 {     	color: blue; 	  } 	</style> </head>

外联 External Style Sheets

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

<link rel="类型" href="位置" type="text/css">

CSS 规则的组成

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

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

选择器 Selector

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

通用选择器 Universal Selector

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

* {   color: blue; }

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

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

h2 {   color: green; }

类选择器 Class Selector

.blue-text {   color: blue; } <h2 class="blue-text">

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

注意:

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

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

<img class="class1 class2">

ID 选择器 ID Selector

#red {   color: red; }

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

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

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

<h2 id="red"></h2>

注意在 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; }

复杂选择器

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

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

连结符 Combinator

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

后代连结符 Descendant combinator

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

后代连结符是递归的。

p strong {   color: blue; }  /* 这段代码只匹配 p 元素的 strong 子元素 */

下一同级/兄弟连结符 Next sibling combinator

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

p + strong {   color: blue; }

后继兄弟连结符 Subsequent-sibling combinator

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

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

:checked ~ .toggle__decor {   background: rebeccapureple; }

孩子选择器 Child combinator

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

组合选择器 Compound selector

可以把选择器组合：

a.my-class {   color: red; }  /* 选择具有 my-class 类的超链接 */

级联 Cascade

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

级联由 4 部分组成：

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

位置和次序

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

优先级

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

  • 同一元素的类选择器比单纯的类型选择器更优先，即使类型选择器在类选择器下面声明。
  • id 选择器的优先级更高，会覆盖其他直接应用的规则。所以一般不使用 id 选择器。

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

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 规则

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

样式继承 Inheritance

根元素 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; }

样式的优先级 Prioritize

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

注：

  • HTML 元素里应用的 class 的先后顺序无关紧要。

  • 但是，在 <style> 标签里面声明的 class 顺序十分重要，之后的声明会覆盖之前的声明。 第二个声明的优先级始终高于第一个声明。因为：浏览器是由上到下读取 CSS的。这就意味着，如果发生冲突，浏览器将会应用最后声明的样式。它会检查 CSS 声明顺序，而不是 HTML 使用顺序！

  • id 选择器无论在 style 标签的任何位置声明，都会覆盖 class 声明的样式。

  • 使用 CSS 库， CSS 库中的样式也许会意外覆盖原有 CSS 样式。可以使用 !important 保证 CSS 样式不受影响

    color: red !important;

单位 Unit

px 值，即像素。 像素是一个长度单位，它告诉浏览器应该如何调整元素的大小和位置。

单位长度的类型可以分成 2 种：相对和绝对。

有些单位长度选项是相对视窗大小来改变值的， 这种设定符合响应式网页设计的原则。

绝对单位 Absolute Unit

绝对单位与长度的物理单位相关。 例如，in 和 mm 分别代表着英寸和毫米。 绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，这就可能会造成误差。

相对单位 Relative Unit

相对单位长度，比如 em 和 rem，它们的实际值会依赖其他长度的值而决定。 比如 em 的大小基于元素字体的大小。 如果使用它来设置 font-size 值，它的值会跟随父元素的 font-size 值来改变。

颜色 Color

表示

预指定颜色

预指定颜色（predefined color）

color: blue;  black silver gray white maroon red purple fuchsia green lime olive yellow navy blue teal aqua

16 进制编码 Hex

十六进制编码，简称 hex。

Hexadecimals（或 hex）基于 16 位数字， 它包括 16 种不同字符。0-9 的符号代表 0 到 9 的值。 A、B、C、D、E、F 代表 10 至 15 的值。在 CSS 里面，使用 6 个十六进制的数字来代表颜色，每两个数字控制一种颜色，分别是红（R）、绿（G）、蓝（B）。 例如，#000000 代表黑色，同时也是最小的值。

红色的 #FF0000 十六进制编码可以缩写成 #F00。 在这种缩写形式里，三个数字分别代表着红（R）、绿（G）、蓝（B）三原色。

不能混用缩写和全称。

color: #000000; color: #F00 /* 缩写 */ color: #F000 /* error */

RGB

RGB 值只需要指定每种颜色的亮度大小，数值范围从 0 到 255；或者用百分制表示。

黑色是(0,0,0)，白色是(255,255,255)。

RGB 后加入 表示透明度。

RGB 与 HEX 表示是等价的。

color: rgb(0,0,0)  color: rgb(0%,0%,0%)  color: rgb(0 0 0 / 0.5)

RGBA

rgba 代表：
r = red 红色
g = green 绿色
b = blue 蓝色
a = alpha 透明度

RGB 值可以取在 0 到 255 之间。 alpha 值可取在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明；也可以取十六进制的值。

rgba() 在需要设置颜色透明度时十分有用， 可以做出一些很漂亮的半透明效果。

background-color: rgba(4,4,4,0.1)  background-color: #000000BF

注意：rgb() 和 hsl() 函数的逗号被取消了，因为新的颜色函数，例如 lab() 和 lch() 都是使用空格作为分隔符。但是为了向下兼容，可以继续使用逗号。

HSL

色相、饱和度、亮度 Hue、Saturation、Lightness

颜色具有多种特性，包括色相、饱和度和亮度。 CSS3 引入了 hsl()做为颜色的描述方式。

色相 是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。 在 hsl() 里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。

饱和度 是指色彩的纯度，也就是颜色里灰色的占比。 饱和度越高则灰色占比越少，色彩也就越纯；反之则完全是灰色。 饱和度的取值范围是表示灰色所占百分比的 0 至 100。

亮度 决定颜色的明暗程度，也就是颜色里白色或者黑色的占比。 其中，100% 的亮度表示纯白色， 0% 的亮度则表示纯黑色；而 50% 的亮度就表示在色相中选取的颜色。

下面是一些使用 hsl() 描述颜色的例子，颜色都为满饱和度，中等亮度:

颜色 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%) 
color: hsl(0,100%,50%); color: hsl(.5turn 40% 60%); color: hsl(2rad 50% 50%); color: hsl(0 0% 0% / 20%)

HSLA

HSLA 之于 HSL 类似于 RGBA 和 RGB。

互补色 Complementary Color

色环是一个近色相邻、异色相离的圆环。 当两个颜色恰好在色环的两端时，这两个颜色就互为补色。 两个互为补色的颜色会在混合后变成灰色。 然而，补色搭配能形成强烈的视觉对比效果。

例子：

红色（#FF0000）和蓝绿色 (#00FFFF)
绿色（#00FF00）和品红色（#FF00FF）
蓝色（#0000FF）和黄色（#FFFF00）

二次色 & 三次色 Secondary color & Tertiary color

电脑显示器和各类屏幕都是基于颜色叠加的模型：将红（R）、绿（G）、蓝（B）三原色的色光以不同的比例相加，就可以产生各种色彩光。 这在现代色彩理论中叫作三原色光模式（RGB Color Model）。

红色（R）、绿色（G）和蓝色（B）叫作三原色。 如果把两种原色相加，就可以产生二次色：蓝绿（G+B）、品红（R+B）和黄色（R+G）。 这些二次色恰好是在合成它们时未使用的原色的补色，即在色环中位于两端。 例如，品红色是红色和蓝色相加产生，它是绿色的补色。

三次色是由原色和二次色相加产生的颜色， 例如，在 RGB 颜色模型中，红色（原色）和黄色（二次色）相加产生橙色（三次色）。 将这六种颜色中相邻的颜色相加，便产生了十二色色环。

文本颜色 Text Color

color: 颜色

背景颜色 Background Color

background-color: 颜色

颜色关键字

CSS 共有 148 种颜色关键字，用纯英语表示。

所有的关键字是大小写敏感的，但是很多系统颜色是首字母大写的，这是为了区分两者。

也有几种特殊关键字：

  • transparent 是全透明的颜色，是背景颜色的默认值
  • currentColor 是 color 属性上下文的动态计算值。例如：文本颜色为红色， 把边框颜色设置为 currentColor ，那么边框颜色也是红色。

字体 Font

字体大小 Font Size

font-size: 30px;

字体族名 Font Family

font-family: sans-serif;

引入 Google 字体

除了使用系统提供的默认字体以外，也可以使用自定义字体。Google 字体库是一个免费的 Web 字体库，只需要在 CSS 里设置字体的 URL 即可使用。

要引入 Google Font，需要从 Google Fonts 上复制字体的 URL，并粘贴到 HTML 里面。

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">  font-family: FAMILY_NAME, GENERIC_NAME;

字体名区分大小写，并且如果字体名含有空格，则在声明时需要用引号包起来。 例如，使用 "Open Sans" 字体需要添加引号，而 Lobster 则不需要。

字体降级 Degrade

所有浏览器都有几种默认字体， 包括 monospace、serif 和 sans-serif。

在字体不可用的时候，可以告诉浏览器通过“降级”去使用其他字体。

如果想把一个元素的字体设置成 Helvetica，但当 Helvetica 不可用时，降级使用 sans-serif 字体，那么可以这样写：

p {   font-family: Helvetica, sans-serif; }

通用字体名不区分大小写。 同时，也不需要使用引号，因为它们是 CSS 中的关键字。

元素宽度 Width

width: 20px;

width 属性来指定元素的宽度。 属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比。

元素高度 Height

height: 20px;

height 属性来指定元素的高度。 属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比。

每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制：内边距 padding、外边距 margin 、边框 border。

方框模型 / 盒子模型

CSS 显示的所有对象都是方框。

内容和大小

默认情况下，内容会影响方框的大小。

可以通过外部尺寸（extrinsic sizing）来控制方框的大小；或者，使用内部尺寸（intrinsic sizing），让浏览器根据内容大小做决定。

如果给 HTML 元素规定了宽度，就是使用了外部尺寸，它会控制子内容的大小，可以添加的内容也有限制。如果超过了这个限制，内容就会溢出方框边界。

防止溢出的一种方法是取消设置 width，或者可以把宽度设置为 min-content ，也就是使用内部宽度。内部宽度会把方框宽度调整为内容的最小宽度。

当发生溢出时，通过 overflow 管理元素处理溢出的方式。

方框模型的区域

  • content-box 内容框：内容所在区域，可以控制父级元素的大小，通常是最容易发生变化的区域
  • padding-box 填充框：位于内容框的周围，方框的内部，是 padding 属性创建的空间。方框的背景在填充框内可见。如果使用 overflow: auto 或者 overflow: scroll ，那么滚动条也会占用该空间。
  • border-box 边框：位于填充框周围，是 border 创建的范围。边框是方框的边界，也是可以直观看到的界限。
  • margin-box 边距框：位于边框的周围，是 margin 创建的范围。outline 和 shadow-box 也会占据该空间。边距框不会影响边框的大小。

文档流：行内元素和块级元素

HTML 元素的位置被称为“文档流（document flow）”。

通过 display 的值为 block 或 inline , 判断行内元素和块级元素。

块级元素有着其父元素的全部水平宽度，以及其内容的实际高度。块级元素会占据新的一行空间。

行内元素有边距块，但是其他元素视而不见，使用行内-块级元素可以使解决该问题，同时依然表现为行内元素。

默认情况下，块级元素会填充可用的行内空间，而行内元素和行内-块级元素（inline-block）的宽度和高度只会和内容一样大。

box-sizing 属性决定了如何计算方框的大小，默认为 box-sizing: content-box。为其值时，设置宽度和高度会应用到内容框中。如果随后设置 padding 和 border，则会将这些值增加到内容框的大小。

例如：

.mybox {   width: 200px;   border: 10px solid;   padding: 20px; }

默认的盒子大小是内容框，所以框的宽度是 200 + 2 * 10 + 2 * 20px = 260px。

也可以修改为：box-sizing: border-box，此时把总宽度应用到边框，内容框为 200px。

边框 Border

CSS 边框具有 style、color、width、radius 属性，分别代表边框的种类、颜色、宽度、圆角半径。

除像素外，也可以使用百分比来指定 border-radius 的值。

border-color: red; border-width: 5px; border-style: solid; border-radius: 10px; border-radius: 50%;

内边距 Padding

内边距 padding 用来控制元素内容与 border 之间的空隙大小。

/* 四个方向(单个属性值) padding */ padding: 50px; /* 四个方向(多个属性值) padding */ /* 方向依次是 上 右 下 左 */ padding: 50px 20px 20px 50px  /* 各个方向 padding */ padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px;

外边距 Margin

外边距 margin 用来控制元素的 border 与其他元素之间的 border 距离。把元素的 margin 设置为负值，元素会变得占用更多空间。

/* 四个方向(单个属性值) margin */ margin: 50px; /* 四个方向(多个属性值) margin */ /* 方向依次是 上 右 下 左 */ margin: 50px 20px 20px 50px  /* 各个方向 margin */ margin-top: 20px; margin-left: 20px; margin-right: 20px; margin-bottom: 20px; /* 负值 */ margin: -16px;

CSS 变量 CSS Variable

CSS 变量可以实现仅需要更新一个值，就可以将更改应用到多个 CSS 样式属性上。

为创建一个 CSS 变量，在变量名前添加两个连字符号，并为其赋值即可，例子如下：

--penguin-skin: gray;

为使用 CSS 变量，在属性后添加 var 关键字，然后把变量值用括号括起来。例子如下：

background: var(--penguin-skin);

可以设置一个备用值来防止由于某些原因导致变量不生效的情况。

background: var(--penguin-skin, black);

当创建一个变量时，变量会在创建变量的选择器里可用。 同时，在这个选择器的后代选择器里也是可用的。 这是因为 CSS 变量是可继承的，和普通的属性一样。

CSS 变量经常会定义在 :root 元素内，这样就可被所有选择器继承。:root 是一个伪类选择器，它是一个能够匹配文档根元素的选择器，通常指的是 html 元素。 在 :root 里创建变量在全局都可用，即在任何选择器里都生效。

当在 :root 里创建变量时，这些变量的作用域是整个页面。如果在元素里创建相同的变量，会重写作用于整个页面的变量的值。

CSS 变量可以简化媒体查询的定义方式。

例如，当屏幕小于或大于媒体查询所设置的值，只要更新变量的值，那么使用了此变量的元素样式就都会更改。

如果想提供浏览器降级方案，在声明之前提供另一个更宽泛的值即可。 这样老旧的浏览器会降级使用这个方案，新的浏览器会在后面的声明里覆盖降级方案。

便宜好用的国外VPS推荐