一、基础语法
CSS由选择器（Selector）和声明块（Declaration）两部分组成：
selector {
Declaration1;
Declaration2;
...
DeclarationN;
}
其中，selector为CSS属性选择器，声明块中包含了多个CSS属性及其对应的取值，每个属性之间以分号分隔（注意最后一个属性不加分号）。
下面是一个简单的例子：
p {
color: red;
font-size: 16px;
}
上面的CSS代码表示将所有的段落文本颜色设置为红色，字体大小为16像素。在HTML文件中，我们可以使用<p>标签将一个段落包裹起来，并在<head></head>标签对中引入CSS文件：
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>这是一段文本</p>
</body>
需要注意的是，CSS的注释方式为“/*...*/”。
二、选择器
选择器是用来匹配网页中元素的模式，CSS中包括了多种常见的选择器：
1. 元素选择器
元素选择器是最常用的选择器，通过HTML标记的名称匹配对应元素，如下面的例子：
p {
color: red;
}
这个例子将把所有的<p>元素的文本颜色设置为红色。
2. ID选择器
ID选择器通过元素的id属性来匹配对应元素，用“#”符号表示，如下面的例子：
#header {
background-color: yellow;
height: 100px;
}
这个例子将把id为“header”的元素的背景颜色设置为黄色，高度设置为100像素。
3. class选择器
class选择器通过元素的class属性来匹配对应元素，用“.”表示，如下面的例子：
.error {
color: red;
}
这个例子将把class为“error”的元素文本颜色设置为红色。需要注意的是，一个元素可以同时有多个class，多个class之间用空格分隔，而在CSS中，可以使用“.class1.class2”这种方式来匹配同时应用了class1和class2的元素。
三、样式属性
CSS中包括了丰富的样式属性，这里只列出了一部分最常用的样式属性：
1. color
color属性用来设置文本颜色，可取值为具体颜色名称，RGB颜色值、十六进制颜色值、HSL颜色值等，如下面的例子：
h1 {
color: #008000;
}
这个例子将把所有的<h1>元素的文本颜色设置为绿色。
2. font-size
font-size属性用来设置字体大小，可取值为具体大小值、相对大小值（如em、rem、%）等，如下面的例子：
h1 {
font-size: 24px;
}
这个例子将把所有的<h1>元素的字体大小设置为24像素。
3. font-family
font-family属性用来设置字体样式，可取值为具体字体名称、系统默认字体等，如下面的例子：
body {
font-family: "微软雅黑", sans-serif;
}
这个例子将把整个网页的字体样式设置为微软雅黑字体（如果用户电脑中没有安装微软雅黑字体，则会显示默认的sans-serif系统字体）。
四、盒子模型
CSS中的盒子模型用来表示一个元素在页面上的占据空间，它由四个部分组成，分别是内容区（Content）、内边距（Padding）、边框（Border）、外边距（Margin），如下图所示：
1. width、height
width和height属性用来设置元素的宽度和高度，分别对应着盒子模型中的内容区加边框的总宽度和总高度。如下面的例子：
div {
width: 200px;
height: 100px;
border: 2px solid #ccc;
}
这个例子将创建一个宽度为200像素、高度为100像素、边框为2像素粗的矩形盒子。
2. padding
padding属性用来设置元素的内边距，即内容区与边框之间的距离。如下面的例子：
div {
padding: 10px 20px;
border: 2px solid #ccc;
}
这个例子将创建一个边框为2像素粗、内边距为10像素上下、20像素左右的矩形盒子。
3. border
border属性用来设置元素的边框样式、粗细和颜色，分别由三个子属性border-style、border-width、border-color指定。如下面的例子：
div {
border: 2px dashed #ccc;
}
这个例子将创建一个2像素粗、实线边框为虚线、颜色为#ccc的矩形盒子。
4. margin
margin属性用来设置元素的外边距，即元素与相邻元素之间的距离。如下面的例子：
div {
margin: 20px;
border: 2px solid #ccc;
}
这个例子将创建一个边框为2像素粗、外边距为20像素的矩形盒子。
五、位置和布局
CSS提供了多种方式来进行页面布局，并可以控制元素的位置和大小：
1. position
position属性用来设置元素的定位方式，可以取值为relative、absolute、fixed、static等。其中，relative表示相对定位，absolute表示绝对定位，fixed表示固定定位，static表示默认定位。
2. top、bottom、left、right
top、bottom、left、right属性用来设置元素的位置，相对于最近的已定位祖先元素或浏览器边缘计算。如下面的例子：
#div1 {
position: absolute;
top: 50px;
left: 100px;
}
这个例子将把id为“div1”的元素相对于最近的已定位祖先元素（如果没有已定位祖先元素，则相对于body元素）定位在距离浏览器顶部50像素、距离浏览器左侧100像素的位置。
3. float
float属性用来设置元素的浮动方式，可以取值为left、right、none等。当元素浮动后，其他元素会自动围绕它排列。如下面的例子：
img {
float: left;
margin-right: 20px;
}
这个例子将把所有的img元素设置为左浮动，并在右边留出20像素的间距。
六、小结
本篇文章介绍了CSS的基础语法、选择器、样式属性、盒子模型、位置和布局等内容。掌握了这些知识后，我们就可以使用CSS轻松地为网页添加各种外观效果和布局样式，提升网站的可读性和美观度。
