- 内联样式表（Inline Styles）
内联样式是将CSS样式直接写在HTML元素内部的方式。通过在HTML元素的style属性中添加CSS样式规则，可以直接改变该元素的属性。
<p style="color: red; font-size: 18px;">这是一个红色的段落。</p>- 内部样式表（Internal Style Sheet）
内部样式表是将CSS样式写在HTML文档的<head>标签内的<style>标签中。这种方式适用于对整个页面的样式进行统一设置。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个段落。</p>
</body>
</html>- 外部样式表（External Style Sheet）
外部样式表是将CSS样式写在一个单独的外部文件中，然后在HTML文档中使用<link>标签引入该文件。这种方式可以使CSS样式与HTML内容分离，便于维护和复用。
首先，创建一个名为styles.css的CSS文件：
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}然后，在HTML文档中使用<link>标签引入该文件：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个段落。</p>
</body>
</html>- 使用CSS选择器（CSS Selectors）连接CSS样式表
CSS选择器用于选择HTML元素并应用相应的样式。常用的CSS选择器有元素选择器、类选择器、ID选择器等。通过合理地使用CSS选择器，可以更精确地控制页面元素的样式。例如：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1 class="title">欢迎来到我的网站！</h1>
<p id="paragraph">这是一个段落。</p>
</body>
</html>在styles.css文件中，可以使用类选择器和ID选择器为这些元素添加样式：
.title {
color: white;
text-align: center;
}
#paragraph {
font-family: verdana;
font-size: 20px;
}原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/127113.html
微信扫一扫 