CSS3在HTML5中的几种使用方法
在HTML5中，可以通过多种方式引用CSS3样式表，以实现对网页元素的样式控制。以下是几种常见的引用方法：
1. 内联样式（Inline Style）
直接在HTML元素的style属性中定义CSS样式。这种方法适用于少量样式的快速定义，但不推荐用于大规模样式设置，因为会导致HTML代码混乱。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>内联样式的使用</title> </head> <body style="background-color: pink;"> <!-- 1、内联样式修饰 --> <!-- 总结：内联样式修饰时，容易冗余，需要写多个重复代码单独修饰标签 --> <!-- 假如4种CSS都修饰h1标签，如果颜色修饰不同，最后只会以内联样式的颜色为主 --> <!-- 结论：不推荐使用这种写法 --> <h1 style="color:red;">新闻标题</h1> <p style="font-size:120px;">段落</p> <h1 style="color:red;">2222</h1> <h1 style="color:red;">2222</h1> <h1 style="color:red;">2222</h1> <h1>2222</h1> </body> </html>
2. 内部样式表（Internal Style Sheet）
在HTML文档的<head>部分使用<style>标签定义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>
<!-- 2、内嵌CSS样式 -->
<!-- 方便阅读和管理CSS代码，缺点是它只能作用于HTML当前页面中，不能被另外的HTML代码使用这部分CSS -->
<!-- 如果只是单独对应当前HTML编写维护，不存在需要其他页面共用的CSS时，还是可以使用内嵌式写CSS的 -->
<style>
h1{
color:pink;
}
</style>
</head>
<body>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<p>段落</p>
</body>
</html>3. 外部样式表（External Style Sheet）
将CSS样式定义在单独的CSS文件中，并通过<link>标签将该文件链接到HTML文档中。这种方法是最常用的，因为它可以实现样式的集中管理和多个页面共享，提升代码的可维护性和复用性。
示例：
index.html页面代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 3、外部引用CSS样式表 --> <!-- 其他文件可以共用CSS的场景，推荐。企业也是用这种 --> <link rel="stylesheet" href="./css/style.css"> </head> <body> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> </body> </html>
styles.css样式代码：
body {
background-color: lightgrey;
}
h1 {
color: blue;
text-align: center;
}
p {
font-size: 20px;
}4. 引入样式表（Imported Style Sheet）
在CSS文件中使用@import规则引入另一个CSS文件。这种方法可以将多个CSS文件组织起来，但会增加HTTP请求，影响页面加载速度。
HTML参考代码【同3的引入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> <!-- 4、通过@import 导入css，导入前还是要使用外部引用css文件 --> <!-- 也是推荐的 --> <!-- <link rel="stylesheet" href="./css/new.css"> --> <link rel="stylesheet" href="./css/style.css"> </head> <body> <h1>哈哈哈</h1> <h1>哈哈哈</h1> <h1>哈哈哈</h1> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> </body> </html>
示例：
styles.css代码：
/*
ctrl + / 生成注释
通过@import指定url的方式导入多个CSS文件共用
*/
/*
多个页面共用头部，导航，底部的时候存在相同CSS =》提取出来放到一个单独的CSS文件维护.
如果用多个link引用多个css文件，反而不好维护
*/
@import url(./new.css);
p{
color:red;
}additional-styles.css代码：
h1{
color:pink;
}总结
以上是HTML5中引用CSS3的几种常见方法。选择哪种方法取决于具体的项目需求和开发习惯。对于大多数项目，推荐使用外部样式表，以便于样式的集中管理和复用。内部样式表和内联样式可以用于局部样式调整和快速测试，而引入样式表则适用于复杂项目的样式组织。
练习题：
题目：
请根据以下要求创建一个HTML文件，使用不同的方法引用CSS3样式表。
内联样式：在页面中创建一个段落（
<p>），设置其文本颜色为蓝色，字体大小为18px。内部样式表：在页面的
<head>部分使用<style>标签，设置背景颜色为浅灰色（lightgrey），所有一级标题（<h1>）的颜色为红色，并居中对齐。外部样式表：创建一个外部CSS文件，设置所有链接（
<a>）的颜色为绿色，不带下划线。将该CSS文件链接到HTML文件中。引入样式表：在外部CSS文件中，使用
@import规则引入另一个CSS文件，该文件设置所有按钮（<button>）的背景颜色为黄色，字体大小为16px。
具体要求：
创建HTML文件
index.html。创建外部CSS文件
styles.css和additional-styles.css。
提交地址：在线练习提交
参考答案：
index.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5和CSS3练习</title>
<style>
body {
background-color: lightgrey;
}
h1 {
color: red;
text-align: center;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>练习HTML5和CSS3</h1>
<p style="color: blue; font-size: 18px;">这是一个内联样式的段落。</p>
<a href="#">这是一个外部样式表的链接。</a>
<button>使用引入样式的按钮</button>
</body>
</html>style.css代码：
@import url('additional-styles.css');
a {
color: green;
text-decoration: none;
}additional-styles.css代码：
button {
background-color: yellow; font-size: 16px;
}
需要购买本课才能留言哦~