本节我们精心整理了一份简短的 CSS 的范例列表

CSS背景

1. 设置页面的背景颜色

2. 设置不同元素的背景颜色

3. 设置一个图像作为页面的背景

4. 错误的背景图片

5. 如何在水平方向重复背景图像

6. 如何定位背景图像

7. 一个固定的背景图片（这个图片不会随页面的其余部分滚动）

8. 在一个声明的所有背景属性

9. 高级的背景例子

有关 CSS 背景属性的知识，可以访问 CSS 背景属性

CSS 文本

1. 设置不同元素的文本颜色

2. 文本对齐

3. 移除链接下划线

4. 装饰文字

5. 控制文本中的字母

6. 缩进文本

7. 指定了字符之间的空间

8. 指定了行与行之间的空间

9. 设置元素的文本方向

10. 增加单词之间的空格

11. 在一个元素内禁用文字换行

12. 内部文字图像的垂直对齐

有关更多 CSS 文本的知识，可以访问我们的 CSS Text 属性

CSS 字体

1. 设置文本的字体

2. 设置字体大小

3. 用px设置的字体的大小

4. 用em设置的字体的大小

5. 用百分比和em设置字体的大小

6. 设置字体样式

7. 设置字体的异体

8. 设置字体的粗细

9. 在一个声明的所有字体属性

有关更多 CSS 字体的知识，可以访问我们的 CSS 字体

CSS 链接

1. 为访问/未访问链接添加不同的颜色

2. 在链接上使用文本装饰

3. 指定链接的背景颜色

4. 超链接添加其他样式

5. 高级 - 创建链接框

有关更多关于 CSS 链接样式方面的知识，可以访问我们的 CSS 链接

CSS 列表

1. 列表中所有不同的列表项标记

2. 设置作为列表项标记的图像

3. 使用 cross browser 解决方案设置一个列表项标记的图像

4. 在一个声明中的所有列表属性

有关更多关于 CSS 列表属性的知识，可以访问我们的 CSS 列表属性

CSS 表格

1. 指定一个表的 th，td 元素和黑色边框

2. 使用border-collapse

3. 指定表格的宽度和高度

4. 设置内容的水平对齐方式（文本对齐）

5. 设置内容的垂直对齐（垂直对齐）

6. 指定TH和TD元素的填充

7. 指定表格边框的颜色

8. 设置表格标题的位置

9. 创建一个奇特的表

有关更多 CSS 表格属性的知识，可以访问我们的 CSS 表格属性

CSS 盒模型

1. 指定元素的总宽度为250像素

2. 使用 cross browser 解决方案指定元素的总宽度为 250 像素的

有关更多 CSS 盒模型的知识，可以访问我们的 CSS 盒模型

CSS 边框

1. 设置四个边框的宽度

2. 设置上边框的宽度

3. 设置底部边框的宽度

4. 设置左边框的宽度

5. 设置右边框的宽度

6. 设置四个边框的样式

7. 设置上边框的样式

8. 设置下边框的样式

9. 设置左边框的样式

10. 设置右边框的样式

11. 设置四个边框的颜色

12. 设置上边框的颜色

13. 设置下边框的颜色

14. 设置左边框的颜色

15. 设置右边框的颜色

16. 在一个声明中的所有边框属性

17. 每边设置不同的边框

18. 在一个声明中的所有顶部边框属性

19. 在一个声明中的所有下边框属性

20. 在一个声明中的所有左边框属性

21. 在一个声明中的所有右边框属性

有关更多 CSS 边框的知识，可以访问我们的 CSS 边框属性

CSS outline 轮廓

1. 围绕一个元素（outline），绘制一条线

2. 设置轮廓的样式

3. 设置轮廓颜色

4. 设置轮廓的宽度

有关更多 CSS outline 的知识，可以访问我们的 CSS outline 属性

CSS 外边距 margin

1. 指定一个元素的边距

2. 边距缩写属性

3. 文本顶部边距设置的值使用厘米

4. 使用百分比值设置文本的底部边缘

5. 使用厘米值设置文本的左边距

有关更多 CSS margin 外边距的知识，可以访问我们的 CSS margin 属性

CSS 内边距 padding

1. 设置元素的左部填充

2. 设置元素的右部填充

3. 设置元素的顶部填充

4. 设置元素的底部填充

5. 在一个声明中的所有填充属性

有关更多 CSS 内边距的知识，可以访问我们的 CSS padding 属性

