前端学习笔记：CSS3基础知识 • Rinne's Blog

CSS分类#

CSS 根据书写位置可以分为行内样式、内部样式表和外部样式表。

行内样式#

行内样式是在 HTML 元素的 style 属性中直接编写 CSS 代码。

<p style="color: red;">这是一个红色的段落。</p>

html

内部样式表#

内部样式是在 HTML 文档的 <head> 部分使用 <style> 标签编写 CSS 代码。

<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>

html

外部样式表#

外部样式是将 CSS 代码编写在一个独立的 .css 文件中，然后在 HTML 文档中使用 <link> 标签引入。

<head>
    <link rel="stylesheet" href="styles.css">
</head>

html

/* styles.css */
p {
    color: red;
}

css

CSS的基本语法#

选择器和声明块#

CSS 由选择器和声明块组成。选择器指定要应用样式的 HTML 元素，声明块包含一个或多个声明，每个声明由属性和值组成。

例如，对于以下 HTML 代码：

<p>这是一个段落。</p>

html

如果想要调整所有段落的样式，选择器可以使用元素名 p，声明块中包含属性和值，用于指定样式。

p {
    color: red;
    font-size: 16px;
}

css

注释#

注释用于在 CSS 代码中添加说明或备注，不会被浏览器解析。注释以 /* 开头，以 */ 结尾。

/* 这是一个注释 */
p {
    color: red;
    font-size: 16px;
}

css

选择器#

常见的选择器包括类型选择器、类选择器、ID选择器、属性选择器、通配符选择器等。

类型选择器#

类型选择器用于选择某个类型的元素，也称为标签选择器。元素名前不加任何符号。

例如，要选择所有段落元素，类型选择器为 p。

p {
    color: red;
    font-size: 16px;
}

css

类选择器#

类选择器用于选择某个类名的元素，类名前加上 . 符号，不同的元素可以有相同的类名。

例如，要选择所有类名为 red 的元素，类选择器为 .red。

<p class="red">这是一个红色的段落。</p>

html

.red {
    color: red;
}

css

ID选择器#

ID选择器用于选择某个ID名的元素。ID名前加上 # 符号，每个元素的ID名必须唯一。

例如，要选择ID为 header 的元素，ID选择器为 #header。

<header id="header">这是一个标题。</header>

html

#header {
    font-size: 24px;
}

css

属性选择器#

属性选择器用于选择包含特定属性或属性值的元素。属性选择器前加上 [ 符号，后加上 ] 符号。

例如，要选择所有包含 href 属性的链接元素，属性选择器为 a[href]。

<a href="https://www.example.com">这是一个链接。</a>

html

a[href] {
    color: blue;
}

css

属性选择器还可以使用其他运算符，例如：

运算符	描述
`[属性]`	选择包含指定属性的元素
`[属性="值"]`	选择属性值完全等于指定值的元素
`[属性~="值"]`	选择属性值包含指定值的元素
`[属性^="值"]`	选择属性值以指定值开头的元素
`[属性$="值"]`	选择属性值以指定值结尾的元素
`[属性*="值"]`	选择属性值包含指定值的元素

通用选择器#

通用选择器用于选择所有元素。通用选择器为 *，也叫通配符选择器。

例如，要选择所有元素，通用选择器为 *。

* {
    margin: 0;
    padding: 0;
}

css

后代选择器#

后代选择器用于选择某个元素的后代元素，后代元素之间用空格隔开。

例如，要选择所有 header 元素下的 p 元素，后代选择器为 header p。

<header>
    <p>这是一个段落。</p>
</header>

html

header p {
    color: red;
}

css

后代选择器还可以选择多个元素，例如 header p, header h1 表示选择所有 header 元素下的 p 元素和 h1 元素。

header p, header h1 {
    color: red;
}

css

同时，后代选择器还能选择孙元素，例如 header p span 表示选择所有 header 元素下的 p 元素下的 span 元素。

<header>
    <p>这是一个段落。<span>这是一个span元素。</span></p>
</header>

html

header p span {
    color: red;
}

css

子元素选择器#

子元素选择器用于选择某个元素的直接子元素，子元素之间用 > 符号隔开。

例如，要选择所有 header 元素下的直接子元素 p，子元素选择器为 header > p。

<header>
    <p>这是一个段落。</p>
