4.1 HTML5 样式的使用

我们先来了解几个标签以及他们的属性:

标签

样式定义，我们可以通过它来定义一些样式。
资源的引用，例如引入 css 样式到我们的页面中。

属性

rel="stylesheet": 可以设多种数据，stylesheet只是其中之一。stylesheet表示引入的是一个外部的css样式文件.
type="text/css"：这是引入文档的类型，我们可以引入一个 js 文件也可以引入一个 css 文件。
margin-left：边距，定义居左居右的距离从而能更好的控制布局。

下面看一下样式具体的引入方式：

三种样式表插入方法

外部样式表，指出引用文件类型以及引用地址。

<link rel="stylesheet" type="text/css" href="mystyle.css">

内部样式表，指定 css 格式，在标签中写入 css。

    body {
        background-color: red;
    }
    p {
        margin-left: 20px;
    }

内联样式表，直接在标签内部改变它的样式。

<p style="color: red">

下面具体演示一下：

新建一个 index.html 文件，我们先来试一下外部样式表引入。在同一级目录下创建一个 mystyle.css 文件。在 index.html 中写入代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>样式</title>
</head>
<body>
    <h1>标题h1</h1>
</body>
</html>

浏览器中看一下效果：

图片说明

没有问题，标题 h1 非常大，我们来给它加点颜色：

在 mystyle.css 中写入：

h1 {
    color: red;
}

下面我们引入这一样式，在 index.html 中添加：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>样式</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <h1>标题h1</h1>
</body>
</html>

刷新浏览器：

图片说明

标题变成红色的了，这就是一个外部引用的方式。

下面我们试一下内部样式表：

在 index.html 中修改：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>样式</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <h1>标题h1</h1>

    <p>欢迎来到极客学院：www.jikexueyuan.com</p>
</body>
</html>

接下来我们把样式写进头文件中，这样方便查看和以后的更改，这也是一个常规的写法。在 index.html 中写入：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>样式</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <style type="text/css">
        p {
            color: aqua;
        }
    </style>
</head>
<body>
    <h1>标题h1</h1>

    <p>欢迎来到极客学院：www.jikexueyuan.com</p>
</body>
</html>

刷新浏览器：

图片说明

关于颜色我们可以在 IDEA 中点击颜***块，然后选择我们想要的配色。

图片说明

最后看一下内联样式表：

在 index.html 中指定：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>样式</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <style type="text/css">
        p {
            color: aqua;
        }
    </style>
</head>
<body>
    <h1>标题h1</h1>

    <p>欢迎来到极客学院：www.jikexueyuan.com</p>

    <a style="color: chartreuse">点击我跳转到极客学院</a>
</body>
</html>

刷新浏览器：

图片说明