跳转到内容

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/属性

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

[编辑]

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

选择器

[编辑]
主页面: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 solidpadding:3px。意思分别是:整个元素具有1px宽的黑色边框、内间距(衬距)为3px。

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

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

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

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