CSS 分组选择器

1. CSS 分组选择器

有关更多 CSS 分组选择器的知识，可以访问我们的 CSS 分组选择器

CSS 嵌套选择器

1. 嵌套选择器

有关更多 CSS 嵌套选择器的知识，可以访问我们的 CSS 嵌套选择器

CSS 尺寸

1. 使用像素值设置图像的高度

2. 使用百分比设置图像的高度

3. 使用像素值来设置元素的宽度

4. 使用百分比来设置元素的宽度

5. 设置元素的最大高度

6. 使用像素值设置元素的最大宽度

7. 使用百分比来设置元素的最大宽度

8. 设置元素的最低高度

9. 使用像素值来设置元素的最小宽度

10. 使用百分比来设置元素的最小宽度

有关更多 CSS 尺寸的知识，可以访问我们的 CSS 尺寸

CSS 显示

1. 如何隐藏一个元素(visibility:hidden)

2. 如何不显示元素(display:none)

3. 如何显示一个元素的内联元素

4. 如何显示一个元素的块元素

5. 如何使用表格的 collapse 属性

有关更多 CSS display 的知识，可以访问我们的 CSS display

CSS 定位

1. 元素相对浏览器窗口的位置

2. 元素的相对定位

3. 元素的绝对定位

4. 重叠的元素

5. 设置元素的形状

6. 如何使用滚动条来显示元素内溢出的内容

7. 如何设置浏览器自动溢出处理

8. 使用像素值设置图像的顶部

9. 使用像素值设置图像的底部

10. 使用像素值设置图像的左边

11. 使用像素值设置图像的右边

12. 更改光标

有关更多 CSS 定位的知识，可以访问我们的 CSS 定位

CSS 浮动

1. 简单的使用 float 属性

2. 为图像添加边框和边距并浮动到段落的左侧

3. 标题和图片向右侧浮动

4. 让段落的第一个字母浮动到左侧

5. 使用float属性创建一个图片廊

6. 开启float - clear属性

7. 创建一个水平菜单

8. 创建一个没有表格的网页

有关更多 CSS 浮动的知识，可以访问我们的 CSS 浮动

CSS 对齐元素

1. 使用 margin 的中间调整

2. 左/右位置对齐

3. 使用Crossbrowser解决方案，设置左/右位置对齐

4. 左/右对齐，浮动

5. 使用 cross browser 解决方案，设置左/右位置对齐，浮动

有关更多 CSS 对齐元素的知识，可以访问我们的 CSS 对齐元素

CSS 生成的内容

1. 把括号内的 URL 用 content 属性插入到每个链接后面

2. 章节和分节的编号是"第1节"，"1.1"，"1.2"等

3. quotes 属性指定了引号

CSS 伪类

1. 添加不同颜色的超链接

2. 给超链接添加其他样式

3. 使用：焦点

4. :first-child - 匹配了第一个p元素

5. :first-child - 匹配了第一个p元素中的I元素

6. :first-child - 匹配了第一个p元素中的所有I元素

7. 使用:lang

有关更多 CSS 伪类的知识，可以访问我们的 CSS 伪类

CSS 伪元素

1. 把文本的第一个字母设为特殊的字母

2. 把第一行文字设置为特殊

3. 把第一行文字的第一个字母设置为特殊

4. 使用：在一个元素之前插入一些内容

5. 使用：在一个元素之后插入一些内容

有关更多 CSS 伪元素的知识，可以访问我们的 CSS 伪元素

CSS 图片廊

1. 图片廊

有关更多 CSS 图片廊应用的知识，可以访问我们的 CSS 图片廊

CSS图像的不透明度

1. 创建透明图像 - 鼠标悬停效果

2. 创建一个背景图像与文本的透明框

有关更多 CSS 图像的不透明度的知识，可以访问我们的 CSS 图像的不透明度

CSS 图像拼合

1. 图像拼合

2. 图像拼合-导航列表

3. 悬停效果与图像拼合

有关更多 CSS 图像拼合的知识，可以访问我们的 CSS 图像拼合

CSS 属性选择器

1. 选择具有title属性的元素

2. 选择标题=一个特定值的元素

3. 选择标题=一个特定值的元素(使用（~）分隔属性和值)

4. 选择标题=一个特定值的元素(使用（|）分隔属性和值)

有关更多 CSS 属性选择器的知识，可以访问我们的 CSS 属性选择器