CSS3 多列
CSS3 可以将文本内容设计成像报纸一样的多列布局,如下实例:
CSS3 多列属性
下表列出了所有 CSS3 的多列属性:
属性 | 描述 |
---|---|
| 指定元素应该被分割的列数。 |
指定如何填充列 | |
column-gap | 指定列与列之间的间隙 |
column-rule | 所有 column-rule-* 属性的简写 |
column-rule-color | 指定两列间边框的颜色 |
column-rule-style | 指定两列间边框的样式 |
column-rule-width | 指定两列间边框的厚度 |
column-span | 指定元素要跨越多少列 |
column-width | 指定列的宽度 |
columns | column-width 与 column-count 的简写属性。 |
CSS3 多媒体类型
值 | 描述 |
---|---|
all | 用于所有多媒体类型设备 |
用于打印机 | |
screen | 用于电脑屏幕,平板,智能手机等。 |
speech | 用于屏幕阅读器 |
使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。
以下实例中在屏幕可视窗口尺寸小于 480 像素的设备上修改背景颜色:
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}