CSS 实例

显示全部楼层 · 发表于 11-28-2011 05:46

提示：以下例子中的 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）实例：

在元素周围画线: 本例演示使用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 伪类的用法。

例子解释

CSS 伪元素 (Pseudo-elements)实例：

制作首字母特效: 本例演示如何向文本的首字母添加特效。
制作首行特效: 本例演示如何向文本的首行添加特效。

例子解释

帐号		自动登录	找回密码
密码			注册

[DIV+CSS] CSS 实例

CSS 背景实例：

CSS 文本实例：

CSS 字体(font)实例：

CSS 边框(border)实例：

CSS 外边距 (margin) 实例：

CSS 内边距 (padding) 实例：

CSS 列表实例：

CSS 表格实例：

轮廓（Outline）实例：

CSS 尺寸 (Dimension) 实例：

CSS 分类 (Classification) 实例：

CSS 定位 (Positioning) 实例：

CSS 伪类 (Pseudo-classes)实例：

CSS 伪元素 (Pseudo-elements)实例：

相关帖子

[DIV+CSS] CSS 实例

CSS 背景实例：

CSS 文本实例：

CSS 字体(font)实例：

CSS 边框(border)实例：

CSS 外边距 (margin) 实例：

CSS 内边距 (padding) 实例：

CSS 列表实例：

CSS 表格实例：

轮廓（Outline） 实例：

CSS 尺寸 (Dimension) 实例：

CSS 分类 (Classification) 实例：

CSS 定位 (Positioning) 实例：

CSS 伪类 (Pseudo-classes)实例：

CSS 伪元素 (Pseudo-elements)实例：

相关帖子

轮廓（Outline）实例：