前言：前篇讲解了简单HTML的创建以及一些基本的用法，本篇开始讲解用css将HTML美化（给HTML的标签设置样式）

CSS的引入方式：

引入方式书写方式作用范围使用场景内嵌式css写在style标签中当前页面小案例外联式css单独写在css文件中，通过link标签引入多个页面项目中行内式css写在标签的上style属性中当前项目配合使用

内嵌式：

内嵌式是将 CSS 样式代码写在 HTML 文件的

这是一个内嵌式样式的示例

段落内容，带有内嵌式定义的样式。

外联式：

外联式是将 CSS 样式代码单独写在一个 CSS 文件中，然后通过 HTML 文件中的 标签引入。这种方式的优点是 CSS 代码可以被多个 HTML 页面共享，便于维护和更新。在大型项目中，通常会采用这种方式来组织代码。

HTML：

这是一个外联式样式的示例

段落内容，带有外联式定义的样式。

css：

/* styles.css */

body {

font-family: Arial, sans-serif;

background-color: #f0f0f0;

}

h1 {

color: #333;

text-align: center;

}

p {

color: #666;

line-height: 1.6;

}

行内式：

行内式是将 CSS 样式代码直接写在 HTML 标签的 style 属性中。这种方式的优点是可以直接为特定元素设置样式，简单直观。缺点是样式代码无法复用，而且会污染 HTML 结构，使 HTML 代码变得冗长。

这是一个行内式样式的示例

段落内容，带有行内式定义的样式。

基础选择器：

选择器类型选择器语法描述示例代码标签选择器element选择页面中某一类标签的所有元素p { color: blue; }类选择器.class选择具有特定类属性值的元素.important { font-weight: bold; color: red; }ID 选择器#id选择具有特定 ID 属性值的唯一元素#header { background-color: #f0f0f0; padding: 20px; }通配符选择器*选择页面中的所有元素* { margin: 0; padding: 0; box-sizing: border-box; }属性选择器element[attribute="value"]根据元素的属性及属性值来选择元素input[type="text"] { border: 1px solid #ddd; padding: 5px; }伪类选择器element:pseudo-class在元素的特定状态或位置时选择该元素a:hover { color: red; text-decoration: underline; }

标签选择器：

定义：直接使用 HTML 标签名称作为选择器，用于选择页面中某一类标签的所有元素。通过标签名，找到页面中所有这类标签，设置样式

语法：直接使用 HTML 标签名称作为选择器。标签名 { css属性名：属性值； }

匹配方式：匹配页面中所有该标签的元素。例如，上面的代码会选中页面中所有的

标签元素。

适用场景：适用于对某类元素进行统一的样式设置。例如，设置所有段落的字体颜色、行距等。

优先级：标签选择器的优先级较低。如果其他选择器（如类选择器、ID 选择器）也对同一个元素设置了样式，会覆盖标签选择器的样式。

p {

color: blue;

}

这会选中页面中所有的

标签元素，将它们的文本颜色设置为蓝色。

类选择器：

定义：使用类名作为选择器，用于选择具有特定类属性值的元素。通过类名，找到页面中所有带有这个类名的标签，设置样式

语法：以 . 开头，后面跟类名。.类名 { css属性名：属性值； }

匹配方式：匹配页面中所有带有对应类属性值的元素。例如，上面的代码会选中页面中带有 class="important" 属性的元素。

适用场景：适用于对一类元素进行样式设置。例如，设置所有重要的文本内容的样式。

优先级：类选择器的优先级高于标签选择器，但低于 ID 选择器。如果类选择器和标签选择器同时对同一个元素设置样式，类选择器的样式会生效。

.important {

font-weight: bold;

color: red;

}

这会选中页面中所有带有 class="important" 属性的元素，将它们的字体加粗并设置为红色。

id选择器

定义：使用 ID 名称作为选择器，用于选择具有特定 ID 属性值的唯一元素。

语法：以 # 开头，后面跟 ID 名称。#id属性值 { css属性名：属性值； }

匹配方式：匹配页面中带有对应 ID 属性的唯一元素。例如，上面的代码会选中页面中带有 id="header" 属性的元素。

适用场景：适用于对页面中某个唯一的元素进行样式设置。例如，设置页面头部、底部等唯一区域的样式。

