fuchencong

The way I am

0%

HTML 与 CSS 基础（2）：CSS 简介

发表于 分类于

这篇文章将继续学习前端基础中的 CSS(Cascading Style Sheets，层叠样式表) 知识。

CSS 简介

HTML 通常只关注网页的结构，显示元素内容，不会使用 HTML 来控制网页的显示样式（繁琐且臃肿）。而 CSS 的主要场景就是美化网页，布局页面的。CSS 是层叠样式表（Cascading Style Sheets）的缩写，有时也称为 CSS 样式表或级联样式表。

  • CSS 也是一种标记语言
  • CSS 主要用来设置 HTML 页面中的文本内容（字体、大小、对齐）、图片的外形（大小、边框）以及版面的布局和外观显示。
  • CSS 可以美化 HTML 页面，让页面布局更加简单

通过 CSS，让 HTML 专注去做结构呈现，样式则交给 CSS，这样结构（HTML）与样式（CSS）分离。

CSS 语法规范

CSS 也有自己的语法规范，CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

  • 选择器用于指定需要应用 CSS 样式的 HTML 元素，即对哪些 HTML 元素应用样式
  • 一条或多条声明用于设置具体的样式，即应用什么样式
1
2
3
4
5
6
7
/* 选择器 */
h1
/* 样式声明 */
{
    color: red;
    font-size: 14px;
}
  • 样式声明位于花括号内
  • 一条样式使用 键值对 的形式来指定 属性 和 属性值
  • 属性与属性值之间用冒号分隔
  • 多个键值对之间由 ; 分隔
  • CSS 的注释以 /* 开头，以 */ 结束

所有的样式包含在 <style> 标签内，表示样式表。<style> 标签一般写在 <head> 标签内部。如下是一个示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>red text</p>
</body>
</html>

CSS 代码风格

良好的 CSS 代码通常遵守如下代码风格：

  • 样式格式书写采用展开格式，因为更直观，方便阅读
1
2
/* 紧凑格式 */
h1 {color: red; font-size: 14px;}
1
2
3
4
5
/* 展开格式 */
h1 {
    color: red;
    font-size: 14px;
}
  • 样式选择器、属性名、属性值等全部采用小写字母，特殊情况例外
  • 属性值与冒号之间保留一个空格
  • 选择器与大括号之间保留一个空格

CSS 基础选择器

选择器的核心作用是根据不同的需求，把不同的标签选择出来。简单来说，选择器就是用于取出目标标签。CSS 支持多种选择器，可以分为 基础选择器 和 复合选择器 两大类。

基础选择器是由单个选择器组成的，它可以分为 标签选择器、类选择器、id 选择器和 通配符选择器。

标签选择器

标签选择器（元素选择器）是指使用 HTML 标签名作为选择器，按照标签名称分类，可以为页面中的某一类型标签指定统一的 CSS 样式。语法格式：

1
2
3
4
5
标签名 {
    属性1: 属性值1;
    属性2: 属性值2;
    ......
}
  • 作用：将某一类标签全部选择出来，例如选择所有的 <p> 标签、<div> 标签等
  • 优点：能快速为页面中同类型的标签设置统一样式
  • 缺点：同一类标签不能设计差异化样式

类选择器

标签选择器只能基于 标签 本身的类型来选择某一类标签。而 类选择器 允许我们为不同的标签设置不同的 CSS 类型，从而支持差异化选择。其语法如下：

1
2
3
4
5
6
7
8
9
10
.类名1 {
    属性1: 属性值1;
    属性2: 属性值2;
    ...
}
.类名2 {
    属性1: 属性值1;
    属性2: 属性值2;
    ...
}

在 HTML 元素中，通过 class="类名" 来指定该标签所使用的 CSS 类型。如下是一个示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>
</html>
  • 在 CSS 中，通过 .类名 来使用类选择器，在 HTML 中，通过 class="类名" 的方式来设置该标签对应的 CSS 类型
  • 类名是由我们自定义的，命名需要有意义。不要使用纯数字、中文命名，而应该使用英文命名。如果是一个词组，可以使用 - 来连接

可以为一个标签指定多个类名，从而实现一个标签应用多种 CSS 样式。当在 HTML 元素的 class 属性中指定多个类名时，多个类名中间需要使用空格分开。

