1. 引入CSS的方式
在HTML中，我们可以通过以下几种方式引入CSS：
1.1 内联样式
内联样式是将CSS代码直接写在HTML元素的style属性中。这种方式的优点是可以直接修改某个元素的样式，但缺点是不利于代码的复用和维护。
示例：
<p style="color: red; font-size: 20px;">这是一个红色的段落。</p>1.2 内部样式表
内部样式表是将CSS代码写在HTML文档的<head>标签内的<style>标签中。这种方式适用于较小的项目，但同样不利于代码的复用和维护。
示例：
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>这是一个红色的段落。</p>
</body>
</html>1.3 外部样式表
外部样式表是将CSS代码写在一个单独的文件中，然后在HTML文档中通过<link>标签引入。这种方式有利于代码的复用和维护，是最常用的方式。
示例：
创建一个名为style.css的文件，内容如下：
p {
color: red;
font-size: 20px;
}在HTML文档中引入：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>这是一个红色的段落。</p>
</body>
</html>2. CSS选择器
CSS选择器是用来选取HTML元素并应用样式的工具。常用的CSS选择器有以下几种：
2.1 元素选择器
元素选择器是通过HTML元素的名称来选取元素，例如p、div等。示例：
p {
color: red;
font-size: 20px;
}2.2 ID选择器
ID选择器是通过元素的ID来选取元素，ID是唯一的。示例：
<p id="red-paragraph">这是一个红色的段落。</p>#red-paragraph {
color: red;
font-size: 20px;
}2.3 类选择器
类选择器是通过元素的类名来选取元素，类名可以是多个。示例：
<p class="red-text">这是一个红色的段落。</p>.red-text {
color: red;
font-size: 20px;
}2.4 属性选择器
属性选择器是通过元素的属性和属性值来选取元素。示例：
<a href="https://www.example.com">这是一个链接</a>a[href="https://www.example.com"] { /* 这里可以设置链接的样式 */ }原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/128511.html
微信扫一扫 