CSS 参考手册学习笔记
前言
CSS（层叠样式表）是一种用于描述网页外观和布局的样式语言。CSS 可以与 HTML 或 XHTML 结合使用，可以通过调整字体、颜色、间距等设置来实现网页美化的效果。本文档将详细介绍 CSS 的各种属性和用法。
选择器
CSS 的选择器用于指定需要应用样式的 HTML 元素。以下是常用的选择器：
- 标签选择器：指定 HTML 标签名作为选择器，如
p。 - 类选择器：以点号（.）作为前缀，指定 HTML 中具有相同类名的元素作为选择器，如
.text。 - ID 选择器：以井号（#）作为前缀，指定 HTML 中具有相同 ID 的元素作为选择器，如
#header。 - 属性选择器：以方括号（[]）包裹属性名和属性值，指定具有指定属性值的元素作为选择器，如
[href="https://www.baidu.com"]。
盒模型
盒模型是指 HTML 元素所占空间的模型，每个盒模型由四个基本部分组成：内容区域、内边距、边框和外边距。以下是盒模型的属性：
width/height：指定元素的宽度和高度。padding：指定内容区域周围的内边距大小。border：指定边框的大小、样式和颜色。margin：指定元素周围的外边距大小。
布局
布局是指 HTML 文档中各个元素在页面中的排布方式。CSS 提供了多种布局方式，如以下所示：
float：指定元素沿页面的左或右浮动，并允许其他元素环绕其周围。position：指定元素在文档流中的定位方式，有static、relative、absolute和fixed四种位置值。display：指定元素的显示方式，有block、inline和inline-block三种属性值。flex：指定元素在弹性容器中的布局方式，有flex-direction、flex-wrap和justify-content三种属性值。
字体与文本
字体和文本是网页中最基本的元素之一，CSS 提供了多种属性用于调整字体和文本的样式，如以下所示：
font-family：指定字体族名称，多个候选字体间使用逗号分隔。font-size：指定字体大小，可以使用相对单位（如 em、rem）和绝对单位（如 px、pt）。font-style：指定字体风格，有normal、italic和oblique三种属性值。text-decoration：指定文本修饰，有none、underline、overline、line-through和blink五种属性值。
实例
以下是一个具体的 HTML 文件，使用 CSS 实现了简单的页面美化效果：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 参考手册学习笔记</title>
<style>
h1 {
font-size: 36px;
text-align: center;
color: #333;
}
p {
font-size: 18px;
line-height: 1.5;
color: #666;
}
.box {
width: 300px;
height: 200px;
margin: 0 auto;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 2px 2px 5px #ccc;
}
</style>
</head>
<body>
<h1>CSS 参考手册学习笔记</h1>
<div class="box">
<p>本文档将详细介绍 CSS 的各种属性和用法。</p>
<p>CSS 是一种用于描述网页外观和布局的样式语言。</p>
</div>
</body>
</html>
以上代码实现了一个标题居中，两个段落文字和一个带边框的盒子居中显示的效果。