HTML5基础——6、CSS基础

原创已于 2025-10-18 07:53:03 修改 · 1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css #前端

于 2025-10-15 15:00:00 首次发布

H5 专栏收录该内容

46 篇文章

订阅专栏

大家好，我是阿赵。继续学习H5。
之前已经学习完了HTML的标签用法。但会发现一个问题，单纯用HTML标签来做网页，会感觉很丑。这是因为标签只是网页的框架，相当于没有装修的房子。接下来学习的CSS，则是为网页指定样式，让网页变得好看的。

一、CSS是什么

层叠样式表(英文全称：Cascading Style Sheets)，简称CSS。在说CSS是什么之前，我们先看一个例子：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>标题1</h1>
  <h2>标题2</h2>
  <h3>标题3</h3>
  <h4>标题4</h4>
  <h5>标题5</h5>
  <h6>标题6</h6>
</body>

</html>

Document

标题1

标题2

标题3

标题4

标题5

标题6

这个例子之前做过，效果就是显示各种标题的样式。 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/a77ec7f3e405424ba7d644d0c6a3b62e.png#pic_center)

那么问题来了，为什么标题1是这么大的字号？我能不能改变标题1的样式呢？
接下来做点小修改。

<!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>
    h1 {
      color: red;
      font-size: 25px;
      font-weight: bold;
    }

    h2 {
      color: green;
      font-size: 22px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <h1>标题1</h1>
  <h2>标题2</h2>
  <h3>标题3</h3>
  <h4>标题4</h4>
  <h5>标题5</h5>
  <h6>标题6</h6>
</body>

</html>

现在运行的效果会变成：
在这里插入图片描述

这里主要的改动是在head标签里面加入了一组style标签：

  <style>
    h1 {
      color: red;
      font-size: 25px;
      font-weight: bold;
    }

    h2 {
      color: green;
      font-size: 22px;
      font-weight: bold;
    }
  </style>

这里的作用就很明显了，它指定了标题h1和h2的颜色、字号和字体加粗。
这个style标签就是我们所说的CSS样式了。只要通过指定CSS样式，就可以改变HTML网页里面的各种标签的外观。

二、 CSS的结构

以h1的CSS为例子：

h1 {
  color: red;
  font-size: 25px;
  font-weight: bold;
}

这里可以看到，在大括号外面，会有一个对象的指定，例子里面就是h1。
这个h1被称为CSS的选择器。选择器的含义是，我接下来的CSS样式是给谁生效的。
选择器在CSS里面是一个比较重要而且丰富的内容。之后会详细说明。
然后在大括号里面，有几对键值。比如color:red。其中color被称为属性，而red被称为值。每一对属性和值使用冒号：连接，然后不同的属性之间用分号；来分隔

三、 CSS的引入方式

CSS的引入方式主要有3种。

1、行内样式表

正常我们写标题1标签，就是用h1包裹着显示内容。

<h1>标题1</h1>

其实我们可以在标签里面直接加style属性，来指定CSS样式，比如：

<h1 style="color: red; font-size: 40px; font-family: '微软雅黑'; font-weight: bold; font-style: italic; text-align: center; text-decoration: underline;">标题1</h1>

运行效果：
在这里插入图片描述

这种行内样式表，实际上用得不多，适合直接对某个特定的标签指定一些简单的样式。

2、内部样式表

之前介绍过的，在head标签里面写style标签的，就是内部样式表：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h1 {
      color: red;
      font-size: 40px;
      font-family: '微软雅黑';
      font-weight: bold;
      font-style: italic;
      text-align: center;
      text-decoration: underline;
    }
  </style>
</head>

这种方式用得比较多，可以方便的在当前的html页面通过选择器对特定的元素进行CSS样式指定。

3、外部样式表

在网页的文件夹内新建一个css文件夹，然后创建一个叫做azhao.css的文件(文件夹名和文件名根据自己需要)：
在这里插入图片描述

然后打开新建的css文件，把需要的css样式拷贝进来，比如上面的h1的例子，就是拷贝这些内容：
在这里插入图片描述

然后回到html文件，在head标签里面不需要再写style标签了，写一个link标签，把azhao.css引入进来：
在这里插入图片描述

<link rel="stylesheet" href="css/azhao.css">

这样达到的效果是和之前的2种是一样的。外部样式表可以把css样式表和html标签代码分离，单独修改。

在这里插入图片描述

HTML5基础——6、CSS基础

一、CSS是什么

标题1

标题2

标题3

标题4

标题5

标题6

二、 CSS的结构

三、 CSS的引入方式

1、 行内样式表

2、 内部样式表

3、 外部样式表

1、行内样式表

2、内部样式表

3、外部样式表