CSS 实例
提示：以下例子中的 CSS 代码均位于 HTML 的 head 部分，这样做的目的是为了利于演示例子本身。在实际的开发中，使用 CSS 最好的方式是引用外部样式表。
CSS 背景实例：
- 设置背景颜色
- 本例演示如何为元素设置背景颜色。
- 设置文本的背景颜色
- 本例颜色如何设置部分文本的背景颜色。
- 将图像设置为背景
- 本例演示如何将图像设置为背景。
- 如何重复背景图像
- 本例演示如何重复背景图像。
- 如何在垂直方向重复背景图像
- 本例演示如何垂直地重复背景图像。
- 如何在水平方向重复背景图像
- 本例演示如何水平地重复背景图像。
- 如何仅显示一次背景图像
- 本例演示如何仅显示一次背景图像。
- 如何放置背景图像
- 本例演示如何在页面上放置背景图像。
- 如何使用%来定位背景图像
- 本例演示如何使用百分比来在页面上定位背景图像。
- 如何使用像素来定位背景图像
- 本例演示如何使用像素来在页面上定位背景图像。
- 如何设置固定的背景图像
- 本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。
- 所有背景属性在一个声明之中
- 本例演示如何使用简写属性来将所有背景属性设置在一个声明之中。
CSS 文本实例：
- 设置文本颜色
- 本例演示如何设置文本的颜色。
- 设置文本的背景颜色
- 本例颜色如何设置部分文本的背景颜色。
- 规定字符间距
- 本例演示如何增加或减少字符间距。
- 使用百分比设置行间距
- 本例演示如何使用百分比值来设置段落中的行间距。
- 使用像素值设置行间距
- 本例演示如何使用像素值来设置段落中的行间距。
- 使用数值来设置行间距
- 本例演示如何使用一个数值来设置段落中的行间距。
- 对齐文本
- 本例演示如何对齐文本。
- 修饰文本
- 本例演示如何向文本添加修饰。
- 缩进文本
- 本例演示如何缩进文本首行。
- 控制文本中的字母
- 本例演示如何控制文本中的字母。
- 在元素中禁止文本折行
- 本例演示如何禁止在元素中的文本折行。
- 增加单词间距
- 本例演示如何增加段落中单词间的距离。
CSS 字体(font)实例：
CSS 边框(border)实例：
- 所有边框属性在一个声明之中
- 本例演示用简写属性来将所有四个边框属性设置于同一声明中。
- 设置四边框样式
- 本例演示如何设置四边框样式。
- 设置每一边的不同边框
- 本例演示如何在元素的各边设置不同的边框。
- 所有边框宽度属性在一个声明之中
- 本例演示用简写属性来将所有边框宽度属性设置于同一声明中。
- 设置四个边框的颜色
- 本例演示如何设置四个边框的颜色。可以设置一到四个颜色。
- 所有下边框属性在一个声明中
- 本例演示用简写属性来将所有下边框属性设置在同一声明中。
- 设置下边框的颜色
- 本例演示如何设置下边框的颜色。
- 设置下边框的样式
- 本例演示如何设置下边框的样式。
- 设置下边框的宽度
- 本例演示如何设置下边框的宽度。
- 所有左边框属性在一个声明之中
- 所有左边框属性在一个声明之中
- 设置左边框的颜色
- 本例演示如何设置左边框的颜色。
- 设置左边框的样式
- 本例演示如何设置左边框的样式。
- 设置左边框的宽度
- 本例演示如何设置左边框的宽度。
- 所有右边框属性在一个声明之中
- 本例演示一个简写属性，用于把所有右边框属性设置在一条声明中。
- 设置右边框的颜色
- 本例演示如何设置右边框的颜色。
- 设置右边框的样式
- 本例演示如何设置右边框的样式。
- 设置右边框的宽度
- 本例演示如何设置右边框的宽度。
- 所有上边框属性在一个声明之中
- 本例演示用简写属性来将所有上边框属性设置于同一声明之中。
- 设置上边框的颜色
- 本例演示如何设置上边框的颜色。
- 设置上边框的样式
- 本例演示如何设置上边框的样式。
- 设置上边框的宽度
- 本例演示如何设置上边框的宽度。
CSS 外边距 (margin) 实例：
- 设置文本的左外边距
- 本例演示如何设置文本的左外边距。
- 设置文本的右外边距
- 本例演示如何设置文本的右外边距。
- 设置文本的上外边距
- 本例演示如何设置文本的上外边距。
- 设置文本的下外边距
- 本例演示如何设置文本的下外边距。
- 所有的外边距属性在一个声明中。
- 本例演示如何将所有的外边距属性设置于一个声明中。
CSS 内边距 (padding) 实例：
- 所有填充属性在一个声明中
- 本例演示使用简写属性将所有的填充属性设置于一个声明中，可以有一到四个值。
- 设置下内边距 1
- 本例演示如何使用厘米值来设置单元格的下内边距。
- 设置下内边距 2
- 本例演示如何使用百分比值来设置单元格的下内边距。
- 设置左内边距 1
- 本例演示如何使用厘米值来设置单元格的左内边距。
- 设置左内边距 2
- 本例演示如何使用百分比值来设置单元格的左内边距。
- 设置右内边距 1
- 本例演示如何使用厘米值来设置单元格的右内边距。
- 设置右内边距 2
- 本例演示如何使用百分比值来设置单元格的右内边距。
- 设置上内边距 1
- 本例演示如何使用厘米值来设置单元格的上内边距。
- 设置上内边距 2
- 本例演示如何使用百分比值来设置单元格的上内边距。
CSS 列表实例：
- 在无序列表中的不同类型的列表标记
- 本例演示在CSS中不同类型的列表项标记。
- 在有序列表中不同类型的列表项标记
- 本例演示在CSS中不同类型的列表项标记。
- 所有的列表样式类型
- 本例演示在CSS中所有不同类型的列表项标记。
- 将图像作为列表项标记
- 本例演示如何将图像作为列表项标记。
- 放置列表标记
- 本例演示在何处放置列表标记。
- 在一个声明中定义所有的列表属性
- 本例演示将所有针对列表的属性设置于一个简写属性。
CSS 表格实例：
- 设置表格的布局
- 本例演示如何设置表格的布局。
- 显示表格中的空单元
- 本例演示是否显示表格中的空单元。（请在非 IE 浏览器中浏览）
- 合并表格边框
- 本例演示是否把表格边框显示为一条单独的边框，还是像标准的 HTML 中那样分开显示。
- 设置表格边框之间的空白
- 本例演示如何设置单元格边框之间的距离。（请在非 IE 浏览器中浏览）
- 设置表格标题的位置
- 本例演示如何定位表格的标题。（请在非 IE 浏览器中浏览）
轮廓（Outline） 实例：
CSS 尺寸 (Dimension) 实例：
- 使用像素值设置图像的高度
- 本例演示如何使用像素值设置元素的高度。
- 使用百分比设置图像的高度
- 本例演示如何使用百分比值来设置元素的高度。
- 使用像素值来设置元素的宽度
- 本例演示如何使用像素值来设置元素的宽度。
- 使用百分比来设置元素的宽度
- 本例演示如何使用百分比值来设置元素的宽度。
- 设置元素的最大高度
- 本例演示如何设置一个元素的最大高度。
- 使用像素值来设置元素的最大宽度
- 本例演示如何使用像素值来设置元素的最大高度。
- 使用百分比来设置元素的最大宽度
- 本例演示如何使用百分比值来设置元素的最大高度。
- 使用像素值来设置元素的最小高度
- 本例演示如何使用像素值来设置元素的最小高度。
- 使用像素值来设置元素的最小宽度
- 本例演示如何使用像素值来设置元素的最小宽度。
- 使用百分比来设置元素的最小宽度
- 本例演示如何使用百分比值来设置元素的最小宽度。
- 使用百分比设置行间距
- 本例演示如何使用百分比值来设置段落中的行间距。
- 使用像素值设置行间距
- 本例演示如何使用像素值来设置段落中的行间距。
- 使用数值来设置行间距
- 本例演示如何使用一个数值来设置段落中的行间距。
CSS 分类 (Classification) 实例：
- 如何把元素显示为内联元素
- 本例演示如何把元素显示为内联元素。
- 如何把元素显示为块级元素
- 本例演示如何把元素显示为块级元素。
- 浮动属性的简单应用
- 使图像浮动于一个段落的右侧。
- 将带有边框和边界的图像浮动于段落的右侧
- 使图像浮动于段落的右侧。向图像添加边框和边界。
- 带标题的图像浮动于右侧
- 使带有标题的图像浮动于右侧
- 使段落的首字母浮动于左侧
- 使段落的首字母浮动于左侧，并向这个字母添加样式。
- 创建水平菜单
- 使用具有一栏超链接的浮动来创建水平菜单。
- 创建无表格的首页
- 使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页。
- 定位：相对定位
- 本例演示如何相对于一个元素的正常位置来对其定位。
- 定位：绝对定位
- 本例演示如何使用绝对值来对元素进行定位。
- 定位：固定定位
- 本例演示如何相对于浏览器窗口来对元素进行定位。
- 如何使元素不可见
- 本例演示如何使元素不可见。你希望元素被显示出来，还是不呢？
- 把表格元素设置为 collapse（请在非 IE 的浏览器中查看）
- 本例演示如何使表格元素叠加？
- 改变光标
- 本例演示如何改变光标。
- 清除元素的侧面
- 本例演示如何使用清除元素侧面的浮动元素。
CSS 定位 (Positioning) 实例：
- 定位：相对定位
- 本例演示如何相对于一个元素的正常位置来对其定位。
- 定位：绝对定位
- 本例演示如何使用绝对值来对元素进行定位。
- 定位：固定定位
- 本例演示如何相对于浏览器窗口来对元素进行定位。
- 设置元素的形状
- 本例演示如何设置元素的形状。此元素被剪裁到这个形状内，并显示出来。
- 如何使用滚动条来显示元素内溢出的内容
- 本例演示当元素内容太大而超出规定区域时，如何设置溢出属性来规定相应的动作。
- 如何隐藏溢出元素中溢出的内容
- 本例演示在元素中的内容太大以至于无法适应指定的区域时，如何设置 overflow 属性来隐藏其内容。
- 如何设置浏览器来自动地处理溢出
- 本例演示如何设置浏览器来自动地处理溢出。
- 垂直排列图象
- 本例演示如何在文本中垂直排列图象。
- Z-index
- Z-index可被用于将在一个元素放置于另一元素之后。
- Z-index
- 上面的例子中的元素已经更改了Z-index。
- 使用固定值设置图像的上边缘
- 本例演示如何使用固定值设置图像的上边缘。
- 使用百分比设置图像的上边缘
- 本例演示如何使用百分比值设置图像的上边缘。
- 使用像素值设置图像的底部边缘
- 本例演示如何使用像素值设置图像的底部边缘。
- 使用百分比设置图像的底部边缘
- 本例演示如何使用百分比值设置图像的底部边缘。
- 使用固定值设置图像的左边缘
- 本例演示如何使用固定值设置图像的左边缘。
- 使用百分比设置图像的左边缘
- 本例演示如何使用百分比值设置图像的左边缘。
- 使用固定值设置图像的右边缘
- 本例演示如何使用固定值设置图像的右边缘。
- 使用百分比设置图像的右边缘
- 本例演示如何使用百分比值设置图像的右边缘。
CSS 伪类 (Pseudo-classes)实例：
- 超链接
- 本例演示如何向文档中的超链接添加不同的颜色。
- 超链接 2
- 本例演示如何向超链接添加其他样式。
- 超链接：:focus 的使用
- 本例演示如何使用 :focus 伪类（无法在 IE 中工作）。
- :first-child（首个子对象）
- 本例演示 :first-child 伪类的用法。
- :lang（语言）
- 本例演示 :lang 伪类的用法。