核心提示:目的本博文旨在总结CSS的属性,对CSS属性进行分类的讲解,以便更好的记忆CSS,可以在学习工作中快速地运用。本博文并未全部列举所有属性,旨在作为一个指导,并不会特别详细的讲解每个属性的用法,一些未被...
目的
本博文旨在总结CSS的属性,对CSS属性进行分类的讲解,以便更好的记忆CSS,可以在学习工作中快速地运用。 本博文并未全部列举所有属性,旨在作为一个指导,并不会特别详细的讲解每个属性的用法,一些未被浏览器采用的属性也不会介绍。
综合参考
MDN–CSS参考手册 W3Cschool–CSS参考手册
属性一览
属性 | 定义 | 属性值 |
---|---|---|
column-count | 规定多列 | number |
示例及代码
(你可以看到,文段被分成了三列)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> p{ -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari 和 Chrome */ column-count:3; } </style> </head> <body> <p class="p1">这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字</p> </body> </html>
属性 | 定义 | 属性值 |
---|---|---|
column-gap | 规定列间距 | length |
示例(设置了 40px 的间距)
属性 | 定义 | 属性值 |
---|---|---|
column-rule-width | 规定列边框的宽度 | thin;thick;medium;length |
column-rule-style | 规定列边框的样式 | 和 border-style 一样 |
column-rule-color | 规定列边框的颜色 | color |
column-rule | 是以上三个的简写 | width style color |
示例
属性 | 定义 | 属性值 |
---|---|---|
column-span | 让处于 column-count 中的元素可以实现横跨 | 1;all |
示例
属性 | 定义 | 属性值 |
---|---|---|
column-width | 用于规定列的宽度 | length |
columns | 规定了列的宽度和列数 | column-width column-count |
示例(宽度为 100px 列数为 5)
至此关于列的 CSS 相关属性就介绍完了。