CSS语法指导

前言
--

HTML、CSS、JavaScript并称为完成一个网页必要的三种代码语言，熟练掌握这三种编程语言，你可以在本站为你的档案创造出几乎任何你想要的版式。CSS很大程度上提升了页面效果，它和HTML树共同渲染成的rendertree决定了你的网页看上去是什么样子的。

在学习CSS之前，请确保你已经掌握以下文档中所提到的内容：

* HTML(简化版)
* CSS的基础导入与客制化规范

## 什么是CSS？

“

CSS 指层叠样式表 (**C**ascading **S**tyle **S**heets)

„

1. 样式定义**如何显示**HTML元素
2. 样式通常存储在**样式表**中
3. 外部样式表通常存储在**CSS文件**中
4. 多个样式定义可**层叠**为一个

## 样式为何而生？

HTML标签用于定义文档内容，如下：

```
<h1>My Document</h1>
<p>Hello World!</p>

```

样式表定义如何显示HTML元素，就像HTML中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的.css文件中。通常情况下，我们需要编辑一个CSS文档来改变页面的布局和外观，但本站由于简化了HTML，因此我们制作了一个模板来帮助嵌入CSS，详见此处。

## CSS规则

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是您需要改变样式的HTML元素，每条声明由一个属性和一个值组成。

例如，在

```
h1 {color:blue;font-size:10px}

```

这行CSS中，h1是一个选择器，大括号内的内容都是声明。其中，“color”、“font-size”被称为“属性”，“blue”、“10px”被称为“值”。

CSS以“/\*”与“\*/”来进行注释。

## ID与Class选择器

ID选择器可以为标有特定ID的HTML元素指定样式,HTML元素以ID属性来设置ID选择器,CSS中ID选择器以 "#" 来定义。以下的样式规则应用于元素属性 id="mypage1":

```
#mypage1
{
 text-align:center;
 color:red;
}

```

**注意：合法ID名不能以数字开头。**

Class选择器是本站中最常用的CSS选择器类型，其与<div class="...">的搭配是一个典型的CSS使用范例。

Class选择器用于描述一组元素的样式，Class选择器有别于id选择器，Class可以在多个元素中使用，在HTML中以class属性表示，在CSS中，类选择器以一个“.”显示。

举例：

```
.mytext {text-align:center;}

```

你也可以指定特定的 HTML 元素使用 class:

```
p.mytext {text-align:center;}

```

**同理，不要使用数字作为类名的第一个字符。**

## CSS元素

以下我们将提及CSS一些具体元素的语法，它包括：

>>属性表（CSS参考手册）

* >>基本文本
* >>链接
* >>列表
* >>盒子模型
* >>边框
* >>显示
* >>定位
* >>布局
* >>浮动
* >>对齐
* >>组合选择符

>>伪类

<<伪类

CSS伪类是用来添加一些选择器的特殊效果。

伪类的语法：

```
selector:pseudo-class {property:value;}

```

例如，链接的不同状态，元素的子元素都可以使用伪类：

```
a:link {color:#FF0000;} /\* 未访问的链接 \*/
a:visited {color:#00FF00;} /\* 已访问的链接 \*/
a:hover {color:#FF00FF;} /\* 鼠标划过链接 \*/
a:active {color:#0000FF;} /\* 已选中的链接 \*/

```

伪类可以和CSS类配合使用，伪类的作用很大，例如，你可以使用:first-child伪类来选择父元素的第一个子元素，也可以使用:lang伪类为不同的语言定义特殊的规则。

```
q:lang(no) {quotes: "~" "~";} /\* 使用:lang类为属性值为no的q元素定义引号的类型 \*/

```

>>伪元素

<<伪元素

伪元素是用来添加一些选择器的特殊效果。

伪元素的语法：

```
selector:pseudo-element {property:value;}

```

CSS类也可以使用伪元素：

```
selector.class:pseudo-element {property:value;}

```

常见伪元素：

* "first-line"伪元素用于向文本的首行设置特殊样式；
* "first-letter" 伪元素用于向文本的首字母设置特殊样式；
* ":before" 伪元素可以在元素的内容前面插入新内容；
* ":after" 伪元素可以在元素的内容之后插入新内容.

以下是一个伪元素结合使用的例子：

```
p:first-letter
{
 color:#ff0000;
 font-size:xx-large;
}
p:first-line
{
 color:#0000ff;
 font-variant:small-caps;
}
h1:before
{
 content:url(example.png);
}
h1:after
{
 content:url(example.png);
}

```

>>下拉菜单

<<下拉菜单

这里将教你使用CSS创建一个鼠标移动上去后显示下拉菜单的效果，具体效果可以看我们的顶部导航栏。

### 基本类

```
.dropdown {
 position: relative;
 display: inline-block;
}
.dropdown-content {
 display: none;
 position: absolute;
 background-color: #f9f9f9;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
 display: block;
}

```

### 可选取类

创建下拉菜单，并允许用户选取列表中的某一项：

