css样式表入门及应用（CSS属性自定义网站或Web应用程序上的列的教程）

关于如何使用一些简单的CSS属性自定义网站或Web应用程序上的列的教程。请继续阅读以开始使用！

自从杂志版面设计出现以来，文本分页选项并不是最受欢迎的文本选项。就像在印刷设计中一样，网页设计中也有一些列。使用它的最好和最清晰的方式是CSS中的 列选项。

这是无聊的，内容和设计明智的，文本内容将扩展到整个网页，所以这是罕见的。

因此，网络上的文字内容被组织成更小的宽度元素，因此，不需要列。尽管如此，我上个星期需要一个设计方面的专栏，这是完全合理的（但左对齐）。

链接到列属性的属性是：

• column-count - 指定一个元素应该分成的列数。

• column-width - 指定列的宽度。

• column-gap - 指定列之间的差距

• 列规则 - 设置列之间的规则（这是设置规则宽度，规则颜色和规则样式的简写属性）。

• column-span - 指定元素应该跨越多少个列。Internet Explorer 9（及更早版本）和Firefox不支持列跨度

• 列填充 - 指定如何填充列（自动或余额）。

仅列属性将接受列数，列宽或两个属性。

这个例子表示将内容分割成一个具有定义宽度的列，并在它们之间有一个定义的间隔。

<style>

div{

-webkit-column-width: 300px; /* Chrome, Safari, Opera */

-moz-column-width: 300px; /* Firefox */

column-width: 300px;

-webkit-column-gap: 150px; /* Chrome, Safari, Opera */

-moz-column-gap: 150px; /* Firefox */

column-gap: 150px;

}

</style>

这个例子表示将内容交错分成3列，并在它们之间定义一条规则。

<style>

div{

-webkit-columns: 3; /* Chrome, Safari, Opera */

-moz-columns: 3; /* Firefox */

columns: 3;

-webkit-column-rule: 1px solid #dbdbdb; /* Chrome, Safari, Opera */

-moz-column-rule: 1px solid #dbdbdb; /* Firefox */

column-rule: 1px solid #dbdbdb;

}

</style>

最后一个例子表示列和元素中的内容，其中包括所有列的宽度。

<style>

div{

-webkit-columns: 3; /* Chrome, Safari, Opera */

-moz-columns: 3; /* Firefox */

columns: 3;

}

h1{

-webkit-column-span: all; /* Chrome, Safari, Opera */

column-span: all;

}

</style>

我相信这就是关于CSS中列属性的一切。希望能帮助到你！

,