如下是对上一个示例的改进：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<head>
    <style>
        .square {
            width: 100px;
            height: 100px;
        }
        .red {
            background-color: red;
        }

        .green {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="square red"></div>
    <div class="square green"></div>
    <div class="square red"></div>
</body>

多类名使得我们的 CSS 代码更加简洁紧凑，代码维护也更加方便：可以把标签的某些公共样式放到一个专门的 CSS 类型中，标签只需要额外引用该 CSS 类型即可。以后修改该公共样式时，只需要修改该 CSS 规则定义 这一处即可。

id 选择器

id 选择器可以为具有指定 id 属性的 HTML 元素设置特定的样式。语法格式如下：

1
2
3
4
5
#id名 {
    属性1: 属性值1;
    属性2: 属性值2;
    ...
}

在 CSS 中，通过 #id名 的方式来定义 id 选择器。在 HTML 中，通过 id="id名" 来设置该标签对应的 id 属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
    <style>
        #id1 {
            color: red;
        }
        #id2 {
            color: green;
        }
    </style>
</head>
<body>
    <div id="id1">item1</div>
    <div id="id2">item2</div>
    <div>item3</div>
</body>
  • id 选择器的用法和类选择器类似，只不过它是根据元素的 id 属性来选择元素的
  • id 在 HTML 文档中是唯一的，只能对应页面中的某一个具体元素
  • id 选择器和类选择器最大的不同在于使用上的优先级问题，id 选择器的优先级高于类选择器
  • 类选择器在修改样式中应用更多，而 id 选择器一般用于页面上的唯一性元素上，经常搭配 JavaScript 使用

通配符选择器

在 CSS 中通配符选择器用 * 表示，它表示选取页面中所有的元素（页面中的 HTML 元素会自动被选中，不需要额外设置）。语法格式如下：

1
2
3
4
5
* {
    属性1: 属性值1;
    属性2: 属性值2;
    ...
}

使用通配符选择器的目的是为了将所有元素的默认样式统一设置一遍，例如清除所有标签的内外边距，例如：

1
2
3
4
* {
    margin: 0;
    padding: 0;
}

CSS 字体属性

CSS 字体属性用于定义字体系列、大小、粗细、样式（如斜体）等：

  • font-family：该属性定义文本的字体系列
    • 字体名称推荐使用英文
    • 如果字体名称中包含空格，则需要使用引号包裹字体名
    • 可以指定多个字体名称，各个字体之间用英文逗号隔开。浏览器会按顺序查找使用对应的字体，如果找到了，就使用该字体，否则尝试下一个字体。这样提高了网页兼容性
      尽量推荐使用系统默认自带的字体
1
2
3
* {
    font-family: 'Microsoft YaHei', "Arial", "Hiragino Sans GB";
}
  • font-size：该属性定义字体大小，单位为 px（像素）
    • chrome 浏览器默认字体大小为 16px
    • 不同浏览器默认显示的文字大小可能不一致，尽量给出一个明确值大小，不要使用默认大小
1
2
3
4
5
6
7
h2 {
    font-size: 20px;
}

body {
    font-size: 16px;
}
  • font-weight：该属性定义字体的粗细
    • 属性值可以是 normal、bold、bolder、lighter 或者一个数字（没有单位）
    • 实际开发中，更新欢使用数字表示粗细，normal 等同于 400，bold 等同于 700
1
2
3
4
5
6
7
h2 {
    font-weight: normal;
}

p {
    font-weight: 700;
}
  • font-style：该属性定义字体的文本风格
    • 属性值可以是 normal（默认）、italic（斜体）
    • 实际开发中，很少给文字加斜体，反而经常需要将斜体标签（em、i）改为不倾斜

字体复合属性 font 可以将上述字体属性综合起来设置，这样更节约代码，其语法格式如下：

1
2
3
body {
    font: font-style font-weight font-size/line-height font-family;
}

例如：

1
2
3
div {
    font: italic 700 30px 'Microsoft YaHei';
}
  • 使用 font 属性时，必须按照上述顺序书写各种属性，不能更换属性顺序，各个属性之间以空格分隔
  • 不需要设置的属性可以省略（采用默认值），但是必须保留 font-size 和 font-family 属性，否则 font 属性将不生效