优先级：ID 选择器的优先级较高。如果 ID 选择器和其他选择器（如类选择器、标签选择器）同时对同一个元素设置样式，ID 选择器的样式会生效。

#header {

background-color: #f0f0f0;

padding: 20px;

}

这会选中页面中带有 id="header" 属性的唯一元素，将它的背景颜色设置为浅灰色并添加内边距。

通用选择器

定义：使用 * 符号作为选择器，用于选择页面中的所有元素。

语法：使用 * 符号。

匹配方式：匹配页面中的所有元素。例如，上面的代码会选中页面中所有的元素。

适用场景：适用于对页面中所有元素进行统一的样式设置。例如，重置所有元素的外边距和内边距，设置统一的盒子模型。

优先级：通用选择器的优先级最低。如果其他选择器对某个元素设置了样式，会覆盖通用选择器的样式。

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

这会选中页面中所有的元素，将它们的外边距和内边距都设置为 0 并使用 box-sizing: border-box 这种盒子模型。

CSS样式：

字体样式：

（1）字体大小：font-size

（2）字体粗细：font-weight

（3）字体样式：font-style

（4）字体类型：font-family

属性名称定义常见取值及解释应用场景font属性无简写属性。把所有针对字体的属性设置在一个声明中font - size设置字体大小px（像素，如 16px）、em（相对父元素字体大小）、rem（相对根元素字体大小）控制标题、正文、按钮等文本元素大小font - weight设置字体粗细数值（100 - 900）、关键字（normal、bold）强调文本内容，区分不同重要程度的信息font - style设置字体风格关键字（normal、italic）引用、强调特殊词汇（如外文词汇、特殊术语）font - family指定字体系列字体系列名称（如 "Microsoft YaHei"）、通用字体家族（如 sans - serif）根据网页主题和风格选择合适的字体系列，确保文字美观、易读

字体大小（font - size）：

定义 ：用于设置文本内容的大小。

常用单位及取值 ：

像素（px）：是最常用的单位。例如，font - size:16px;，这表示字体大小为 16 像素。像素单位可以精确地控制字体大小，在不同的设备和屏幕分辨率下，显示效果相对稳定。

相对长度单位：

em：是一个相对单位，它是相对于当前元素的字体大小。例如，如果一个元素本身 font - size 是 16px，那么 1em 就等于 16px。如果它的子元素设置了 font - size:1.5em;，那么子元素的字体大小就是 16 × 1.5 = 24px。这使得字体大小可以相对父元素进行调整，有利于在不同层次的元素中灵活控制字体大小比例。

rem：是相对于根元素（html 元素）的字体大小。例如，假设根元素 font - size:16px;，那么 1rem 就是 16px。无论在文档的哪个位置，rem 都是相对于根元素的字体大小来计算的，这有助于在整个文档中保持字体大小的一致性和可维护性。

这是小号字体文本。

这是相对于父元素的较大字体文本。

这是相对于根元素的较大字体文本。

字体粗细（font - weight）

定义 ：用于设置字体的粗细程度。

取值及解释 ：

数值：可以取 100 - 900 之间的整数，数值越大，字体越粗。例如，font - weight:400; 表示正常粗细，font - weight:700; 表示加粗。

关键字：normal 表示正常粗细，等同于 400；bold 表示加粗，等同于 700。

这是较细的字体文本。

这是加粗的字体文本。

这是特别粗的字体文本。

字体样式（font - style）

定义 ：用于设置字体的风格，主要是控制字体是正常样式还是斜体。

取值及解释 ：

normal：正常字体样式，这是默认值。例如，font - style:normal; 将文本设置为正常样式。

italic：表示斜体。例如，font - style:italic; 可以将文本设置为斜体，这在排版中有特殊用途，如表示强调、引用等场景。

这是正常风格的文本。

这是斜体风格的文本。

字体类型（font - family）

定义 ：用于指定文本所使用的字体系列。

取值及解释 ：可以是一个字体系列名称，也可以是多个字体系列名称，以逗号分隔。例如，font - family:"Microsoft YaHei", SimSun, sans - serif; 表示优先使用 “Microsoft YaHei” 字体，如果系统中没有这个字体，则使用 “SimSun” 字体，最后使用无衬线字体（sans - serif 是一种通用字体家族）。

这是使用微软雅黑字体的文本。

