CSS 实例大全

CSS文字

• 设置文字颜色

• 文字对齐

• 文字缩进

• 装饰文字

• 设置字符之间的间距

• 设置单词之间的间距

• 设置文本行之间的间距

• 保留空格和换行符

• 元素内的文字换行

• 图片在文字中的垂直对齐

CSS字体

• 设置文本的字体

• 设置字体大小

• 设置字体样式

• 设置字体的变体

• 设置字体的粗体

• 在单个声明中设置所有字体属性-字体简写属性

CSS链接

• 设置链接不同状态的样式

• 从超链接中删除默认下划线

• 从超链接中删除虚线轮廓

• 创建链接框

• 图像翻转

CSS列表

• 在列表中指定项目符号和编号

• 设置列表项标记的位置

• 将图像设置为列表项标记

• 创建一个简单的下拉菜单

• 在单个声明中设置所有列表属性-列表样式的简写属性

CSS表

• 设置表格的边框

• 指定表格的尺寸

• 通过折叠表格边框来创建更好的表格

• 设置表格单元格内文本的水平对齐方式

• 设置内容的垂直对齐

• 指定应如何显示空单元格

• 指定表格单元格的填充

• 指定表布局算法-自动或固定

• 设置表格标题的位置

CSS背景

• 设置元素的背景色

• 将图像设置为元素的背景

• 水平或垂直重复背景图像

• 指定背景图片的位置

• 固定的背景图片，不会与其包含的元素一起滚动

• 一次设置所有背景属性-背景速记属性

• 设置背景图像的尺寸

• 设置背景裁剪

• 设置背景原点

• 向元素添加多个背景

CSS单位

• 使用绝对单位（例如px，pt，cm等）

• 使用相对单位（例如，em，ex，％等）

CSS尺寸

• 设置元素的宽度和高度

• 设置元素的最大宽度和高度

• 设置元素的最小宽度和高度

• 控制溢出

CSS对齐

• 文本和内嵌元素在块级元素内的对齐

• 使用边距属性对块元素进行中心对齐

• 使用float属性水平对齐元素

• 使用position属性在水平和垂直方向上对齐元素

• 防止父项与clear属性崩溃

• 创建一个简单的水平菜单

CSS定位

• 相对于浏览器窗口放置元素

• 相对于其父元素定位元素

• 相对于其正常位置定位元素

• 使用z-index属性重叠元素

CSS显示

• 使用可见性属性隐藏元素

• 使用display属性从DOM中删除元素

• 将元素显示为嵌入式元素

• 将元素显示为块元素

• 折叠表格元素

CSS边框和轮廓

• 在元素周围绘制边框

• 在元素的各个边上绘制边框

• 为边框设置不同的样式

• 一次设置所有边框属性-边框速记属性

• 在元素周围创建圆角

• 使用图像创建边框

• 在元素周围绘制轮廓

• 在元素周围绘制边框而不影响周围的元素

CSS边距和填充

• 设置元素各边的边距

• 在单个声明中设置所有边距属性-边距速记属性

• 设置元素各个边的填充

• 一次设置所有填充属性-填充速记属性

CSS不透明度

• 设置元素的透明度

• 图像翻转效果和透明度

• 透明框中的文字

CSS生成的内容

• 指定引号

• 自动编号的部分和类别

• 使用CSS插入生成的内容

CSS伪类

• 为超链接的不同状态设置样式

• 使用：focus伪类为焦点中的表单元素设置样式

• 使用：first-child伪类为元素的第一个子元素设置样式

• 使用：first-child伪类为元素的最后一个子元素设置样式

• 使用：nth-child伪类为元素的nth-child设置样式

• 使用：lang()伪类为特定语言设置样式

• 将伪类与选择器一起使用

CSS伪元素

• 使用:: first-letter伪元素创建首字下沉效果

• 使用:: first-line伪元素以不同方式设置文本的第一行

• 使用:: before或:: after伪元素在元素之前或之后插入一些内容

• 在类中使用伪元素

CSS3渐变

• 从顶部到底部创建线性渐变

• 从左到右创建线性渐变

• 沿对角线创建线性渐变

• 使用角度设置线性渐变的方向

• 使用多个色标创建线性渐变

• 创建渐变时设置颜色的位置停止

• 重复线性渐变

• 创建径向渐变

• 设置径向渐变的形状

• 设置径向渐变的大小

• 重复径向渐变

• 对渐变使用透明度

CSS3阴影

• 创建框阴影效果

• 将多个框阴影添加到元素的框

• 创建文字阴影效果

CSS3 2D转换

• 使用translate()方法移动元素

• 使用Rotate()方法旋转元素

• 使用scale()方法增大或减小元素的大小

• 使用matrix()方法应用2D变换

• 将多重转换应用于元素

CSS3 3D转换

• 使用translate3d()方法在三维空间中移动元素

• 使用rotate3d()方法在三维空间中旋转元素

• 使用scale3d()方法在三维空间中缩放元素

• 使用matrix3d()方法应用3D变换

• 将多个3D变换应用于元素

CSS3过渡

• 将过渡效果应用于背景色

• 将过渡效果应用于多个属性

• 一次设置所有过渡属性-过渡速记属性

CSS3动画

• 网页上的动画元素

• 在创建动画时定义关键帧

• 一次设置所有动画属性-动画速记属性

CSS3多列布局

• 创建多列布局

• 设置列数或宽度

• 设置列之间的间隙

• 在列之间添加规则或垂直线