CSS 文本属性

CSS 文本属性可以定位文本的外观，比如文本的颜色、对齐、装饰、缩进、行间距等。

color 属性用于定义文本颜色，颜色值可以通过三种方式表示：

  • 预定以的颜色值：red、green 等
  • 十六进制：#FF0000、#FF6600 等
  • RGB 代码：rgb(255, 0, 0)、rgb(100%, 0%, 0%)

在 VS Code 中，光标在颜色值悬停时，会显示颜色预览，可以选择所需要的颜色。

text-align 属性用于设置文本内容的水平对齐方式，其值可以是 left（默认）、right、center。

text-decoration 属性用于设置文本的装饰，其值可以是 none（默认）、underline（下划线）、overline（上划线）、line-through（删除线）。

text-indent 属性用于设置文本的首行缩进，常用于段落的首行缩进。其属性值是一个给定的长度（可以是负值），其单位为 px、em 等。

  • px 是像素值，大小是固定的
  • em 是一个相对单位，表示当前元素一个文字的大小。如果当前元素没有设置大小，会按照父元素的一个文字大小
1
2
3
p {
    text-indent: 2em;
}

line-height 属性用于设置行间距，控制文字行与行之间的距离。行间距包含 3 个部分：上间距、文本高度、下间距。当改变行间距时，文本高度本身不会改变，改变的是上间距和下间距。

1
2
3
p {
    line-height: 20px;
}

CSS 引入方式

根据 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为 3 类：

  • 行内样式表（行内式）
  • 内部样式表（嵌入式）
  • 外部样式表（链接式）

行内样式表是在元素标签内部的 style 属性中设定 CSS 样式，适合修改简单的样式：

1
<p style="color: red; font-size: 20px">这是一个段落</p>
  • style 属性其实就是标签的一个属性，只不过属性值是 CSS 样式，因此双引号内的属性值需要遵循 CSS 语法规范
  • 可以控制当前标签的样式设置
  • 书写繁琐，没有体现出结构与样式相分离的思想。所以不推荐大量使用，只是对当前元素设置简单样式时，考虑使用

内部样式表是写入到 html 页面内部，将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中：

1
2
3
4
5
6
7
8
9
10
11
12
<head>
    <style>
        p {
            color: red;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <p>这是一个段落</p>
</body>
  • <style> 标签理论上可以放到 HTML 文档的任何地方，但一般会放到 <head> 标签中
  • 通过这种方式，可以控制当前整个 HTML 页面的样式
  • 代码结构清晰，但是没有实现结构和样式完全分离

外部样式表是实际开发中最常用的方式，它的核心是：将样式写入单独的 CSS 文件中，之后再将 CSS 文件引入到 HTML 页面中使用。因此外部样式表的使用分为两步：

  1. 创建单独的 CSS 文件，CSS 文件内只需要书写 CSS 样式规则，不需要使用 <style> 标签
  2. 在 HTML 文件中使用 link 标签引入这个 CSS 文件
1
<link rel="stylesheet" href="css文件路径">
  • rel 属性表示当前标签与被链接文件之间的关系，stylesheet 表示被链接文档是一个样式表文件
  • href 属性设置被链接文档的 URL，可以是相对路径或绝对路径

外部样式表完全实现了结构与样式相分离，它可以控制多个 HTML 页面（只需要在相应的 HTML 页面中引入该 CSS 文件即可）。

1
2
3
4
5
6
/* style.css */
p {
    color: bisque;
    font-size: 30px;
    text-decoration: underline;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </p>
</body>
</html>

Chrome 调试工具

Chrome 调试工具可以帮助我们调试 HTML 结构和 CSS 样式，通过 F12 或者点击页面空白处右键选择 检查，都可以打开 Chrome 调试工具：

  • cmd + + 或者 cmd + - 可以放大或者缩写页面
  • 左边是 HTML 页面结构，右边是 CSS 样式
  • 右边的 CSS 样式可以改动数值，实时预览效果
  • 如果点击元素，发现右侧没有对应的样式，则可能是 CSS 编写出错，或者 HTML 引入样式出错
  • 如果样式前面有黄色感叹号，表示样式书写错误

Reference