跳转到内容

CSS/草稿

添加链接
维基教科书，自由的教学读本
< CSS

CSS是网页上非常常见的程序语言，主要用来控制文字和图形的样式，就像你在word文档中间设置文字的颜色、大小、字体一样。没有CSS，网页就不会做到如此炫丽。

本教程包括了CSS3。学习CSS必须对HTML语言有了解，否则即使学习了CSS也无用处。关于HTML的一些常识，本页不会作过多叙述。

一些简单的定义

[编辑]

以下内容是对于CSS的一些简单的定义。此外，关于HTML的定义（例如元素、开始标记、结束标记）请参见HTML。

样式表

[编辑]

能够决定整个网页（部分）内容样式的就是样式表，即层叠样式表，就是CSS。样式表只能位于<style></style>中或者以.css为扩展名的文件中。

下面的就是一个样式表。 

.important{
     color:red;
     font-weight:bold;
}

这个样式表的意思是：所有的属于“important”组（也叫“类”）（即HTML元素有class="important"）属性的，它们的文字是红色且加粗的。例如<span class="important">这样</span>在网页中关联了此样式表之后就会就会显示为这样。

样式

[编辑]

上面的样式表中大括号中的内容（color:red;font-weight:bold）就是样式。样式可以直接位于HTML代码中的style=""中间。（从JavaScript角度讲，样式可以是一个元素style的值。不懂得JavaScript的，可以将与JavaScript有关的内容忽略。）

属性

[编辑]
主页面：CSS/属性

上面的代码中，color和font-weight都属于属性。其中color意思是颜色，font-weight意思是字体的粗细。CSS拥有很多属性，这包括了元素的各个方面：边框、文字颜色、阴影、形状、位置……关于具体的属性用法，请参见CSS/属性。

值

[编辑]

上面的代码中，red和bold都属于值，它们的意思分别是红色和加粗。这样，我们就是到了上面的代码所述的样式就是“文字的颜色是红色、文字的粗细是加粗”。具体什么情况下的文字是红色且加粗的请看到下面的选择器。

选择器

[编辑]
主页面：CSS/选择器

选择器就是选择拥有对应效果的元素（或者伪元素），例如上面的事例中就是指的要给什么元素是红色且加粗的。上面的代码的选择器是.important，意思是属于“important”组（即HTML元素有class="important"）属性的元素。（后面的#让谁具有效果也已经提及。）

我们知道，元素是一层一层的。一个HTML文件首先是<html>元素，里面包括了<head>和<body>。其中<body>就是其元素的主要内容。<body>在<html>里面，被它包括，我们称<body>是<html>的子元素。<html>包括了<body>，我们称<html>是<body>的父元素。注意，“子元素”的定义遵循“我的附庸的附庸不是我的附庸”的原则，即元素子元素的子元素不是它的子元素。例如若<html>包括了<body>，<body>包括了<div>，则这个<div>不会被视为<html>的子元素。（这是关于HTML的一些常识，此处不展开描述。） 

<html>
<head><!-- 关于样式、链接、JS等内容 --></head>
<body><div>这是一些文字</div></body>
</html>

具体要如何用CSS选择子元素，或者具有特定特征的元素，请参阅CSS/选择器。

CSS可以干什么

[编辑]

设置文字对象的显示样式

[编辑]

这里所说的显示样式包括颜色、大小、字体、边框等。例如，如果你需要将某段文字设为红色，只需要结合html标记输入（这再次说明了不了解HTML语言，学习CSS是没有意义的）： 

<span style="color:red">红色的文字</span>

简化代码

[编辑]

CSS可以一次性给某些具有特定特征的元素有特定的效果。

如果你需要将多处文字设为红色、12pt、黑体、黄色阴影、绿色边框，你可能会这样输入： 

