Learning Path
浏览 CSS 参考手册 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
319
CSS padding-top 属性 实例 设置一个P元素的顶部填充： [mycode3 type='css'] p { padding-top:2cm; } [/mycode3] 尝试一下 » 属性定义及使用说明 padding-top属性设置一个元素的顶部填充（空格）。 注意： 负值是不允许的。 默认值： 0 继承： no 版本： CSS1..
CSS padding 属性 实例 设置一个P元素的填充： [mycode3 type='css'] p { padding:2cm 4cm 3cm 4cm; } [/mycode3] 尝试一下 » 属性定义及使用说明 padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。 实例: padding:10px 5px 15px 20px; 上填充是 10px ..
CSS bottom 属性 实例 设置图像的底部边缘，在元素的底边上面5px： img { position:absolute; bottom:5px; } 尝试一下 » 属性定义及使用说明 对于绝对定位元素，bottom属性设置单位高于/低于包含它的元素的底边。 对于相对定位元素，bottom属性设置单位高于/低于其正常位置的元素的底边。 注意：如果“position：static”，底部..
CSS clip 属性 实例 裁剪一张图像： [mycode3 type='css'] img { position:absolute; clip:rect(0px,60px,200px,0px); } [/mycode3] 尝试一下 » 属性定义及使用说明 如果图像大于包含它的元素，会发生什么？-clip属性，让你指定一个绝对定位的元素，该尺寸应该是可见的，该元素被剪裁成这种形..
CSS left 属性 实例 把图像的左边缘设置在其包含元素左边缘向右5像素的位置： img { position:absolute; left:5px; } 尝试一下 » 属性定义及使用说明 left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。 如果 'position' 属性的值为 'static'，那么设置..
CSS overflow 属性 实例 设置不同 overflow 属性值： [mycode3 type='css'] div.ex1 { overflow: scroll; } div.ex2 { overflow: hidden; } div.ex3 { overflow: auto; } div.ex4 { overflow: visible; } [/mycode3..
CSS right 属性 实例 把图像的右边缘设置在其包含元素右边缘向左 5 像素的位置： img { position:absolute; right:5px; } 尝试一下 » 属性定义及使用说明 对于 static 元素，为 auto；对于长度值，则为相应的绝对长度；对于百分比数值，为指定值；否则为 auto。 对于相对定义元素，left 的计算值始终等于 right。 right 属..
CSS top 属性 实例 把图像的上边缘设置在其包含元素上边缘之下5像素高的位置： img { position:absolute; top:5px; } 尝试一下 » 属性定义及使用说明 top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 对于相对定义元素，如果 top 和 bottom 都是 auto，其计算值则都是 0；如果其中之一为 ..
CSS vertical-align 属性 实例 垂直对齐图像： [mycode3 type='css'] img { vertical-align:text-top; } [/mycode3] 尝试一下 » 属性定义及使用说明 vertical-align 属性设置一个元素的垂直对齐方式。 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素..
CSS z-index 属性 实例 设置图像的 z-index： [mycode3 type='css'] img { position:absolute; left:0px; top:0px; z-index:-1; } [/mycode3] 尝试一下 » 属性定义及使用说明 z-index 属性指定一个元素的堆叠顺序。 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注意： ..
CSS page-break-after 属性 实例 在 <footer> 元素后始终插入分页符: [mycode3 type='css'] @media print { footer {page-break-after: always;} } [/mycode3] 属性定义及使用说明 page-break-after 属性用于设置在指..
CSS page-break-before 属性 实例 在 <h1> 元素前始终插入分页符: [mycode3 type='css'] @media print { h1 {page-break-before: always;} } [/mycode3] 属性定义及使用说明 page-break-before 元素在指定元素前添加分页符。 注意： 您不能对绝对定..
CSS page-break-inside 属性 实例 避免在 <pre> 与 <blockquote> 元素中插入分页符: [mycode3 type='css'] @media print { pre, blockquote {page-break-inside: avoid;} } [/mycode3] 属性定义及使用说明 pag..
CSS caption-side 属性 实例 指定表格标题的位置： [mycode3 type='css'] caption { caption-side:bottom; } [/mycode3] 尝试一下 » 属性定义及使用说明 caption-side 属性设置表格标题的位置。 默认值： top 继承性： yes ..
CSS empty-cells 属性 实例 隐藏表中的空单元格的边框和背景： table { border-collapse:separate; empty-cells:hide; } 尝试一下 » 属性定义及使用说明 empty-cells 属性设置是否显示表格中的空单元格（仅用于“分离边框”模式）。 默认值： show 继承： yes 版本： ..
CSS table-layout 属性 实例 设置表格的布局算法： table { table-layout:fixed; } 尝试一下 » 属性定义及使用说明 table-layout属性为表设置表格布局算法。 默认值： auto 继承： no 版本： CSS2 JavaScript 语法： object.style.tabl..
CSS color 属性 实例 不同元素设置text-color： [mycode3 type='css'] body { color:red; } h1 { color:#00ff00; } p { color:rgb(0,0,255); } [/mycode3] 尝试一下 » 属性定义及使用说明 Color属性指定文本的颜色。 默认值: 未指定 ..
CSS direction 属性 实例 设置文字方向'right-to-left': [mycode3 type='css'] div{ direction:rtl; unicode-bidi: bidi-override; } [/mycode3] 尝试一下 » 属性定义及使用说明 direction属性指定文本方向/书写方向。 默认值： ltr ..
CSS letter-spacing 属性 实例 设置为h1和h2元素的字母间距： h1 {letter-spacing:2px} h2 {letter-spacing:-3px} 尝试一下 » 属性定义及使用说明 letter-spacing 属性增加或减少字符间的空白（字符间距） 默认值： normal 继承： yes 版本： CSS1 Ja..
CSS text-align 属性 实例 h1, h2, 和 h3元素设置文本的对齐方式： [mycode3 type='css'] h1 {text-align:center} h2 {text-align:left} h3 {text-align:right} [/mycode3] 尝试一下 » 在此页底部有更多的例子。 属性定义及使用说明 text-align属性指定元素文本的水平对齐方式。..
CSS text-decoration 属性 实例 设置h1，h2，h3和h4元素文本装饰： [mycode3 type='css'] h1 {text-decoration:overline} h2 {text-decoration:line-through} h3 {text-decoration:underline} [/mycode3] 尝试一下 » 属性定义及使用说明 text-decor..
CSS text-indent 属性 实例 缩进段落的第一行50像素： p { text-indent:50px; } 尝试一下 » 属性定义及使用说明 text-indent 属性规定文本块中首行文本的缩进。 注意： 负值是允许的。如果值是负数，将第一行左缩进。 默认值： 0 继承： yes 版本： CSS1 JavaScript 语法：..
CSS text-transform 属性 实例 转换不同元素中的文本： h1 {text-transform:uppercase;} h2 {text-transform:capitalize;} p {text-transform:lowercase;} 尝试一下 » 属性定义及使用说明 text-transform 属性控制文本的大小写。 默认值： none 继承： ..
CSS unicode-bidi 属性 CSS 参考手册 实例 重写文本： [mycode3 type='css'] div { direction:rtl; unicode-bidi:bidi-override; }[/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 ..