【2025.3最新版】从零开始的CSS网页开发学习笔记 1（包含CSS简介 CSS基础选择器 CSS字体属性 CSS文本属性 CSS引入方式）
文章目录
- CSS简介
- CSS基本介绍
- CSS基本语法规范
- CSS代码风格
- CSS基础选择器
- 选择器的作用和分类
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
- CSS字体属性
- font-family 字体类型设置
- font-size 字体大小设置
- font-weight 字体粗细设置
- font-style 字体样式设置
- font 字体复合属性设置
- CSS文本属性
- color 文本颜色设置
- text-align 文本对齐设置
- text-decoration 文本装饰线设置
- text-indent 文本缩进设置
- line-height行间距设置
- CSS引入方式
CSS简介
CSS基本介绍
- HTML的局限性：HTML只关注内容的语义，对于网页元素，都只是进行简单的显示，而不考虑对网页内容的美化。通过HTML只能做一些简单的样式，并且还会产生非常臃肿和繁琐的代码。
- CSS的名称：层叠样式表，有时候也会被称为CSS样式表或级联样式表。
- CSS的基本作用：主要用于设置HTML页面中的文本样式（字体、大小、对齐方式等）、图片样式（图片的宽和高、边框样式、边距等）以及版面布局、外观显示样式。简单来说，CSS可以美化网页布局，让网页变得更加丰富多彩。
- CSS的最大价值：可以让HTML专注于构建网页的结构，而不用负责对网页样式的管理，从而实现网页结构和样式相分离。
CSS基本语法规范
-
基本组成：CSS规则由选择器以及一条或多条声明组成。
- 选择器：指定需要进行CSS样式设置的HTML标签；
- 声明：对指定的标签进行设置的样式，用一个大括号进行表示；每一条声明表示一种样式设置，多个声明之间通过英文分号进行隔开；属性和属性值之间以键值对的形式进行表示。具体表示形式为：
样式选择器 {样式1: 样式1的属性值; 样式2: 样式2的属性值;...}。
-
写在代码中的位置：常常在网页头部尾标签
</head>前写一对<style></style>标签，其中插入选择的样式。通过这样的方式，就实现了网页设计的样式和结构（写在<body>标签中）相分离。
CSS代码风格
- 注意事项：代码风格不是强制规范，而是符合实际开发习惯的书写方式。
- 样式格式书写：分为紧凑格式和展开格式。更加推荐展开格式的书写，因为更加直观。
- 紧凑格式：
样式选择器 { 样式1: 样式1的值; 样式2: 样式2的值}。 - 展开格式：
- 紧凑格式：
样式选择器 {
样式1: 样式1的值;
样式2: 样式2的值；
}
- 样式大小写：推荐样式选择器、属性名和属性关键值都采用小写字母。
- 空格规范：
- 习惯于属性值之前冒号之后保留一个空格。
- 习惯于在选择器和大括号之间保留一个空格。
CSS基础选择器
选择器的作用和分类
- 选择器的作用：根据不同的需求将需要进行样式设置的标签选择出来。
- 选择器的分类：可以分为基础选择器和复合选择器两类。
- 基础选择器：
- 基本组成：由单个选择器组成。
- 包含范围：标签选择器、类选择器、id 选择器和通配符选择器。
标签选择器
- 基本概念：用HTML标签名称作为选择器，按照标签名称分类，为页面中某一类标签指定统一的CSS样式。例如，为
<p>标签设置统一的样式，为<h1>标签设置统一的样式等。- 基本语法：
标签名 {属性1: 属性值1; 属性2: 属性值2}。 - 选择器优点：能够为页面中同类型的标签统一设置样式。
- 选择器缺点：不能对同一类型的标签进行差异性设置。
- 基本语法：
类选择器
- 基本作用：可以实现差异化选择，单独选择一个或某几个标签。
- 使用语法：
- 首先，创建一个样式类，语法为
.类名{属性1: 属性值1; 属性2:属性值2}。 - 接着，所有需要设置为该类别样式的标签，只需要将自己的
class属性的值设置为该类的类名即可。
- 首先，创建一个样式类，语法为
- 选择器优点：实际开发过程中使用最多的选择器，可以通过定义一个类，多次进行使用，非常方便。
- 注意事项：
- 类的命名要有意义，不要随便起名。
- 不要使用纯数字和中文进行命名，尽量使用英文进行表示。
- 不能以标签名作为类名。
- 多类名使用方式：
- 基本作用：可以为一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。
- 注意事项：为一个标签设置多个类名时，多个类名之间需要用空格进行分隔。具体表示为：
class="类别1 类别2"。
id选择器
- 基本作用：可以为标有特定id的HTML元素指定特定的样式。
- 使用语法：首先，创建一个样式，语法为：
#id名称 {属性1: 属性值1; 属性2: 属性值2}，然后将需要进行样式设置的标签的id属性的值设置为定义好的id名称即可。 - 和类选择器的区别：id选择器只能被代码中一个标签调用，如果有一个标签已经调用了，则其他标签无权调用。可以理解为，id是每一个标签唯一的，不得重复。
通配符选择器
- 基本作用：选择页面中的所有元素。
- 使用语法：以星号创建一个样式，具体的语法为：
* {属性1: 属性值1; 属性2: 属性值2} - 注意事项：通配符选择器不需要进行调用，自动给所有元素使用样式。一般情况下很少使用通配符选择器。
CSS字体属性
font-family 字体类型设置
- 属性作用：设置文本的字体类型。实际开发过程中都是按照团队指定进行使用。
- 常用属性值：“
Microsoft Yahei”“Times New Roman” “Arial” “tahoma,arial”“Helvetica”“sans-serif”"宋体"等，其中 “Microsoft Yahei” 也可以使用中文 “微软雅黑” 代替，但是出于兼容性考虑，推荐使用英语。 - 设置多个字体：样式中也可以同时设置多种字体，表示如果用户电脑未安装第一种字体，则会执行第二个字体，以此类推，如果都没有安装则会使用默认的字体。需要注意的是，各个字体之间以英文逗号进行分隔。
- 注意事项：谷歌浏览器的默认字体是微软雅黑。提倡尽量使用常见且默认的字体，例如微软雅黑、新罗马字体等，不推荐使用少见的字体。
- 常用形式：使用标签选择器给
<body>标签中的所有文本内容设置字体类型，即使用一个<body>标签选择器给网页主体中的所有内容设置相同的字体。
font-size 字体大小设置
- 属性作用：设置文本的字体大小。
- 属性值：
- 像素表示法：一个数字加上 “
px” 构成，其中px即像素，是网页中最常用的大小单位。对于谷歌浏览器，默认的文字大小是16像素。 - 相对表示法：一个数字加上一个 “rem” 构成，其中 rem 表示根元素的字体大小。
- 像素表示法：一个数字加上 “
- 注意事项：对于不同的浏览器默认的字体大小可能不一致，因此推荐给出一个明确的字体大小而不是直接采用默认字体大小。
- 常用形式：
- 使用标签选择器给
<body>标签中的所有文本内容设置字体大小。 - 标题标签
<h>比较特殊，尽管其也在<body>标签的覆盖范围内，但是不受到<body>设置字体大小的影响，需要进行单独设置字体大小。
- 使用标签选择器给
font-weight 字体粗细设置
- 属性作用：设置字体的粗细。
- 可选属性值：
normal表示正常字体，bold表示粗体，bolder表示特粗体，lighter表示细体。- 另外，还可以使用取值为
100-900整数表示具体的粗细（实际开发过程中更加提倡），例如bold对应的数字是700，normal对应的数字是400。实际前端开发过程中更习惯于使用数字。
font-style 字体样式设置
- 属性作用：定义字体显示的风格，主要是斜体和非斜体。该设置在实际开发过程中很少使用。
- 属性值：默认值为
normal，表示标准的字体样式；italic表示斜体样式。 - 使用场景：一般情况下很少给文字加斜体，但是常常用该属性让斜体标签变为不倾斜的字体。
font 字体复合属性设置
- 属性作用：同时设置字体的多个属性，节约代码空间。
- 使用语法：
font: font-style属性值 font-weight属性值 font-size/line-height属性值 font-family属性值；- 其中的
line-weight属性值是指行高。
- 注意事项：
- 顺序问题：上面四个属性值之间的顺序不能颠倒，属性值之间以空格进行分隔。
- 必须属性：不想设置的属性值可以省略（此时会自动取默认值），但是必须保留
font-size和font-family两个属性的属性值。
CSS文本属性
color 文本颜色设置
- 属性作用：用于设置文本的颜色。
- 属性值：一共有预设值、十六进制和RGB代码三种形式来定义属性值。
- 预设值：例如
red，green，blue和pink等。这是在进行程序调试时最常用的一种方法。 - 十六进制：例如
#FF0000等，需要注意的是十六进制要用#开头。这种方式是实际开发过程中这是最常用的使用方式。可以在双击该颜色的值后，在UI界面中选择需要的颜色。 - RGB代码：例如
rgb(255,0,0)和rgb(100%, 0%, 0%)等。
- 预设值：例如
text-align 文本对齐设置
- 属性作用：用于设置指定元素内的文本的水平对齐方式（即左对齐、居中对齐和右对齐）。如果想要设置一张通过
<img>标签表示的图片的对齐方式，则需要将存放该图片的容器的text-align属性设置为指定的值。 - 属性值：
left是左对齐，right是右对齐，center是居中对齐。其中左对齐是默认值。 - 文本垂直居中的设置：对于单行文本，将文本的行高设置为与文本所在的盒子的高度相同，则此时文本会在盒子中垂直居中显示。如果行高小于盒子高度，则文本显示会偏上；如果行高大于盒子高度，则文本显示会偏下。
text-decoration 文本装饰线设置
- 属性作用：用于设置文本的装饰线，包括下划线、删除线和上划线等。
- 属性值：
none表示无装饰，为默认值；underline表示下划线，是一个常用的线形（超链接自带下划线，常常通过设置该属性去除超链接自带的下划线）；overline表示上划线（很少使用）；line-through表示删除线（几乎不用）。
text-indent 文本缩进设置
- 属性作用：设置指定区域文本的第一行的缩进方式，通常是将段落的首行进行缩进。
- 属性值：
- 以像素为单位：一个整数加上 “
px” 结尾，表示缩进多少个像素值。也可以设置为一个负数表示向前缩进，只是这种情况很少用。 - 以相对文字大小为单位：以当前元素中的字体大小作为一个单位，用一个整数加上 “
em” 结尾，表示用指定个当前元素的单位距离作为缩进距离。如果当前元素没有设置字体大小，则会采用父元素中的字体大小。
- 以像素为单位：一个整数加上 “
line-height行间距设置
- 属性作用：设置某一区域中文本的行间距，即相邻行之间的距离。
- 属性值：用像素值进行表示，仍然采用整数值+ “
px” 的方式。 - 注意事项：修改行间距不会修改文本本身的高度，而是修改文本上方和下方的空白宽度，而上下两方的空白宽度是相同的。
CSS引入方式
- CSS样式表的分类：按照CSS样式书写的位置（也被称为引入的方式），CSS样式表可以分为行内样式表（简称行内式）、内部样式表（简称嵌入式）、和外部样式表（链接式）三类。
- 内部样式表：
- 使用方法：将CSS部分的代码写在HTML页面的内部，即将所有的CSS代码抽取出来，单独放到一对
<style></style>标签中。 - 注意事项：
<style>标签理论上可以放在HTML文档中的任何位置，但是一般会放在<head>标签中。 - 控制范围：可以方便地控制整个网页页面中的元素样式。
- 优点缺点：代码结构非常清晰，虽然没有实现结构和样式完全分离，但是在进行样式学习练习的过程中非常多使用。
- 使用方法：将CSS部分的代码写在HTML页面的内部，即将所有的CSS代码抽取出来，单独放到一对
- 行内样式表：
- 使用方法：直接在元素标签内部设置
style属性的值为指定的CSS样式，例如<div style="color: red; font-size: 12px;">。 - 适用情况：该类型的样式表只适用于修改简单样式。但是由于该方式修改繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用。
- 其他名称：也被称为行内式引入。
- 使用方法：直接在元素标签内部设置
- 外部样式表：
- 类型地位：在实际开发过程中采用的都是外部样式表，也是推荐使用的方式。
- 适用场景：适用于样式非常多的情况。
- 核心内容：将样式单独写入到一个CSS文件中，之后把CSS文件引入到HTML页面中进行使用。
- 使用方法：首先，新建一个后缀名为
.css的文件，然后再在里面写入CSS代码（写代码的方式和其他两种样式表相同）；接着，在HTML界面中，使用<link>标签引入这个文件，使用语法为<link rel="stylesheet" href="CSS文件路径">。
- 内部样式表：