关于页面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样式能被更清楚地展示。