📅 最后修改于: 2023-12-03 15:30:12.981000 🧑 作者: Mango
CSS（层叠样式表）是一种用于描述网页样式和布局的语言。通过CSS，程序员可以通过选择器和属性来控制HTML元素的样式和布局。
CSS的相对位置是最关键的。CSS规则可以位于HTML文档中的 <head> 部分或者在外部的CSS文件中。层叠（叠加）指的是不同来源的CSS规则在页面上相互影响，从而创建最终的样式外观。
CSS可以直接写在HTML的头部中，也可以通过外部样式表的方式来引入。
在HTML标签中通过 style 属性来定义CSS样式。
<p style="color: red; font-size: 18px;">这是一个用行内样式定义的段落</p>
在HTML文件中通过 <style> 标签来定义CSS样式。
<head>
<style type="text/css">
p {
color: red;
font-size: 18px;
}
</style>
</head>
外部 CSS 文件通过 <link> 标签和 <href> 属性来加载，在HTML文件中引用。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
CSS选择器是一种可以选择HTML元素的方法，可以使用各种方式来定位HTML元素，例如标签名、类名、ID、属性等等。
常见的CSS选择器有：
/* 元素选择器 */
p {
color: red;
}
/* 类选择器 */
.some-class {
color: green;
}
/* ID选择器 */
#some-id {
color: blue;
}
/* 属性选择器 */
a[target="_blank"] {
color: purple;
}
CSS提供了许多属性，可以用来控制页面上的元素样式和布局，例如：
| 属性 | 描述 | |---------|----------------------| | color | 字体颜色 | | font-size | 字体大小 | | font-weight | 字体粗细度 | | background-color | 背景颜色 | | border | 边框 | | margin | 外边距 | | padding | 内边距 |
p {
color: red;
font-size: 18px;
font-weight: bold;
background-color: yellow;
border: 2px solid black;
margin: 10px;
padding: 20px;
}
CSS可以用来控制HTML页面的样式和布局，通过正确使用 CSS 选择器和属性，开发人员可以轻松地定制每个元素的外观和位置。同时，为了更好地管理代码，应尽可能将CSS样式外部化，并使用外部样式表以跨网站共享样式。