用Div方块排版文档:CSS快速参考

关于页面CSS:

这些简介引自我沙盒里的另一篇指导草稿:

简单来说,这是一个能引用一些CSS、让你的页面变得更加高级的模块。代码示例如下:

[[module CSS]]
@import url(" 链接 ");

/* 注释 */

选择器 {
    属性: 值;
}

选择器2 {
    属性: 值;
}

……
[[/module]]

关于链接:你可以把CSS的完整链接放在这里。引用页面上的代码方块时,查看它是否写成“[[code type="css"]]”,如果是,那么你可以直接已这个格式粘贴:http://页面名称/code/第几个代码块

关于注释:如果你从别处引了很多CSS模块,你可以用这样的方块让代码井然有序。

关于选择器&属性:定义一个选择器指定的物体的属性。举个例子,定义在实数集中θ=1,在CSS里就可以写成:

实数 {
    θ: 1;
}

相似地,如果定义页面背景为黑色,可以写成:

body {
    background-color: black;
}

你可以引用多个CSS模块,但不管是在哪里,位于文档更下方的选择器永远会覆盖更上方的[1]

CSS模块需要刷新才能应用。

[注1] 你会看到一些末尾带有“!important”的定义。这些东西基本上会强制覆盖其他CSS定义,但它们自己也单独符合这个规律(也就是说后面的!important覆盖前面的!important,而!important覆盖一切不是!important的东西)。

相似地,一些不用Module CSS引用的CSS片段被称作内联CSS,它们几乎总与Div方块一起出现:

你会经常在各类格式资源中看到如下的形式:

[[div]]
内容
[[/div]]

这是一个div方块,作为区别于文字段落的独立方块运行。一般情况下,你需要用到的div方块可以按如下方法设置:

[[div class="类" style="样式"]]
内容
[[/div]]

样式:写法与上述的CSS模块基本相同,同样是“属性: 值; 属性: 值”这样的格式,不过无需换行。样式属性相当于一个目标仅为对应的div方块的CSS选择器。

当你试图使数个不同的div方块都应用同一样式时,可以引入CSS模块:

[[div class="类1"]]
内容
[[/div]]

[[div class="类1"]]
内容
[[/div]]

[[module CSS]]
.类1 {
    选择器: 值;
}
[[/module]]

属性相当于把不同样式的div方块分了类,你可以在Module CSS里直接设置一整个分类里的div样式。注意在CSS中类的名称前应添加半角点“.”。一般情况下,类的名称用纯英文字符设置。

用类的属性可以很方便地成组控制div方块,也使得div样式能被更清楚地展示。

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License