HTML基础：了解CSS的3种创建方法
时间：02-02来源：作者：点击数：
CSS，即层叠样式表（Cascading Style Sheets），是一种用于描述网页样式和布局的标记语言。它通过定义样式规则来控制网页元素的外观和排版，包括文字大小、颜色、边距、背景等，从而实现页面的美化和布局控制。
CSS 类似于给衣服设计款式和尺寸。HTML 负责创建网页的结构，就像制作衣服的基本模型一样。CSS 则为 HTML 添加美观、统一的外观，使网页更具吸引力和可读性。
接下来，咱们来聊聊它的 3 种创建方法。
CSS 的 3 种创建方法
1、内联样式（Inline Styles）
内联样式是将 CSS 样式直接写在 HTML 元素的 style 属性中，它的优先级最高，会覆盖外部和内部样式表定义的样式。
<p style="color: red; font-size: 16px;">这是一个内联样式的段落。</p>
2、嵌入样式（Embedded Styles）
嵌入样式是将 CSS 样式写在 HTML 文档的<head>标签内的<style>标签中，它作用于整个文档，但优先级低于内联样式。
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个嵌入样式的段落。</p>
</body>
3、外部样式表（External Stylesheet）
外部样式表是将 CSS 样式定义在一个独立的.css 文件中，然后通过<link>标签将其引入到 HTML 文档中，它可以被多个页面共享，并且优先级最低。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>External CSS Example</title>
<!-- 在<head>标签中引入外部样式表 -->
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!-- 示例：修改链接颜色 -->
<a href="#">Custom Link</a>
<!-- 示例：修改标题背景颜色 -->
<h1>Custom Heading</h1>
</body>
</html>
CSS(styles.css):
/* 外部样式表中定义样式 */
a {
color: #ff69b4; /* 修改链接颜色为粉色 */
}
h1 {
background-color: #6495ed; /* 修改标题背景颜色为蓝色 */
}
总结
本次只是简要介绍 CSS 的创建方法，因为后续的案例需要加样式，会用到上述场景，这 3 种不同场景，将在后续的 CSS 章节中详细解释。
方便获取更多学习、工作、生活信息请关注本站微信公众号
湘公网安备 43102202000103号