<span style="color:red;font-size:12pt;font-family:黑体;text-shadow:1px 1px 2px yellow;border:lime 1px solid">红色</span>的文字，<span style="color:red;font-size:12pt;font-family:黑体;text-shadow:1px 1px 2px yellow;border:lime 1px solid">红色</span>的文字，<span style="color:red;font-size:12pt;font-family:黑体;text-shadow:1px 1px 2px yellow;border:lime 1px solid">红色</span>的文字，<span style="color:red;font-size:12pt;font-family:黑体;text-shadow:1px 1px 2px yellow;border:lime 1px solid">红色</span>的文字

效果：红色的文字，红色的文字，红色的文字，红色的文字

然而，代码可以简化成这样： 

<style>.a{color:red;font-size:12pt;font-family:黑体;text-shadow:1px 1px 2px yellow;border:lime 1px solid}</style>
<span class="a">红色的</span>文字，<span class="a">红色的</span>文字，<span class="a">红色的</span>文字，<span class="a">红色的</span>文字

这里的"a"是可以替换为其他的文本的。

当然，如果不考虑对其他元素的影响，可以直接将选择器改为<span>，这样就不需要设置class="a"了。（视具体情况。）

又如，如果你需要设置去掉链接自动生成的下划线，然后让鼠标在链接上面时显示下划线，可以这样输入。 

<style>
a{text-decoration:none}
a:hover{text-decoration:underline}
</style>
<a href="https://zh.wikibooks.org">这是一个链接</a>

样式表中第一句的意思是：类型为a的元素（即所有的<a>）都没有下划线。

样式表中第二句的意思是：被鼠标停靠的类型为a的元素都有下划线。

你会发现，被鼠标停靠的类型为a的元素，按照第二句是有下划线的。但它也属于类型为a的元素，所以应该没有下划线。所以，对于被鼠标停靠的类型为a的元素，这两句是矛盾的。所以这需要考虑到CSS选择器的CSS/优先级。选择器a:hover优先于a，所以被鼠标停靠的类型为a的元素是有下划线的。没有被鼠标停靠的类型为a的元素，不符合第二句的条件:hover，所以不受第二句影响，因此是无下划线，不矛盾。

注意：这里的style表示整个网页所有的链接，而不是仅仅演示的这个链接。因此如果你需要让所有的链接都有这样的效果，你只需要定义一次<style>。

设置动画效果

[编辑]
主页面：CSS/animation

CSS可以设置动画效果。这与CSS3有关，且语法比较复杂。有兴趣的可以展开。（展开按钮在右边。）

如果你需要让某部分文字设为红色和黄色之间交替，只需要这样输入： 

<style>
@-webkit-keyframes a{
     from{color:red}
     to{color:yellow}
}
.b{-webkit-animation:a 1s linear alternate 0s}
</style>
<span class="b">红色和黄色之间的交替</span>

由于维基文本暂时不允许使用动画效果的CSS，所以这里不演示效果了。

CSS怎样放置在网页代码中

[编辑]

直接定义<style>

[编辑]

上面的演示中间你可以看到<style></style>标记，标记中间就是样式表。<style>的CSS文本是针对于整个网页（的特定文字）的（参见下面的#让谁具有效果）。

直接在网页标签中间输入

[编辑]

例如，如果你只需要把一部分文字设为红色，只需要这样： 

<span style="color:red">红色文字</span>

对于直接定义在元素中，只对被它定义的元素起效果的样式，我们称之为内联样式。

（拓展（看不懂没关系）：对于这个事例中的颜色（color）属性，HTML标签中有个现成的<font>标记，所以你可以输入：<source inline lang="html">红色文字</syntaxhighlight>但是不推荐使用这样的方法。）

链接到某个CSS文件

[编辑]
主页面：HTML

假设我给你一个现成的样式表（CSS文件），可以让链接去掉下划线，并且鼠标停留在链接上时显示下划线（同上）： 

a{text-decoration:none}
a:hover{text-decoration:underline}

要在另一个html文件中使用这个CSS，只需要在html中间输入： 

<link red="stylesheet" href="刚才那个CSS文件的地址">

这是与HTML语言的<link>标签有关的。关于<link>标签的用法，以及地址的具体表示方法，在CSS中不作具体叙述。

基本语法

[编辑]
主页面：CSS/语法

