跳至內容

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」