Learning Path
浏览 CSS 参考手册 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
319
CSS grid-template-areas 属性 实例以下实例 item1 命名为 'myArea', 并跨越五列： [mycode3 type='css'] .item1 { grid-area: myArea; } .grid-container { grid-template-areas: 'myArea myArea myArea myArea myArea&#..
CSS grid-template-columns 属性 实例 制作 4 列的网格容器： [mycode3 type='css'] .grid-container { display: grid; grid-template-columns: auto auto auto auto; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 ..
CSS grid-template-rows 属性 实例 指定行大小（高度）： [mycode3 type='css'] .grid-container { display: grid; grid-template-rows: 100px 300px; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 ..
CSS grid-template 属性 实例 制作一个三列网格布局，其中第一行高 150 像素： [mycode3 type='css'] .grid-container { display: grid; grid-template: 150px / auto auto auto; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 ..
CSS import 规则 实例 导入 'navigation.css' 样式到当前的样式表： [mycode3 type='css'] @import 'navigation.css'; /* 使用字符串 */ 或者 @import url('navigation.css'); /* 使用 url 地址 */ [/mycode3] 浏览..
CSS list-style-image 属性 实例 指定列表中的列表项标记的图像： ul { list-style-image:url('sqpurple.gif'); } 尝试一下 » 属性定义及使用说明 list-style-image 属性使用图像来替换列表项的标记。 注意: 请始终规定一个 'list-style-type' 属性以防图像不可用..
CSS list-style-position 属性 实例 规定列表中列表项目标记的位置： [mycode3 type='css'] ul { list-style-position: inside; } [/mycode3] 尝试一下 » 属性定义及使用说明 list-style-position属性指示如何相对于对象的内容绘制列表项标记。 在线实例 » 默认值： outsi..
CSS list-style-type 属性 实例 设置一些不同的列表样式： ul.circle {list-style-type:circle} ul.square {list-style-type:square} ol.upper-roman {list-style-type:upper-roman} ol.lower-alpha {list-style-type:lower-alpha} 尝试一..
CSS list-style 属性 实例 在一个声明中指定所有列表属性： [mycode3 type='css'] ul { list-style:square url('sqpurple.gif'); } [/mycode3] 尝试一下 » 属性定义及使用说明 list-style 简写属性在一个声明中设置所有的列表属性。 可以设置的属性（按顺序）： list-sty..
CSS margin-bottom 属性 实例 设置一个p元素的下边距： p { margin-bottom:2cm; } 尝试一下 » 属性定义及使用说明 margin-bottom属性设置元素的下边距。 注意： 负值是允许的。 默认值： 0 继承： no 版本： CSS1 JavaScript 语法： object.sty..
CSS margin-left 属性 实例 设置一个p元素的左边距： [mycode3 type='css'] p { margin-left:2cm; } [/mycode3] 尝试一下 » 属性定义及使用说明 margin-left属性设置元素的左边距。 注意： 负值是允许的。 默认值： 0 继承： no 版本： CSS1 Java..
CSS margin-right 属性 实例 设置一个p元素的右边距： [mycode3 type='css'] p { margin-right:2cm; } [/mycode3] 尝试一下 » 属性定义及使用说明 margin-right属性设置元素的右边距。 注意： 负值是允许的。 默认值： 0 继承： no 版本： CSS1 Ja..
CSS margin-top 属性 实例 设置一个p元素的上部边距： [mycode3 type='css'] p { margin-top:2cm; } [/mycode3] 尝试一下 » 属性定义及使用说明 margin-top属性设置元素的上部边距。 注意： 负值是允许的。 默认值： 0 继承： no 版本： CSS1 JavaScrip..
CSS margin 属性 实例 设置一个p元素的所有四个边距： p { margin:2cm 4cm 3cm 4cm; } 尝试一下 » 属性定义及使用说明 margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。 实例: margin:10px 5px 15px 20px; 上边距是 10px 右边距是 5px 下边距是 15px 左边距是 20px ..
CSS mix-blend-mode 属性 实例 设置图片元素与父容器背景（黄色）进行混合，图片会变暗： [mycode3 type='css'] .container { background-color: yellow; padding: 15px; } .container img { mix-blend-mode: darken; } [/mycode3] 尝试一下 » 标签定义及..
CSS object-fit 属性 实例 对图片进行剪切，保留原始比例： [mycode3 type='css'] img.a { width: 200px; height: 400px; object-fit: cover; } [/mycode3] 尝试一下 » 标签定义及使用说明 object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。 object-fit 一般用..
CSS object-position 属性 实例 根据容器大小重置图片的大小，并设置图片的位置： [mycode3 type='css'] img.a { width: 200px; height: 400px; object-fit: none; object-position: 5px 10%; border: 5px solid red; } [/mycode3] 尝试一下 » ..
CSS outline-color 属性 实例 设置一个虚线轮廓的颜色： p { outline-style:dotted; outline-color:#00ff00; } 尝试一下 » 属性定义及使用说明 outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围。 outline-color属性指定轮廓颜色。 注意： 请始终在 outline-color 属性之前声明 o..
CSS outline-style 属性 实例 设置outline的样式： p { outline-style:dotted; } 尝试一下 » 在此页底部有更多的例子。 属性定义及使用说明 outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围。 outline-style属性指定outline的样式。 默认值： none 继承： no 版..
CSS outline-width 属性 实例 设置轮廓的宽度： [mycode3 type='css'] p { outline-style:dotted; outline-width:5px; } [/mycode3] 尝试一下 » 属性定义及使用说明 outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围。 outline-width指定轮廓的宽度。 注意： 请始..
CSS outline 属性 实例 设置元素周围的轮廓： [mycode3 type='css'] p { outline:#00FF00 dotted thick; } [/mycode3] 尝试一下 » 属性定义及使用说明 outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 outline简写属性在一个声明中设置所有的轮廓属性。 可以设置的属性分别..
CSS padding-bottom 属性 实例 设置一个p元素的底部内边距为 25px： [mycode3 type='css'] p { padding-bottom:25px; } [/mycode3] 尝试一下 » 属性定义及使用说明 padding-bottom属性设置一个元素的底部填充（空格）。 注意： 负值是不允许的。 默认值： 0 继承： ..
CSS padding-left 属性 实例 设置一个P元素的左部填充： p { padding-left:2cm; } 尝试一下 » 属性定义及使用说明 padding-left属性设置一个元素的左填充（空格）。 注意： 负值是不允许的。 默认值： 0 继承： no 版本： CSS1 JavaScript 语法： obj..
CSS padding-right Property 实例 设置一个P元素的右部填充： p { padding-right:2cm; } 尝试一下 » 属性定义及使用说明 padding-right属性设置一个元素的右填充（空格）。 注意： 负值是不允许的。 默认值： 0 继承： no 版本： CSS1 JavaScript 语法： ..