</header>

html

header > p {
    color: red;
}

css

兄弟选择器#

相邻兄弟选择器用于选择某个元素的下一个相邻兄弟元素，兄弟元素之间用 + 符号隔开。

例如，要选择所有 h1 元素后面的直接相邻 p 元素，相邻兄弟选择器为 h1 + p。

<h1>这是一个标题。</h1>
<p>这是一个段落。</p>

html

/* h1 样式不变，p 元素颜色变红 */
h1 + p {
    color: red;
}

css

通用兄弟选择器用于选择某个元素后面的所有兄弟元素，兄弟元素之间用 ~ 符号隔开。

例如，要选择所有 h1 元素后面的所有 p 元素，通用兄弟选择器为 h1 ~ p。

<h1>这是一个标题。</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

html

/* h1 样式不变，h1 后面的所有 p 元素颜色变红 */
h1 ~ p {
    color: red;
}

css

分组选择器#

分组选择器用于同时选择多个元素，元素之间用逗号隔开。

例如，要选择所有 p 元素和 h1 元素，分组选择器为 p, h1。

<p>这是一个段落。</p>
<h1>这是一个标题。</h1>

html

/* p 元素和 h1 元素颜色变红 */
p, h1 {
    color: red;
}

css

也可写作

p,
h1 {
    color: red;
}

css

伪类选择器#

伪类选择器用于选择某个元素的特定状态或位置。伪类选择器前加上 : 符号。

例如，要选择所有被点击的链接元素，伪类选择器为 a:visited。

<a href="https://www.example.com">这是一个链接。</a>

html

a:visited {
    color: blue;
}

css

伪类选择器	描述
`:hover`	鼠标悬停在元素上时触发
`:active`	元素被点击时触发(鼠标按下到松开)
`:focus`	元素获得焦点时触发
`:visited`	链接被访问过一次后触发
`:first-child`	元素是其父元素的第一个子元素时触发
`:last-child`	元素是其父元素的最后一个子元素时触发
`:nth-child(n)`	元素是其父元素的第 n 个子元素时触发
`:disabled`	（表单）元素被禁用时触发
`:checked`	（表单）元素被选中时触发

特别对于结构伪类选择器，有这样一个例子：

<ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
    <li>列表项 4</li>
    <li>列表项 5</li>
</ul>

html

/* 选择所有 ul 元素下的第一个 li 元素 */
ul li:first-child {
    color: red;
}

css

伪元素选择器#

伪元素选择器用于选择某个元素的特定位置或内容。伪元素选择器前加上 :: 符号。

伪元素选择器	描述
`::first-line`	元素的第一行文本时触发
`::first-letter`	元素的第一个字母时触发
`::placeholder`	选择 `input` 或 `textarea` 元素的占位符文本时触发
`::before`	在元素内容之前插入内容
`::after`	在元素内容之后插入内容

特别对于插入内容的伪元素选择器，有这样一个例子：

<p>这是一个段落。</p>

html

/* 在 p 元素内容之前插入内容 */
p::before {
    content: "前缀：";
    color: red;
}

css

文本样式#

字体样式#

p {
    color: red;
    font-family: "微软雅黑", "宋体";
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
    text-decoration: underline;
}

css

属性	描述
`color`	指定文本颜色
`font-family`	指定字体名称
`font-size`	指定字体大小
`font-style`	指定字体样式（如斜体）
`font-weight`	指定字体粗细（如加粗）
`text-decoration`	指定文本装饰（如下划线）

color 属性

color 属性用于指定文本颜色。可以使用颜色名称、十六进制值或 RGB 值。
例如，要将文本颜色设置为红色，color 属性为 color: red；也可使用十六进制值 #ff0000，color 属性为 color: #ff0000；也可使用 RGB 值 rgb(255, 0, 0)，color 属性为 color: rgb(255, 0, 0)。

font-family 属性

font-family 属性用于指定字体名称。可以使用字体名称或字体族名称。
例如 font-family: "微软雅黑", "宋体"，表示如果 微软雅黑 字体不可用，则使用 宋体 字体。

font-size 属性

font-size 属性用于指定字体大小。可以使用像素值（如 font-size: 16px）或相对值（如 font-size: 1.5em）。
例如，要将字体大小设置为 16 像素，font-size 属性为 font-size: 16px；也可使用相对值 1.5em，表示字体大小为父元素字体大小的 1.5 倍。