这是使用 Times New Roman 字体的文本。

文本样式：

属性名称定义常见取值及解释应用场景text-indent设置文本的首行缩进像素（px）、百分比（%）等用于段落首行缩进，符合排版习惯text-align设置文本内容的水平对齐方式left、right、center、justify控制文本水平对齐方式，实现文本居中、左右对齐等效果text-decoration设置文本的装饰效果none、underline、overline、line-through添加或移除文本装饰效果，如链接默认下划线，可设置为无装饰line-height设置文本的行高数值、像素（px）、百分比（%）、normal控制行间距，提高文本可读性

文本缩进：text-indent

定义：用于指定文本的首行缩进。

常见取值：

用像素（px）、百分比（%）等指定缩进长度。

这是一个首行缩进的段落。首行会缩进2个字符的宽度。

后续行不会缩进。

文本水平对齐方式：text-align

定义：用于设置文本内容的水平对齐方式。 常见取值：

left：文本左对齐。

right：文本右对齐。

center：文本居中对齐。

justify：文本两端对齐。

这是左对齐的文本。

这是居中对齐的文本。

这是右对齐的文本。

这是两端对齐的文本。这种对齐方式常用于正式文档，

可以使文本看起来更整齐。

文本修饰：text-decoration

定义：用于设置文本的装饰效果。 常见取值：

none：无装饰。

underline：下划线。

overline：上划线。

line-through：删除线。

这是无装饰的文本。

这是带下划线的文本。

这是带上划线的文本。

这是带删除线的文本。

行高：line-height

定义：用于设置文本的行高，即行与行之间的垂直间距。 常见取值：

数值：无单位的数值，表示行高与字体大小的倍数。

像素（px）：绝对值设置行高。

百分比（%）：相对于父元素的行高百分比。

normal：默认值，通常等同于数值 1.0 到 1.2 之间，具体取决于浏览器。

这是行高为1.0的文本。行与行之间的间距较小。

这是行高为1.5的文本。这是比较常见的默认行高设置，可读性较好。

这是行高为2.0的文本。行与行之间的间距较大。

这是行高为24像素的文本。使用绝对值设置行高。

这是行高为父元素行高的150%的文本。使用百分比设置行高。

复合选择器：

选择器类型语法描述后裔选择器ancestor descendant选择 ancestor 元素内的所有 descendant 元素。子选择器parent > child选择 parent 元素的直接 child 元素。相邻兄弟选择器element + adjacent选择紧跟在 element 后的 adjacent 元素。一般兄弟选择器element ~ siblings选择 element 之后的所有 siblings 元素。交集选择器selector1 selector2选择同时匹配 selector1 和 selector2 的元素。并集选择器selector1, selector2, ...选择匹配任何一个选择器的元素。伪类选择器 :hoverselector:hover选择鼠标悬停在元素上时的状态，常用于交互效果。

后代选择器（Descendant Selector）

后代选择器用于选择某个元素的后代元素。它的语法是将父元素选择器和后代元素选择器用空格隔开。

这个段落不会被选中。

子选择器（Child Selector）

子选择器用于选择某个元素的直接子元素。它的语法是将父元素选择器和子元素选择器用>隔开。

相邻兄弟选择器（Adjacent Sibling Selector）

相邻兄弟选择器用于选择某个元素的下一个相邻兄弟元素。它的语法是将两个选择器用+隔开。

这是一个段落。

这是下一个段落，会被选中并显示为绿色。

一般兄弟选择器（General Sibling Selector）

一般兄弟选择器用于选择某个元素之后的所有同辈元素。它的语法是将两个选择器用~隔开。

这是一个段落。

这是之后的段落，会被选中并显示为紫色。

这个段落也会被选中并显示为紫色。

交集选择器（Intersection Selector）

交集选择器用于选择同时匹配多个选择器的元素。它的语法是将多个选择器连在一起。

并集选择器

并集选择器用于选择匹配多个选择器之一的元素。它的语法是将多个选择器用逗号（,）分隔。并集选择器会将所有匹配的选择器结果合并，然后对合并后的元素集合应用样式。

这个段落会被选中并显示为红色加粗。

这个段落也会被选中并显示为红色加粗。

这个段落不会被选中。

伪类选择器 :hover

伪类选择器 :hover 用于选择鼠标悬停在元素上时的状态，常用于为交互元素添加悬停效果。

