本节包含大量示例,这些示例演示了实际操作中的各种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多列布局创建多列布局设置列数或宽度设置列之间的间隙在列之间添加规则或垂直线