CSS是一种程序语言，它的的基本语法如下： 

选择器{属性:值;属性:值;属性:值}

这里的{和}是半角的花括号，:是半角的冒号，;是半角的分号。这些符号不可以是全角，也不可以用其他的符号代替。不同的属性值还会有自己的语法，此外还有@media、@keyframes、@font-face等特殊的语法。

参看下面的代码： 

.xxxx{color:red;background:yellow;border:1px red solid}
.togus,
.foo{
    color:blue;
    background:linear-gradient(to bottom,white,black)
}

你能够找出哪些内容是选择器、属性、值吗？

注意，多数情况下，CSS中的空格、换行（例如选择器与花括号之间、花括号与属性之间、属性与值之间，当然不包括一个单词中间或多个单词之间）可以忽略。

让谁具有效果

[编辑]
主页面：CSS/选择器

就像一群人中你要给他们不同的东西，那么本段就是讲的“给谁”。在一个样式表中，你不能让整个文档的字都是红色的。如果你希望每一个有序列表的第一列（类型为ol的元素的第一个类型为li的直接子元素）是蓝色的，而且有序列表有很多，你不可能每一次都去给标签定义。所以这需要利用到CSS的选择器了。例如，有序列表的第一列要是蓝色文字的话，只需要这样设置： 

ol>li:nth-child(1){
     color: blue
}

ol>li:nth-child(1)就是选择器。具体的选择器语法见主条目CSS/选择器。

在之后的表述中，我们通常直接用选择器代码表述元素。例如，表述“表格（table）元素如果直接是接的tr元素时，网页会自动判断并加入tbody元素作为table的子元素，然后让tr作tbody的子元素，所以tr不会是table的子元素”将有可能被简化为“如果table直接接tr，网页会自动判断并加入table>tbody，并使得table>tr变成table>tbody>tr，所以tr不会是table的子元素”。

具有什么效果

[编辑]
主页面：CSS/参考列表

就像一群人中你要给他们东西，你已经确定好了给谁，那么本段就是讲的给“什么”。假设你已经确定好了选择器，你需要给被选择的东西一些效果。这里所说的“效果”就是之前所说的“样式”。

CSS中的效果很多，除了文字颜色、边框、阴影、大小之外，还包括旋转等诸多效果。具体的效果列表见CSS/参考列表。

继承

[编辑]
主页面：CSS/继承

对于一个属性（以及它的值），如果它的子元素（在未定义这个属性的情况下）也能够拥有这个属性（以及值），我们就称之为继承。（这个定义有点难懂，可以参阅下面的代码。）有些属性是可以继承的，有些属性是不可以继承的。无论是内联样式还是样式表定义的样式，特定的属性都可以继承给其子元素。如果还是不知道什么是继承，没关系，之后的学习中会逐渐了解这个概念的。

看看下面的代码（<b>意思是加粗，属于HTML元素，类似于<span style="font-weight:bold">）： 

<span style="color:red">氯化铵，是一种<b>可溶于水</b>的盐。</span>

显然，“氯化铵”这几个字是红色的，那么“可溶于水”呢？

“可溶于水”这几个字也是红色的。这段代码的效果是：氯化铵，是一种可溶于水的盐。

但是，不是所有属性都可以继承。看看下面的代码： 

<span style="border:1px black solid;padding:3px">硫酸钡，是一种<b>难溶于水</b>的盐。</span>

上面提到了两个属性：border:1px black solid和padding:3px。意思分别是：整个元素具有1px宽的黑色边框、内间距（衬距）为3px。

如果它们都可以继承，效果就是：硫酸钡，是一种难溶于水的盐。

如果它们都不可以继承，效果就是：硫酸钡，是一种难溶于水的盐。

事实上，实际的效果为前者，也就是说border和padding都不可继承。（设想一下，假如它们两个属性只有一个是可继承的，效果会如何？）

具体哪些元素可以继承，请参阅CSS/继承。

检索自“https://zh.wikibooks.org/w/index.php?title=CSS/草稿&oldid=143766”