font-style 属性

font-style 属性用于指定字体样式（如斜体）。可以使用 italic 值表示斜体，使用 normal 值表示正常字体样式。
例如，要将字体样式设置为斜体，font-style 属性为 font-style: italic。

font-weight 属性

font-weight 属性用于指定字体粗细（如加粗）。可以使用 bold 值表示加粗，也可以使用数字值（如 font-weight: 700）表示加粗（正常字体粗细为 font-weight: 400 或 font-weight: normal）。
例如，要将字体粗细设置为加粗，font-weight 属性为 font-weight: bold；也可使用数字值 700，表示字体粗细为 700，font-weight: 700

text-decoration 属性

text-decoration 属性用于指定文本装饰。常用的文本装饰有无装饰（none）、下划线（underline）、删除线（line-through）、上划线（overline）。

文本布局#

属性	描述
`text-align`	指定文本对齐方式
`text-indent`	指定文本缩进
`line-height`	指定行高
`word-spacing`	指定单词间距
`letter-spacing`	指定字母间距

text-align 属性

text-align 属性用于指定文本对齐方式。常用的文本对齐方式有左对齐（默认，left）、右对齐（right）、居中对齐（center）、两端对齐（justify）。
例如，要将文本对齐方式设置为居中对齐，text-align 属性为 text-align: center。

text-indent 属性

text-indent 属性用于指定文本缩进。可以使用像素值（如 text-indent: 20px）或相对值（如 text-indent: 2em）。
例如，要将文本缩进设置为 20 像素，text-indent 属性为 text-indent: 20px；也可使用相对值 2em，即 text-indent: 2em。其中，em表示相对于本元素字体大小，若本元素没有设置字体大小，则默认使用父元素字体大小。

line-height 属性

line-height 属性用于指定行高。可以使用像素值（如 line-height: 24px）或相对值（如 line-height: 1.5）。
例如，要将行高设置为 24 像素，line-height 属性为 line-height: 24px；也可使用相对值 1.5，即 line-height: 1.5，表示行高为字体大小的 1.5 倍。
特别的，如果单行文字的行高等于盒子高度，文字就会垂直居中对齐。

word-spacing 属性

word-spacing 属性用于指定单词间距。可以使用像素值（如 word-spacing: 10px）或相对值（如 word-spacing: 1em）。
例如，要将单词间距设置为 10 像素，word-spacing 属性为 word-spacing: 10px；也可使用相对值 1em，即 word-spacing: 1em，表示单词间距为字体大小的 1 倍。

letter-spacing 属性

letter-spacing 属性用于指定字母间距(或是字间距)。可以使用像素值（如 letter-spacing: 2px）或相对值（如 letter-spacing: 0.5em）。

font 简写属性#

font 属性是一个简写属性，用于同时设置字体样式、字体粗细、字体大小、行高和字体名称。
例如，要将字体样式设置为斜体、字体粗细设置为加粗、字体大小设置为 16 像素、行高设置为 24 像素、字体名称设置为 “微软雅黑”， font 属性为 font: italic bold 16px/24px "微软雅黑"。

注意：

在使用 font 属性时，必须按照 font-style font-weight font-size/line-height font-family 的顺序。
font-size 和 line-height 必须同时设置，其他属性可以省略。

CSS 特性#

CSS 主要有三大特性：

继承性：子元素可以继承父元素的某些属性值，主要是字体相关属性（如字体样式、字体粗细、字体大小、行高、字体名称）。
优先级：多个样式规则同时作用于一个元素时，优先级由选择器的权重决定。权重高的样式规则会覆盖权重低的样式规则。
层叠性：多个样式规则同时作用于一个元素，且选择器的权重相同时，后面的样式规则会覆盖前面的样式规则。

选择器权重的计算规则#

选择器类型	示例	权重
!important	`style="..." !important`	无限大
内联样式	`style="..."`	1000
ID	`#id`	100
类、伪类和属性	`.class`, `:hover`, `[href]`	10
标签(类型)和伪元素	`p`, `::first-letter`	1
通配符和继承	`*`	0

计算权重时，将每个选择器的权重值相加，得到最终的权重值。例如，#id .class p 这个选择器的权重值为 100 + 10 + 1 = 111。