1. CSS基础语法
CSS（Cascading Style Sheet）是一种用于描述页面样式的语言。HTML 负责页面的语义部分，而 CSS 则通过样式来为 HTML 增添一些欧蓝辞。 CSS 语法由选择器与声明构成。选择器通常指 HTML 元素，而声明则是键值对（key-value pair），用来指定这个元素的某个样式属性以及属性值。CSS 中的注释用 "/* ... */" 包裹起来，而不是 "//"。
1.1 选择器
选择器是用来匹配 HTML 元素的一种方式。常用的选择器有：
标签选择器：通过 HTML 标签名来匹配元素。例如：pre、code、h1 等。
ID 选择器：通过 HTML 元素的 id 属性来匹配元素。例如：#myId。
类选择器：通过 HTML 元素的 class 属性来匹配元素。例如：.myClass。
属性选择器：根据 HTML 元素的属性来匹配元素。例如：input[type='text']。
后代选择器：通过元素的嵌套关系来匹配元素。例如：ul li。
伪类选择器：指元素的某种状态。例如：a:hover、.myClass:first-child。
下面这个例子展示了如何通过 ID 选择器来定义元素的样式：
#myId {
background-color: #F00;
color: #FFF;
}
这段 CSS 代码指定了 id 属性为 "myId" 的元素的背景色为红色、字体颜色为白色。在 HTML 中，可以这样定义一个 ID 为 "myId" 的元素：
<div id="myId">
<p>这是一个 id 为 myId 的 div 元素。</p>
</div>
1.2 声明
在 CSS 中声明就是指样式属性和属性值，通过键值对来表示。例如：
font-size: 16px;
color: #333;
这段 CSS 代码定义了字体大小为 16px、文字颜色为黑色。要注意的是，CSS 的属性名是不区分大小写的，但是属性值是区分大小写的。
2. 常用样式属性
以下列出了一些常用的样式属性及其用法。
2.1 字体样式
字体样式是网页设计中比较常见、也比较重要的一环。下面列举了几个常用的字体样式属性：
2.1.1 font-family
font-family 属性用于设置字体。例如：
font-family: 微软雅黑, sans-serif;
这段代码指定了字体为 "微软雅黑"，如果电脑上没有安装这种字体，那么浏览器会自动根据操作系统的设置选择其他可用的字体。"sans-serif" 是一个通用的字体族名，如果第一个字体不可用，浏览器就会选择该字体族中的其他字体。
2.1.2 font-size
font-size 属性用于设置字体的大小。大小可以用像素（px）、点（pt）、em、百分比等单位指定。例如：
font-size: 16px;
这段代码指定了字体大小为 16px。
2.1.3 font-weight
font-weight 属性用于设置字体的粗细。可以取值为 normal、bold、bolder、lighter 或者数值（100~900）。例如：
font-weight: bold;
这段代码指定了字体粗细为加粗。
2.1.4 font-style
font-style 属性用于设置字体的样式。可选值为 normal、italic、oblique。例如：
font-style: italic;
这段代码指定了字体样式为斜体。
2.2 文本样式
下面列举了一些常用的文本样式属性。
2.2.1 color
color 属性用于设置文字颜色。例如：
color: #333;
这段代码指定了文字颜色为黑色。
2.2.2 text-align
text-align 属性用于设置文字对齐方式。可选值为 left、right、center、justify。例如：
text-align: center;
这段代码指定了文字居中对齐。
2.2.3 text-decoration
text-decoration 属性用于设置文本的修饰线。可选值为 none、underline、overline、line-through、blink。例如：
text-decoration: underline;
这段代码指定了下划线修饰线。
2.2.4 line-height
line-height 属性用于设置行高。例如：
line-height: 1.5;
这段代码指定了行高为 150%。
2.3 盒子模型
CSS 中的盒子模型是用于布局 HTML 页面的一种模型。每个 HTML 元素都是一个盒子，其大小、边框、外边距和内边距都可以通过 CSS 设置。盒子模型可以分为两种：W3C 标准盒模型和 IE 盒模型。
2.3.1 W3C 标准盒模型
W3C 标准盒模型是 CSS 中的默认盒模型，盒子的总宽度等于 content + padding + border。例如：
box-sizing: content-box;
这段代码指定了盒子使用 W3C 标准盒模型。
下面是一个使用 W3C 标准盒模型的例子：
.box {
width: 300px;
height: 200px;
padding: 20px;
border: 1px solid black;
}
这个代码定义了一个宽为 300 像素、高为 200 像素的 div 元素，其内边距为 20px，边框宽度为 1px。此时，这个盒子的总宽度为 300 + 2×20 + 2×1 = 342px，总高度为 200 + 2×20 + 2×1 = 242px。
2.3.2 IE 盒模型
IE 盒模型中，盒子的总宽度等于 content + border + padding。要指定 IE 盒模型，需要设置 box-sizing 为 border-box。例如：
box-sizing: border-box;
这段代码指定了盒子使用 IE 盒模型。
下面是一个使用 IE 盒模型的例子：
.box {
width: 300px;
height: 200px;
padding: 20px;
border: 1px solid black;
box-sizing: border-box;
}
在这个例子中，这个盒子的总宽度等于 300px，总高度等于 200px。
2.4 布局样式
下面列举了一些常用的布局样式属性。
2.4.1 display
display 属性用于设置元素的显示类型。常用的值有 block、inline、none、flex。例如：
display: block;
这段代码指定了元素为块级元素。
2.4.2 position
position 属性用于设置元素的定位方式。常用的值有 static、relative、absolute、fixed。例如：
position: relative;
这段代码指定了元素相对于其默认位置进行定位。
2.4.3 top/right/bottom/left
这些属性用于调整元素在页面中的位置。可加上 px、em、百分比等单位。例如：
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
这段代码指定了元素的定位方式为绝对定位，距离页面顶部 100px，左右居中。
2.4.4 float
float 属性用于设置元素的浮动方式。浮动元素可以向左或右漂浮，周围的元素会重新排列，以适应浮动元素的位置。例如：
float: left;
这段代码指定元素向左浮动。
3. 总结
CSS 是一种具有强大功能的样式表语言。开发者可以通过 CSS 设置元素的布局、字体、颜色等样式，从而为页面增添更为绚丽的装饰效果。本文介绍了 CSS 中常用的一些样式属性，包括字体样式、文本样式、盒子模型、布局样式等。