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/繼承