常用css样式属性大全（中文注释）

CSS，即层叠样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它允许我们将样式规则与结构内容分离，使得网页设计更加灵活且易于维护。下面将详细介绍在标题和描述中提到的一些常用CSS样式属性。 一、CSS文字属性 1. `color`: 这个属性用于定义文本的颜色，例如`color: #999999;` 设置为灰色。 2. `font-family`: 它用来设置文本的字体，如`font-family: 宋体,sans-serif;` 选择宋体或无衬线字体作为默认字体。 3. `font-size`: 用于设定文本的大小，例如`font-size: 9pt;` 表示字体大小为9磅。 4. `font-style`: 可以设置文本是否为斜体，`font-style:italic;` 表示斜体。 5. `font-variant`: 控制字体显示为小型大写字母，如`font-variant: small-caps;`。 6. `letter-spacing`: 调整字符间的间距，`letter-spacing: 1pt;` 表示字符间隔为1磅。 7. `line-height`: 设置行高，如`line-height: 200%;` 表示行高为文字大小的两倍。 8. `font-weight`: 控制字体的粗细，`font-weight: bold;` 为加粗。 9. `vertical-align`: 用于元素的垂直对齐，例如`vertical-align: sub;` 使文本成为下标。 10. `text-decoration`: 用于添加或删除文本装饰，如`text-decoration: underline;` 添加下划线，`text-decoration: none;` 删除下划线。 11. `text-transform`: 改变文本的大小写，如`text-transform: uppercase;` 将所有字母转为大写。 12. `text-align`: 控制文本的水平对齐方式，有`left`（左对齐）、`right`（右对齐）、`center`（居中对齐）和`justify`（两端对齐）。 13. `vertical-align`属性还有其他值，如`top`、`bottom`、`middle`以及`text-top`和`text-bottom`，分别对应不同方向的垂直对齐。 二、CSS边框和空白 1. `padding`: 用于设置元素内部的空白，如`padding-top: 10px;` 设定上内边距为10像素。 三、CSS符号属性 1. `list-style-type`: 用于设置列表项的标记类型，包括`none`（无标记）、`decimal`（数字）、`lower-roman`（小写罗马数字）等。 2. `list-style-image`: 可以用图片作为列表项的标记，如`list-style-image: url(/dot.gif);`。 3. `list-style-position`: 控制标记的位置，`outside`表示标记在文本外，`inside`表示在文本内。 四、CSS背景样式 1. `background-color`: 设置元素的背景颜色，如`background-color: #F5E2EC;`。 2. `background`: 可以同时设置背景颜色和图片，如`background: transparent;` 设置透明背景。 3. `background-image`: 用于设置背景图片，如`background-image: url(/image/bg.gif);`。 4. `background-attachment`: 控制背景图片是否随滚动条移动，`fixed`表示固定背景。 5. `background-repeat`: 设置背景图片的重复方式，包括`repeat`（重复）、`no-repeat`（不重复）、`repeat-x`（沿X轴重复）和`repeat-y`（沿Y轴重复）。 6. `background-position`: 定义背景图片的位置，如`background-position: 90% 90%;` 表示图片位于右下角。 这些只是CSS样式属性中的一部分，实际上CSS还包含许多其他属性，如边框样式、盒模型、布局属性、过渡、动画等，它们共同构成了丰富的样式系统，帮助开发者创建出各种各样的网页效果。学习和掌握CSS，能让你更好地控制网页的外观和交互体验。