CSS 实例

CSS背景

设置页面的背景颜色  

设置不同元素的背景颜色  

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

错误的的背景图片  

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

如何定位背景图像  

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

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

高级的背景例子  

背景属性的解释  

CSS文本

设置不同元素的文本颜色  

文本对齐  

移除链接下划线  

装饰文字  

控制文本中的字母  

缩进文本  

指定了字符之间的空间  

指定了行与行之间的空间  

设置元素的文本方向  

增加单词之间的空格  

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

内部文字图像的垂直对齐  

 

Text属性的解释  

CSS的字体

设置文本的字体  

设置字体大小  

用px设置的字体的大小  

用em设置的字体的大小  

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

设置字体样式  

设置字体的异体  

设置字体的粗细  

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

 

Font属性的解释  

CSS链接

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

在链接上使用文本装饰  

指定链接的背景颜色  

超链接添加其他样式  

高级 - 创建链接框  

 

链接属性的解释  

CSS列表

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

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

使用Crossbrowser解决方案设置一个列表项标记的图像  

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

 

列表属性的解释  

CSS表格

指定一个表的Th，TD元素和黑色边框  

使用border-collapse  

指定表格的宽度和高度  

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

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

指定TH和TD元素的填充  

指定表格边框的颜色  

设置表格标题的位置  

创建一个奇特的表  

 

表格属性的解释  

CSS盒模型

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

使用Crossbrowser解决方案指定元素的总宽度为250像素的   

 

盒模型的解释  

CSS边框

设置四个边框的宽度  

设置上边框的宽度  

设置底部边框的宽度  

设置左边框的宽度  

设置右边框的宽度  

 

设置四个边框的样式  

设置上边框的样式  

设置下边框的样式  

设置左边框的样式  

设置右边框的样式  

 

设置四个边框的颜色  

设置上边框的颜色  

设置下边框的颜色  

设置左边框的颜色  

设置右边框的颜色  

 

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

 

每边设置不同的边框  

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

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

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

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

 

边框属性的解释  

CSS轮廓

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

设置轮廓的样式  

设置轮廓颜色  

设置轮廓的宽度  

 

轮廓属性的解释  

CSS边距

指定一个元素的边距  

边距缩写属性  

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

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

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

 

Margin属性的解释  

CSS填充

设置元素的左部填充  

设置元素的右部填充  

设置元素的顶部填充  

设置元素的底部填充  

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

 

padding属性的解释  

CSS分组和嵌套

组选择器  

嵌套选择器  

 

分组和嵌套解释  

CSS尺寸

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

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

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

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

设置元素的最大高度  

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

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

设置元素的最低高度  

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

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

 

尺寸属性的解释  

CSS显示

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

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

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

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

H如何使用表格的collapse属性  

 

Display属性的解释  

CSS定位

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

元素的相对定位  

元素的绝对定位  

重叠的元素  

设置元素的形状  

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

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

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

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

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

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

更改光标  

 

定位属性的解释  

CSS浮动

简单的使用float属性  

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

标题和图片向右侧浮动  

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

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

开启float - clear属性  

创建一个水平菜单  

创建一个没有表格的网页  

 

Float属性的解释  

CSS对齐元素

使用margin的中间调整  

左/右位置对齐  

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

左/右对齐，浮动  

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

 

对齐属性解释  

CSS生成的内容

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

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

quotes 属性指定了引号  

CSS伪类

添加不同颜色的超链接  

给超链接添加其他样式  

使用：焦点  

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

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

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

使用:lang  

 

伪类的解释  

CSS伪元素

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

把第一行文字设置为特殊  

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

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

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

 

伪元素的解释  

CSS导航栏

垂直导航栏的全样式  

水平导航栏的全样式  

 

导航栏的解释  

CSS图片廊

图片廊  

 

图片廊解释  

CSS图像的不透明度

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

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

 

图像的不透明度解释  

CSS图像拼合

图像拼合  

图像拼合-导航列表  

悬停效果与图像拼合  

 

图像拼合解释  

CSS属性选择器

选择具有title属性的元素  

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

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

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

 

属性选择器解释