萌新CSS模块
评分: +2+x

声明:这里列出了撰写者Dr HormressDr Hormress的一些业余CSS模块,主要用于文档排版。

切换显示模式

默认|黑标|Nu-SCP|展示用


前言:在排版文章的时候有没有遇到过代码崩掉、格式不好看、想隐藏脚注隐藏不了之类令人窒息的问题?

身为写作苦手,我选择咕咕咕去研究代码,最终憋出了以下这些优化模块,这篇文章将提及一些基于CSS技术的优化版式和文本格式设计,希望能够帮到你。


第二个前言:什么是module CSS?

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

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

/* 注释 */

选择器 {
    属性: 值;
}

选择器2 {
    属性: 值;
}

……
[[/module]]

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

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

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

实数 {
    θ: 1;
}

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

body {
    background-color: black;
}

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

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


Div方块

基本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样式能被更清楚地展示。

选择器&值的快速参考:见下文

改变div内的文本样式

移动端侧栏按钮


版头


评分模块


脚注格式

CC BY-SA 114514.810