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>刷新浏览器：
颜色被更改了。
这就是引入样式的三种方式，希望大家可以掌握。
查看4道真题和解析