Learning Path
浏览 CSS 参考手册 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
319
CSS width 属性 实例 设置一个段落的高度和宽度： p.ex { height:100px; width:100px; } 尝试一下 » 在此页底部有更多的例子。 属性定义及使用说明 width属性设置元素的宽度。 注意： width属性不包括填充，边框和页边距！ 默认值： auto 继承： no 版本： CSS1 JavaScri..
CSS font-family 属性 实例 指定段落的字体： [mycode3 type='css'] p { font-family:'Times New Roman',Georgia,Serif; } [/mycode3] 尝试一下 » 属性定义及使用说明 font - family属性指定一个元素的字体。 font-family 可以把多个字体名称作为一个“回退”系统来..
CSS font-size 属性..
CSS font-style 属性 实例 三个段落设置不同的字体样式： p.normal {font-style:normal} p.italic {font-style:italic} p.oblique {font-style:oblique} 尝试一下 » 属性定义及使用说明 font-style属性指定文本的字体样式。 默认值： normal 继承： yes..
CSS font-variant 属性 实例 把段落设置为小型大写字母字体： p.small { font-variant:small-caps; } 尝试一下 » 属性定义及使用说明 font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小 font-variant 属性主要用于定义小型..
CSS font 属性 实例 指定在一个声明的所有字体属性： [mycode3 type='css'] p.ex1 { font:15px arial,sans-serif; } p.ex2 { font:italic bold 12px/30px Georgia, serif; }[/mycode3] 尝试一下 » 在此页底部有更多的例子。 属性定义及使用说明 font 简写属性..
CSS font-weight 属性 实例 三段文字设置不同的字体粗细： [mycode3 type='css'] p.normal {font-weight:normal;} p.thick {font-weight:bold;} p.thicker {font-weight:900;} [/mycode3] 尝试一下 » 属性定义及使用说明 font-weight 属性设置文本的粗细 默认值..
CSS content 属性 实例 以下实例将在每个链接后的括号内加上网址（href 属性）： [mycode3 type='css'] a:after { content: ' (' attr(href) ')'; } [/mycode3] 尝试一下 » 属性定义及使用说明 content 属性与 :before 及 :after 伪元素配合使用，来插..
CSS counter-increment 属性 实例 对部分和子部分进行编号（比如 'Section 1'、'1.1'、'1.2'）的方法： [mycode3 type='css'] body { counter-reset:section; } h1 { counter-reset:subsection; } h1:befor..
CSS counter-reset 属性 实例 对部分和子部分进行编号（比如 'Section 1'、'1.1'、'1.2'）的方法： [mycode3 type='css'] body { counter-reset:section; } h1 { counter-reset:subsection; } h1:before {..
CSS quotes 属性 实例 设置嵌套引用的引号类型： q:lang(en) { quotes: '�' '�' ''' '''; } 尝试一下 » 属性定义及使用说明 quotes属性设置嵌套引用的引号类型。 默认值： not specified 继承： ..
CSS grid-area 属性 实例 以下实例设置 'item8' 从第 2 行开始和第 1 列开始， 横跨 2 行 3 列： [mycode3 type='css'] .item8 { grid-area: 2 / 1 / span 2 / span 3; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 ..
CSS grid-auto-columns 属性 实例 设置网格中列的默认大小：： [mycode3 type='css'] .grid-container { display: grid; grid-auto-columns: 50px; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 ..
CSS grid-auto-flow 属性 实例 逐列插入网格元素： [mycode3 type='css'] .grid-container { display: grid; grid-auto-flow: column; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 ..
CSS grid-auto-rows 属性 实例 设置网格中行的默认大小：： [mycode3 type='css'] .grid-container { display: grid; grid-auto-rows: 150px; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 ..
CSS grid-column-end 属性 实例 设置 'item1' 跨越 3 列： [mycode3 type='css'] .item1 { grid-column-end: span 3; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 ..
CSS grid-column-gap 属性 实例 设置列之间的网格间距为 50px： [mycode3 type='css'] .grid-container { display: grid; grid-column-gap: 50px; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 ..
CSS grid-column-start 属性 实例 设置 'item1' 从第 2 列开始： [mycode3 type='css'] .item1 { grid-column-start: 2; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 ..
CSS grid-column 属性 实例 设置 'item1' 在第 1 列开始，在第 5 列前结束： [mycode3 type='css'] .item1 { grid-column: 1 / 5; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 ..
CSS grid-gap 属性 实例 设置行与列的间隙为 50px： [mycode3 type='css'] .grid-container { grid-gap: 50px; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 ..
CSS grid-row-end 属性 实例 设置 item1 跨越 3 行： [mycode3 type='css'] .item1 { grid-row-end: span 3; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 ..
CSS grid-row-gap 属性 实例 设置行的间隙为 50px： [mycode3 type='css'] .grid-container { grid-row-gap: 50px; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 ..
CSS grid-row-start 属性 实例 设置 item1 从第 2 行开始： [mycode3 type='css'] .item1 { grid-row-start: 2; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 ..
CSS grid-row 属性 实例 以下实例设置 'item1' 跨越两行：： [mycode3 type='css'] .item1 { grid-row: 1 / span 2; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 ..