Logo

# CSS3教程 - 3 CSS语法

下面开始正式学习 CSS。

首先要知道 CSS 样式书写在什么地方，语法是什么样子。

# 3.1 CSS样式分类

根据CSS代码书写的位置， CSS 大致可以分为 3 种：

  • 内联样式
  • 内部样式表
  • 外部样式表

# 1 内联样式

内联样式也叫行内样式，在 HTML 标签内部通过 style 属性来设置元素的样式。

举个栗子：

<body>
    <p style="color:red; font-size:30px;">CSS样式</p>
</body>
1
2
3
  • 上面 style 属性指定的就是CSS样式，这里我们暂时不纠结它的含义，待会我们再细说。

缺点：使用内联样式，样式只能对当前这一个标签生效。如果希望影响到多个元素，必须在每一个元素中都复制一遍；并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便。

所以注意：开发时尽量不要使用内联样式。

# 2 内部样式表

将样式编写到 head 标签中的 style 标签里，然后通过 CSS 的选择器来选中元素，并为其设置各种样式。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS简介</title>

    <style>
        p {
            color:red;
            font-size:30px;
        }
    </style>
</head>

<body>
    <p>CSS样式1</p>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

  • 首先在HTML页面的 head 标签中的 style 标签中书写了一段CSS代码；

  • 代码的含义我们暂时不解释，待会我们细说，这里只知道它设置了标签的颜色和字体大小。

最终显示效果如下：

内部样式表有哪些优缺点呢？

优点：可以同时为多个标签设置样式，并且修改时只需要修改一处即可。内部样式表更加方便对样式进行复用。

缺点：我们的内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用。

但是，后面我们为了学习方便，还是以内部样式的形式来演示。

# 3 外部样式表

我们可以将 CSS 样式单独编写到一个外部的 CSS 文件中，然后通过在页面中通过 link 标签来引入外部的 CSS 文件。

举个栗子：

我们新建了一个 styles 文件夹，在 styles 文件夹中新建了一个 index.css 文件，并在其中编写将刚才的CSS代码。

然后在 index.html 页面中使用 link 标签引入CSS文件，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS简介</title>
    <link rel="stylesheet" href="./styles/index.css" />
</head>

<body>
    <p>CSS样式1</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

显示的效果和刚才是一样的。

那么使用外部样式表有哪些好处呢？

外部样式表需要通过 link 标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用使样式，可以在不同页面之间进行复用。

外部样式表示一个单独的文件，浏览器在加载的时候，会将CSS文件进行缓存，如果其他页面也使用了这个CSS文件或后面再次访问这个页面，将会使用缓存文件，从而加快网页的加载速度，提高用户的体验。

# 3.2 CSS基本语法

# 1 注释

我们几乎在学习任何语言的时候，都会有注释，包括 HTML 语言，那么 CSS 中的注释格式是什么样的呢？

在CSS中的注释只能使用 /* 和 */ 包裹。即不管是单行注释，还是多行注释，都是以 /* 开头，以 */ 结尾。

例如：

/* css中的单行注释 */

/* 
css中的多行注释
css中的多行注释
css中的多行注释
*/
1
2
3
4
5
6
7

# 2 基本语法

下面我们就来介绍一下上面编写的CSS样式的含义。

p {
  color:red;
  font-size:30px;
}
1
2
3
4

CSS基本语法主要包括 选择器 和 声明块 。

选择器 用来选中页面中指定的元素，声明块 用来对选择的元素设置样式。

所以解释一下上面的代码：

  1. 前面的 p 表示选择器，p 后面 {} 部分是声明块 ，后面 {} 中这些样式就是对前面的选择器选中的元素生效； 这里的 p 选择器的含义是对选择页面中所有的 p 元素生效，后面我们再对各种选择器进行学习；
  2. 声明块中的样式是 键值对 的形式，也就前面是属性名，后面是属性值，键和值之间以 : 连接，以 ; 结尾。我们后面学习CSS样式就是学习各种属性和值的设置；
  3. color:red; 表示 颜色:红色，设置标签中字体的颜色，font-size:30px; 表示 字体大小:30像素；每个设置项后面用 ; 分隔；

← 04-CSS选择器 →