```
/\* 下拉按钮样式 \*/
.dropbtn {
 background-color: #4CAF50;
 color: white;
 padding: 16px;
 font-size: 16px;
 border: none;
 cursor: pointer;
}

/\* 容器 <div> - 需要定位下拉内容 \*/
.dropdown {
 position: relative;
 display: inline-block;
}

/\* 下拉内容 (默认隐藏) \*/
.dropdown-content {
 display: none;
 position: absolute;
 background-color: #f9f9f9;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/\* 下拉菜单的链接 \*/
.dropdown-content a {
 color: black;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
}

/\* 鼠标移上去后修改下拉菜单链接颜色 \*/
.dropdown-content a:hover {background-color: #f1f1f1}

/\* 在鼠标移上去后显示下拉菜单 \*/
.dropdown:hover .dropdown-content {
 display: block;
}

/\* 当下拉内容显示后修改下拉按钮的背景颜色 \*/
.dropdown:hover .dropbtn {
 background-color: #3e8e41;
}

```

此时，你还需要在Html中创建链接，在本站中，使用[[页面名]]即可，但在正常的html里，你需要使用<a href="..."></a>来完成这一功能。

>>提示工具

<<提示工具

提示工具是在鼠标移动到指定元素后触发的微对话框。

提示工具的定位等与文本相同，因此我们直接给到代码：

```
/\* Tooltip 容器 \*/
.tooltip {
 position: relative;
 display: inline-block;
 border-bottom: 1px dotted black; /\* 悬停元素上显示点线 \*/
}

/\* Tooltip 文本 \*/
.tooltip .tooltiptext {
 visibility: hidden;
 width: 120px;
 background-color: black;
 color: #fff;
 text-align: center;
 padding: 5px 0;
 border-radius: 6px;

 /\* 定位 \*/
 position: absolute;
 z-index: 1;
}

/\* 鼠标移动上去后显示提示框 \*/
.tooltip:hover .tooltiptext {
 visibility: visible;
}

/\* 底部箭头 \*/
.tooltip .tooltiptext {
 width: 120px;
 top: 100%;
 left: 50%;
 margin-left: -60px; /\* 使用一半宽度 (120/2 = 60) 来居中提示工具 \*/
}

```

>>媒体类型

<<媒体类型

媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在打印纸上，或听觉浏览器等等。

一些CSS属性只设计了某些媒体。例如voice-family属性是专为听觉用户代理，其它一些属性可用于不同的媒体类型。例如，font-size属性可用于屏幕和印刷媒体，但有不同的值。屏幕和打印纸的文件不同，通常需要一个更大的字体，sans-serif字体比较适合在屏幕上阅读，而serif字体更容易在纸上阅读。

### @media规则

@media 规则允许在相同样式表为不同媒体设置不同的样式。

在下面的例子告诉我们浏览器屏幕上显示一个14像素的Verdana字体样式。但是如果页面打印，将是10个像素的Times字体。请注意，font-weight在屏幕上和纸上设置为粗体：

```
@media screen
{
 p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
 p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
 p.test {font-weight:bold;}
}

```

>>计数器

<<计数器

计数器通过一个变量来设置，根据规则递增变量。

CSS 计数器使用到以下几个属性：

* counter-reset - 创建或者重置计数器
* counter-increment - 递增变量
* content - 插入生成的内容
* counter() 或 counters() 函数 - 将计数器的值添加到元素
* 要使用 CSS 计数器，得先用counter-reset创建：

例如，可以在页面创建一个计数器 (在body选择器中)，每个<h2>元素的计数值都会递增，并在每个<h2>元素前添加 "Section <计数值>:"

```
body {
 counter-reset: section;
}

h2::before {
 counter-increment: section;
 content: "Section " counter(section) ": ";
}

```

### 嵌套计数器

运用以下代码可以在页面创建一个计数器，在每一个<h1>元素前添加计数值 "Section <主标题计数值>.", 嵌套的计数值则放在<h2>元素的前面，内容为 "<主标题计数值>.<副标题计数值>":

```
body {
 counter-reset: section;
}

h1 {
 counter-reset: subsection;
}

h1::before {
 counter-increment: section;
 content: "Section " counter(section) ". ";
}

h2::before {
 counter-increment: subsection;
 content: counter(section) "." counter(subsection) " ";
}

```

>>!important规则

<<!important规则

### 什么是!important

CSS中的!important规则用于增加样式的权重。

!important与优先级无关，但它与最终的结果直接相关，使用一个!important规则时，此声明将覆盖任何其他声明。当两条相互冲突的带有!important规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

```
#mypage1 {
 background-color: white;
}
.mytext {
 background-color: black;
}
p {
 background-color: blue !important;
}

```

如上图所示，尽管ID选择器和类选择器具有更高的优先级，但三个段落背景颜色都显示为蓝色，因为!important规则会覆盖background-color属性。

### 使用建议

* 一定要优先考虑使用样式规则的优先级来解决问题而不是!important
* 只有在需要覆盖全站或外部CSS的特定页面中使用!important
* 永远不要在你的插件中使用!important
* 永远不要在全站范围的CSS代码中使用!important

## 下一步规划

恭喜你，你已初步掌握了CSS的基本操作办法，超越了90%的wiki写手！

但这是不够的，特别是你要继续钻研专业的网站开发的话，下一步，你应该学习JavaScript。

JavaScript其实和Java一点关系都没有，它的名称最初叫作LiveScript，因此，不要有思想负担，JavaScript拥有非常简单的语法，几乎每个人都有能力编译JavaScript 片段。

但JavaScript在使网页更具活力的同时，也为网站维护增加了难度，埋下了技术隐患，为了安全考虑，用户仅允许在个人页编辑JS。如果你希望这一脚本作用于全站，请将其递交管理层审核，管理层审核通过后会递交平台审核。

希望各位写手能够获得帮助！