认识 CSS
CSS，中文名为层叠样式表，用于调整网页中元素的显示效果。在 wikidot 中，我们同样可以通过 CSS 实现一些特殊效果。
CSS 有三种使用方式，分别为：行内式/内联式、嵌入式/内嵌式、外部式/链入式。由于 wikidot 并不支持外部/链入 CSS，本文将不赘述其相关内容。
行内/内联 CSS
行内式 CSS，又名内联式 CSS，是直接插入 HTML 元素的属性中的 CSS。而在 wikidot 中，则是直接在 div 或 span 中使用的 CSS。
行内/内联 CSS 拥有最高的优先级。
这是一个 行内/内联 CSS 实现的红色边框的 DIV 的示例。
代码如下：
[[div style="border: solid 3px red;"]]
这是一个 行内/内联 CSS 实现的红色边框的 DIV 的示例。
[[/div]]
其中的 style="border: solid 3px red;" 就是行内/内联 CSS。
嵌入/内嵌 CSS
嵌入式 CSS，又名内嵌式 CSS，是插入在 HTML 的 style 标签中的 CSS。而在 wikidot 中，则通过 [[module CSS]] 使用。
嵌入/内嵌 CSS 的优先级低于行内/内联 CSS，但高于外部/链入 CSS。
这是一个 嵌入/内嵌 CSS 实现的红色边框的 DIV 的示例。
[[module CSS]]
.test-1 {
border: solid 3px red;
}
[[/module]][[div class="test-1"]]
这是一个 嵌入/内嵌 CSS 实现的红色边框的 DIV 的示例。
[[/div]]
[[module CSS]] 中的内容就是嵌入/内嵌 CSS，而 class="test-1" 则是元素的类属性（这个后面会讲）。
CSS 单位
在编写 CSS 时，需要注意以下几种不同的长度单位。
| 单位 | 含义 |
|---|---|
| em | 字符大小。当元素的字符大小被更改时，em 的基准也会随之更改。 |
| px | 像素。 |
| rem | 根字符大小。当根元素的字符大小被更改时，rem 的基准也会随之更改。 |
| vh | 视窗高度的百分比。如，1vh 为视窗高度的 1% 大小。 |
| vw | 视窗宽度的百分比。如，1vw 为视窗宽度的 1% 大小。 |
| % | 父元素值的百分比。 |
| auto | 自适应。 |
CSS 颜色值
| 类型 | 描述 |
|---|---|
| 颜色名称 | 直接输入颜色名称，如 red 等。 |
| 十六进制色号 | 输入颜色的十六进制色号，如 #FA0000 等。十六进制色号前必须添加 # 符号。十六进制色号的前两位为红色值，中间两位为绿色值，最后两位为蓝色值。若两位数字相同，则可以简写为三位形式，如 #FFAACC 可以简写为 #FAC 的形式。十六进制色号后可以添加两位透明度，如 #FA0000BC 等。带透明度的十六进制色号同样可以简写，如 #FFAACC88 可以简写为 #FAC8 形式。十六进制色号不区分大小写。 |
| rgb 色号 | 输入颜色的 rgb 色号，如 rgb(244, 0, 0) 等。rgb 色号的第一位为红色值，第二位为绿色值，第三位为蓝色值，最小为0，最大为255。 |
| rgba 色号 | 输入颜色的 rgba 色号，如 rgba(244, 0, 0, 0.5) 等。rgb 色号的第一位为红色值，第二位为绿色值，第三位为蓝色值，最小为0，最大为255；rgba 色号的第四位为透明度，最小为0，最大为1。 |
| transparent | 透明，无颜色。 |
使用 CSS
了解了 CSS 的基本概念，就可以开始着手使用它了。
常用 CSS 选择器
CSS 通过选择器来选择一部分元素，并设定其样式。
标签选择器
通过元素的标签选择一种元素。
span {
……
}
在这段代码中，span 就是标签选择器，其选择了全部的 span 标签元素。
标签选择器的优先级为1，可以相加。
id 选择器
通过元素的 id 选择一个元素。
一个 id 在一个页面中只能出现一次，同时，每个元素最多只能有一个 id。
#a {
……
}
在这段代码中，#a 就是标签选择器，其选择了 id 为 a 的元素。
标签选择器的优先级为100，可以相加。
类选择器
通过元素的类选择一部分元素。
一个类可以在一个页面中出现多次，同时，每个元素可以有多个类。
.demo {
……
}
在这段代码中，.demo 就是类选择器，其选择了类为 demo 的元素。
类选择器的优先级为10，可以相加。
:hover 伪类选择器
选择鼠标悬浮在其上的元素。
.demo:hover {
……
}
在这段代码中，选择了鼠标悬浮在其上的 demo 类的元素。即，设置当鼠标悬浮在其上时，demo 类的元素的样式。
:hover 伪类选择器的优先级为10，可以相加。
:active 伪类选择器
选择鼠标点击其的元素。
.demo:active {
……
}
在这段代码中，选择了鼠标悬浮在其上的 demo 类的元素。即，设置当鼠标点击其时，demo 类的元素的样式。
:active 伪类选择器的优先级为10，可以相加。
常用 CSS 属性
利用这些属性，可以实现许多不同的效果。
background 属性
background 属性用于设置元素的背景样式。
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
代码如下：
[[div style="background: #888;"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_`~[]{}\|;:'"/?.>,<
1234567890
[[/div]]
或者也可以使用图片作为背景。
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
代码如下：
[[div style="background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Agoc/goc-background.png');"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_`~[]{}\|;:'"/?.>,<
1234567890
[[/div]]
其中，url() 中的内容为图片的 url 链接。
或者也可以用渐变色作为背景。
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
代码如下：
[[div style="background: linear-gradient(red, blue);"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_`~[]{}\|;:'"/?.>,<
1234567890
[[/div]]
渐变色可以设置角度，如：
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
代码如下：
[[div style="background: linear-gradient(90deg, red, blue);"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_`~[]{}\|;:'"/?.>,<
1234567890
[[/div]]
渐变色也可以设置颜色起止位置，如：
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
代码如下：
[[div style="background: linear-gradient(90deg, red 15%, green 35%, blue 50%);"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_`~[]{}\|;:'"/?.>,<
1234567890
[[/div]]
background 属性的常用属性值有四位，分别是背景颜色、背景图片（渐变色属于背景图片）、背景位置、背景重复样式。
background: #fff url('https://scp-wiki.wdfiles.com/local--files/theme%3Agoc/goc-fade.png') center no-repeat;
这段代码的含义是：背景颜色为白色，背景图片为 https://scp-wiki.wdfiles.com/local--files/theme%3Agoc/goc-fade.png，背景居中显示，背景不重复填充。
效果如下：
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
如果一个图片太大了，我们可以使用 background-size 属性调整其大小。
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
代码如下：
[[div style="background: #fff url('https://scp-wiki.wdfiles.com/local--files/theme%3Agoc/goc-fade.png') center no-repeat;background-size: 64px;"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_`~[]{}\|;:'"/?.>,<
1234567890
[[/div]]
而在删除 no-repeat 后，则会变成这样：
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
这就是背景图片默认的重复填充样式。
border 属性
border 属性用于设置元素的边框样式。
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
代码如下：
[[div style="border: solid 3px red;"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_`~[]{}\|;:'"/?.>,<
1234567890
[[/div]]
其中，第一位是边框的类型，包括：
| 类型 | 描述 |
|---|---|
| none | 无边框。 |
| hidden | 与 none 相同。 |
| dotted | 点线。 |
| dashed | 虚线。 |
| solid | 实线。 |
| double | 双实线。 |
| groove | 沟。 |
| ridge | 垄。 |
| inset | 凹。 |
| outset | 凸。 |
| inherit | 从父元素继承。 |
第二位是边框的宽度，第三位是边框的颜色。
border-radius 属性
border-radius 属性用于设置元素的圆角样式。
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
代码如下：
[[div style="border: solid 3px red;border-radius: 12px;"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_`~[]{}\|;:'"/?.>,<
1234567890
[[/div]]
border-radius 属性最多可以有四位值：
| 代码 | 含义 |
|---|---|
| border-radius: 12px; | 四个角的圆角半径为 12px。 |
| border-radius: 12px 6px; | 左上角和右下角的圆角半径为 12px，右上角和左下角的圆角半径为 6px。 |
| border-radius: 12px 6px 3px; | 左上角的圆角半径为 12px，右上角和左下角的圆角半径为 6px，右下角的圆角半径为 3px。 |
| border-radius: 12px 6px 3px 24px; | 左上角的圆角半径为 12px，右上角的圆角半径为 6px，右下角的圆角半径为 3px，左下角的圆角半径为 24px。 |
除了半径，也可以通过宽高来设置圆角的样式，如：
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
代码如下：
[[div style="border: solid 3px red;border-radius: 24px / 12px;"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_`~[]{}\|;:'"/?.>,<
1234567890
[[/div]]
box-shadow 属性
box-shadow 属性用于设置元素的边框阴影。
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
代码如下：
[[div style="box-shadow: 3px 3px 6px 0 #000;"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_`~[]{}\|;:'"/?.>,<
1234567890
[[/div]]
其中，第一位值为水平偏移量，第二位值为垂直偏移量，第三位值为阴影半径，第四位值为阴影扩展距离，第五位值为阴影颜色。
边框阴影也可以向内，如：
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
代码如下：
[[div style="box-shadow: 3px 3px 6px 0 #000 inset;"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_`~[]{}\|;:'"/?.>,<
1234567890
[[/div]]
color 属性
color 属性用于设置元素中的文本的颜色。
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
代码如下：
[[div style="color: #800;"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_`~[]{}\|;:'"/?.>,<
1234567890
[[/div]]
font-family 属性
font-family 属性用于设置元素中的文本的字体。
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
代码如下：
[[div style="font-family: 'Russo One', "Noto Sans SC", sans-serif;"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_`~[]{}\|;:'"/?.>,<
1234567890
[[/div]]
font-size 属性
font-size 属性用于设置元素中的文本的大小。
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
代码如下：
[[div style="font-size: 18px;"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_`~[]{}\|;:'"/?.>,<
1234567890
[[/div]]
font-weight 属性
font-weight 属性用于设置元素中的文本的粗细。
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
代码如下：
[[div style="font-weight: 900;"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_`~[]{}\|;:'"/?.>,<
1234567890
[[/div]]
font-weight 属性的常用值如下：
| 值 | 描述 |
|---|---|
| 100 | 非常细 |
| 200 | 很细 |
| 300 | 细 |
| 400 | 默认 |
| 500 | 中等 |
| 600 | 比较粗 |
| 700 | 粗 |
| 800 | 很粗 |
| 900 | 非常粗 |
height 属性
height 属性用于设置元素的高度。
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
代码如下：
[[div style="border: solid 3px red;height: 196px;"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_`~[]{}\|;:'"/?.>,<
1234567890
[[/div]]
margin 属性
margin 属性用于设置元素的外边距。
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
代码如下：
[[div style="border: solid 3px red;margin: 64px;"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_`~[]{}\|;:'"/?.>,<
1234567890
[[/div]]
margin 属性最多可以有四位值：
| 代码 | 含义 |
|---|---|
| margin: 12px; | 四个方向的外边距为 12px。 |
| margin: 12px 6px; | 垂直方向的外边距为 12px，水平方向的外边距为 6px。 |
| margin: 12px 6px 3px; | 上方的外边距为 12px，水平方向的外边距为 6px，下方的外边距为 3px。 |
| margin: 12px 6px 3px 24px; | 上方的外边距为 12px，右方的外边距为 6px，下方的外边距为 3px，左方的外边距为 24px。 |
padding 属性
padding 属性用于设置元素的内边距。
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
代码如下：
[[div style="border: solid 3px red;padding: 64px;"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_`~[]{}\|;:'"/?.>,<
1234567890
[[/div]]
padding 属性最多可以有四位值：
| 代码 | 含义 |
|---|---|
| padding: 12px; | 四个方向的内边距为 12px。 |
| padding: 12px 6px; | 垂直方向的内边距为 12px，水平方向的内边距为 6px。 |
| padding: 12px 6px 3px; | 上方的内边距为 12px，水平方向的内边距为 6px，下方的内边距为 3px。 |
| padding: 12px 6px 3px 24px; | 上方的内边距为 12px，右方的内边距为 6px，下方的内边距为 3px，左方的内边距为 24px。 |
text-align 属性
text-align 属性用于设置元素中的文本的对其方向。
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
代码如下：
[[div style="text-align: center;"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_`~[]{}\|;:'"/?.>,<
1234567890
[[/div]]
text-align 属性的常用值如下：
| 值 | 描述 |
|---|---|
| left | 向左对齐。 |
| center | 居中对齐。 |
| right | 向右对齐。 |
| justify | 两端对齐。 |
| justify-all | 强制两端对齐。 |
text-shadow 属性
text-shadow 属性用于设置元素中的文本的阴影样式。
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
代码如下：
[[div style="text-shadow: 1px 1px 3px #000;"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_`~[]{}\|;:'"/?.>,<
1234567890
[[/div]]
其中，第一位值为水平偏移量，第二位值为垂直偏移量，第三位值为阴影半径，第四位值为阴影颜色。
width 属性
width 属性用于设置元素的宽度。
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
代码如下：
[[div style="border: solid 3px red;width: 320px;"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_`~[]{}\|;:'"/?.>,<
1234567890
[[/div]]
尝试一下
将前面所讲的内容运用起来吧！
尝试制作各种颜色球
[[module CSS]]
.vote {
width: 1rem;
height: 1rem;
border-radius: 100%;
color: #0000;
}
[[/module]][[div class="vote" style="background: #0f0;"]]
绿色球
[[/div]][[div class="vote" style="background: #f00;"]]
红色球
[[/div]][[div class="vote" style="background: #00f;"]]
蓝色球
[[/div]][[div class="vote" style="background: #888;"]]
灰色球
[[/div]]
效果如下：
绿色球
红色球
蓝色球
灰色球
复刻依职权版式下的 warning 引用块
[[module CSS]]
.warning-demo {
width: 80%;
margin: 0.625rem auto;
padding: 0.9375rem;
border: solid 0.125rem rgb(92, 149, 230);
background: #fff url('https://scp-wiki.wdfiles.com/local--files/theme%3Agoc/goc-fade.png') center no-repeat;
color: black;
text-align: center;
}
[[/module]][[div class="warning-demo"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
[[/div]]
效果如下：
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
模拟一个类似按钮的效果
[[module CSS]]
.buttom-demo {
background: rgb(170, 170, 170);
}
.buttom-demo:hover {
box-shadow: 0 0 3px 0;
}
.buttom-demo:active {
box-shadow: 0 0 3px 0 inset;
}
[[/module]][[div class="buttom-demo"]]
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890
[[/div]]
效果如下：
这是一个演示用的元素
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!@#$%^&*()-+=_‘~[]{}\|;:’"/?.>,<
1234567890