:link: 选择未访问的链接。:visited: 选择已访问的链接。:hover:选择鼠标指针移人链接。:active: 被激活的链接，即按下鼠标左键但未松开。:focus: 选择获取焦点的输人字段。

语法描述示例及生成代码元素生成一个元素。div →

。嵌套元素 (>)用于表示嵌套关系。div>h1 → div 中包含 h1。兄弟元素 (+)用于表示兄弟元素关系。div+h1 → div 和 h1 并列。多个子元素 (*)用于生成多个子元素。ul>li*3 → ul 中生成 3 个 li。类和 ID (. 和 #)用于指定元素的类和 ID。div.class-name#id-name → 带类和 ID 的 div。文本内容 ({})用于添加文本内容。h1{标题} →

标题

。属性 ([])用于添加属性。a[href="url"] → 带 href 属性的 a 标签。列表用于生成列表。ol>li*3 → 有序列表，3 个 li。重复结构 (* 和 $)用于生成带数字的元素。div.item-$*3 → 3 个带递增数字类名的 div。特殊缩写 (! 或 html)快速生成常见结构。! 或 html → 生成基本 HTML5 文档结构。

结构伪类选择器

结构伪类选择器是CSS中用于选择文档中具有特殊位置或状态的元素的一类选择器。它们不依赖于文档的标签结构，而是基于元素在文档中的位置或状态来选择元素。

选择器描述示例代码:root选择文档的根元素:root { --main-color: blue; }:nth-child()选择父元素的第n个子元素p:nth-child(2) { color: red; }:nth-last-child()选择父元素倒数第n个子元素p:nth-last-child(2) { color: red; }:first-child选择父元素的第一个子元素p:first-child { color: red; }:last-child选择父元素的最后一个子元素p:last-child { color: red; }:only-child选择父元素中唯一的子元素.container:only-child { color: red; }

:nth-child()

用于选择其父元素的第n个子元素或符合特定模式的子元素。

:nth-last-child()

用于选择其父元素倒数第n个子元素。

颜色：

字体颜色：color

文本颜色：background-color

颜色表示方式表示含义属性值示例关键词预定义的颜色名red、green、blue、yellow……rgb表示法红绿蓝三原色，每项取值范围：0~255rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)……rgba表示法红绿蓝三原色+a表示透明度，取值范围0~1rgba(255,255,255,0.5)、rgba(255,0,0,0.3)……十六进制表示法#开头，将数字转换成十六进制表示#000000、#ff0000、#e92322，简写：#000、#f00……

背景：

背景颜色（background-color）

用法：用于设置元素的背景颜色。 注意点：

颜色可以通过颜色名称（如red）、十六进制代码（如#ff0000）、RGB值（如rgb(255, 0, 0)）或RGBA值（如rgba(255, 0, 0, 0.5)）来指定。

默认情况下，背景颜色会填充元素的整个内容区域。

配合其他属性（如padding、border）使用，可以更好地控制背景颜色的显示范围。

属性描述示例代码background-color设置元素的背景颜色.bg-color { background-color: #ffcc00; }background-image设置元素的背景图片.bg-image { background-image: url('image.jpg'); }background-repeat控制背景图片是否重复.bg-repeat { background-repeat: no-repeat; }background-size设置背景图片的大小.bg-size { background-size: cover; }background-position设置背景图片的位置.bg-position { background-position: right top; }多个背景图片设置多个背景图片.multi-bg { background-image: url('image1.jpg'), url('image2.jpg'); }

HTML背景相关属性连写用法说明

属性名：background

属性值规范

单个属性值的合写，取值之间以空格隔开

书写顺序推荐：background: color image repeat position;

省略规则：可根据实际需求省略部分属性值

特殊情况处理

在PC端开发中，若盒子大小与背景图片大小完全一致，可简化写法为：

background: url('image-url');

注意事项

单独样式与连写的搭配

若需对某些背景属性单独设置，推荐将单独样式写在连写样式下方，以便于维护和覆盖：

.example {

background: #ffcc00 url('image.jpg') no-repeat left top;

background-size: cover; /* 单独设置背景图片大小 */

}

或者将单独样式融入连写中，确保所有相关样式集中定义：

.example {

background: #ffcc00 url('image.jpg') no-repeat left top / cover;

}