本节包含大量示例,这些示例演示了实际操作中的各种CSS属性及其功能。
设置文字颜色
文字对齐
文字缩进
装饰文字
设置字符之间的间距
设置单词之间的间距
设置文本行之间的间距
保留空格和换行符
元素内的文字换行
图片在文字中的垂直对齐
设置文本的字体
设置字体大小
设置字体样式
设置字体的变体
设置字体的粗体
在单个声明中设置所有字体属性-字体简写属性
设置链接不同状态的样式
从超链接中删除默认下划线
从超链接中删除虚线轮廓
创建链接框
图像翻转
在列表中指定项目符号和编号
设置列表项标记的位置
将图像设置为列表项标记
创建一个简单的下拉菜单
在单个声明中设置所有列表属性-列表样式的简写属性
设置表格的边框
指定表格的尺寸
通过折叠表格边框来创建更好的表格
设置表格单元格内文本的水平对齐方式
设置内容的垂直对齐
指定应如何显示空单元格
指定表格单元格的填充
指定表布局算法-自动或固定
设置表格标题的位置
设置元素的背景色
将图像设置为元素的背景
水平或垂直重复背景图像
指定背景图片的位置
固定的背景图片,不会与其包含的元素一起滚动
一次设置所有背景属性-背景速记属性
设置背景图像的尺寸
设置背景裁剪
设置背景原点
向元素添加多个背景
使用绝对单位(例如px,pt,cm等)
使用相对单位(例如,em,ex,%等)
设置元素的宽度和高度
设置元素的最大宽度和高度
设置元素的最小宽度和高度
控制溢出
文本和内嵌元素在块级元素内的对齐
使用边距属性对块元素进行中心对齐
使用float属性水平对齐元素
使用position属性在水平和垂直方向上对齐元素
防止父项与clear属性崩溃
创建一个简单的水平菜单
相对于浏览器窗口放置元素
相对于其父元素定位元素
相对于其正常位置定位元素
使用z-index属性重叠元素
使用可见性属性隐藏元素
使用display属性从DOM中删除元素
将元素显示为嵌入式元素
将元素显示为块元素
折叠表格元素
在元素周围绘制边框
在元素的各个边上绘制边框
为边框设置不同的样式
一次设置所有边框属性-边框速记属性
在元素周围创建圆角
使用图像创建边框
在元素周围绘制轮廓
在元素周围绘制边框而不影响周围的元素
设置元素各边的边距
在单个声明中设置所有边距属性-边距速记属性
设置元素各个边的填充
一次设置所有填充属性-填充速记属性
设置元素的透明度
图像翻转效果和透明度
透明框中的文字
指定引号
自动编号的部分和类别
使用CSS插入生成的内容
为超链接的不同状态设置样式
使用:focus伪类为焦点中的表单元素设置样式
使用:first-child伪类为元素的第一个子元素设置样式
使用:first-child伪类为元素的最后一个子元素设置样式
使用:nth-child伪类为元素的nth-child设置样式
使用:lang()伪类为特定语言设置样式
将伪类与选择器一起使用
使用:: first-letter伪元素创建首字下沉效果
使用:: first-line伪元素以不同方式设置文本的第一行
使用:: before或:: after伪元素在元素之前或之后插入一些内容
在类中使用伪元素
从顶部到底部创建线性渐变
从左到右创建线性渐变
沿对角线创建线性渐变
使用角度设置线性渐变的方向
使用多个色标创建线性渐变
创建渐变时设置颜色的位置停止
重复线性渐变
创建径向渐变
设置径向渐变的形状
设置径向渐变的大小
重复径向渐变
对渐变使用透明度
创建框阴影效果
将多个框阴影添加到元素的框
创建文字阴影效果
使用translate()方法移动元素
使用Rotate()方法旋转元素
使用scale()方法增大或减小元素的大小
使用matrix()方法应用2D变换
将多重转换应用于元素
使用translate3d()方法在三维空间中移动元素
使用rotate3d()方法在三维空间中旋转元素
使用scale3d()方法在三维空间中缩放元素
使用matrix3d()方法应用3D变换
将多个3D变换应用于元素
将过渡效果应用于背景色
将过渡效果应用于多个属性
一次设置所有过渡属性-过渡速记属性
网页上的动画元素
在创建动画时定义关键帧
一次设置所有动画属性-动画速记属性
创建多列布局
设置列数或宽度
设置列之间的间隙
在列之间添加规则或垂直线