User:東東君/基础CSS样式

简介

CSS是英语"Cascading Style Sheets"的缩写，也称作层叠样式表、级联样式表等。

在浏览网页时，你一定想过：这里的颜色、那里的形状，它们都是如何产生，如何控制的；你所看到的这段文字，又是依据什么规则显示的等等...这一切，都来源于CSS。

CSS样式是近代网页样式的根本，目前我们浏览的网页，其中的样式、排版、以及一部分的动画效果都是由CSS定义的，由wikitext编写出内容也不例外。

你可能已经发现了，在许多模版中提供的参数中，就有需要输入CSS代码的参数，原因在于CSS为我们提供了一系列便捷、灵活的样式，借此我们可以制作出各种各样独一无二的效果。

那么，就开始学习CSS，为条目添加属于它们的style=""吧。

前期准备

• 基础的wikitext知识
• 基础的HTML知识（不了解也可以）
• 一个代码沙盒，你可以使用本页面下的沙盒：User:東東君/基础CSS样式/沙盒 或公共沙盒：Help:沙盒 来进行测试，或者也可以在下栏输入一个沙盒名，创建自己的沙盒。

注意：只需要输入沙盒名即可，将自动在你的用户页下创建。

• 打开这个页面，在“编辑工具”中找到“Syntax highlighte”代码高亮工具并开启，保存。

开始

CSS本身由选择器、样式等构成，这里我们先来学习样式。

其中，样式按书写位置可以划分为三种：内联样式、style标签样式、以及css样式文件。由于wiki系统的限制，我们不能使用style标签样式，所以这里只介绍内联和css文件样式。

所谓内联样式，就是写在HTML标签中style属性里的CSS代码，它不需要选择器，只作用于当前节点及其子节点（如果该样式默认继承的话）。

<div style=""></div>

css样式文件，顾名思义，就是专门写css样式的文件，和内联不同样式不同的是，其中可以使用“选择器”，来解决在许多相同元素需要添加相同样式时重复书写所造成的代码冗余问题，同时，还可以利用其实现一些有趣的交互功能。

规则总述

一段普通的包含CSS样式的HTML代码：

<span style="color:red; font-size:16px">萌娘百科，万物皆可萌！</span>

• 样式和值之间使用:（半角冒号）隔开，样式与样式之间使用;（半角分号）隔开
• 后面的样式优先级大于前面的样式
• 子节点的样式优先级大于父节点的样式
• 忽略所有空格及换行
• CSS有较高的容错性，错误的样式或值将被忽略