CSS 教程Part2 [背景、文本、字型]（摘錄自 W3C School）

文章目錄

• CSS 背景
• CSS 文本
• CSS 字型

CSS 背景

CSS 允許應用純色作為背景，也允許使用背景映像建立相當複雜的效果。CSS 在這方面的能力遠遠在 HTML 之上。

 

背景色

可以使用 background-color 屬性為元素設定背景色。這個屬性接受任何合法的顏色值。background-color 不能繼承，其預設值是 transparent。transparent 有“透明”之意。也就是說，如果一個元素沒有指定背景色，那麼背景就是透明的，這樣其祖先元素的背景才能可見。

p {background-color: gray;}

 

背景映像

要把映像放入背景，需要使用 background-image 屬性。如果需要設定一個背景映像，必須為這個屬性設定一個 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

大多數背景都應用到 body 元素，不過並不僅限於此。

 

背景重複

如果需要在頁面上對背景映像進行平鋪，可以使用 background-repeat 屬性。屬性值 repeat 導致映像在水平垂直方向上都平鋪，就像以往背景映像的通常做法一樣。repeat-x 和 repeat-y 分別導致映像只在水平或垂直方向上重複，no-repeat 則不允許映像在任何方向上平鋪。預設地，背景映像將從一個元素的左上方開始。

body {

    background-image: url(/i/eg_bg_03.gif);

    background-repeat: repeat-y;

}

 

背景定位

可以利用 background-position 屬性改變映像在背景中的位置。下面的例子在 body 元素中將一個背景映像置中放置：

body {

    background-image:url('/i/eg_bg_03.gif');

    background-repeat:no-repeat;

    background-attachment:fixed;

    background-position:center;

}

把 background-attachment 屬性設定為 "fixed"，才能保證該屬性在 Firefox 和 Opera 中正常工作。

 

百分數值

百分數值的表現方式更為複雜，百分數值同時應用於元素和映像。

假設你希望用百分數值將映像在其元素中置中：background-position:50% 50%

假設你希望用百分數值將映像在其元素右下角：background-position:100% 100%

 

長度值

長度值解釋的是元素內邊距區左上方的位移。位移點是映像的左上方。如果設定值為 50px 100px，映像的左上方將在元素內邊距區左上方向右 50 像素、向下 100 像素的位置上。

 

背景關聯

如果文檔比較長，那麼當文檔向下滾動時，背景映像也會隨之滾動。當文檔滾動到超過映像的位置時，映像就會消失。

您可以通過 background-attachment 屬性防止這種滾動。通過這個屬性，可以聲明映像相對於可視區是固定的（fixed），因此不會受到滾動的影響：

 

CSS 文本

CSS 文字屬性可定義文本的外觀。通過文字屬性，您可以改變文本的顏色、字元間距，對齊文本，裝飾文本，對文本進行縮排，等等。

 

縮排文本

       把 Web 頁面上的段落的第一行縮排，這是一種最常用的文字格式設定化效果。CSS 提供了 text-indent 屬性，該屬性可以方便地實現文本縮排。通過使用 text-indent 屬性，所有元素的第一行都可以縮排一個給定的長度，甚至該長度可以是負值。這個屬性最常見的用途是將段落的首行縮排，下面的規則會使所有段落的首行縮排 5 em：

p {text-indent: 5em;}

注意：一般來說，可以為所有區塊層級元素應用 text-indent，但無法將該屬性應用於行內元素，映像之類的替換元素上也無法應用 text-indent 屬性。不過，如果一個區塊層級元素（比如段落）的首行中有一個映像，它會隨該行的其餘文本移動。

提示：如果想把一個行內元素的第一行“縮排”，可以用左內邊距或外邊距創造這種效果。

 

水平對齊

       text-align 是一個基本的屬性，它會影響一個元素中的文本行互相之間的對齊。將區塊層級元素或表元素置中，要通過在這些元素上適當地設定左、右外邊距來實現。

text-align:center 與 <CENTER>

       您可能會認為 text-align:center 與 <CENTER> 元素的作用一樣，但實際上二者大不相同。<CENTER> 不僅影響文本，還會把整個元素置中。text-align 不會控制元素的對齊，而隻影響內部內容。元素本身不會從一段移到另一端，只是其中的文本受影響。

justify

       最後一個水平對齊屬性是 justify。在左右對齊文本中，文本行的左右兩端都放在父元素的內邊界上。然後，調整單詞和字母間的間隔，使各行的長度恰好相等。左右對齊文本在列印領域很常見。

 

字間隔

word-spacing 屬性可以改變字（單詞）之間的標準間隔。其預設值 normal 與設定值為 0 是一樣的。

字母間隔

letter-spacing 屬性與 word-spacing 的區別在於，字母間隔修改的是字元或字母之間的間隔。

 

字元轉換

text-transform 屬性處理文本的大小寫。作為一個屬性，text-transform 可能無關緊要，不過如果您突然決定把所有 h1 元素變為大寫，這個屬性就很有用。不必單獨地修改所有 h1 元素的內容，只需使用 text-transform 為你完成這個修改。

 

文本裝飾

接下來，我們討論 text-decoration 屬性，這是一個很有意思的屬性，它提供了很多非常有趣的行為。通常，無裝飾的文本是預設面板，但也不總是這樣。例如，連結預設地會有底線。如果您希望去掉超連結的底線，可以使用以下 CSS 來做到這一點：

a {text-decoration: none;}

 

處理空白符

white-space 屬性會影響到使用者代理程式對來源文件中的空格、換行和 tab 字元的處理。

 

文本方向

       如果您閱讀的是英文書籍，就會從左至右、從上到下地閱讀，這就是英文的流方向。不過，並不是所有語言都如此。我們知道古漢語就是從右至左來閱讀的，當然還包括希伯來語和阿拉伯語等等。

       direction 屬性影響區塊層級元素中文本的書寫方向、表中列布局的方向、內容水平填充其元素框的方向、以及左右對齊元素中最後一行的為止。

 

 

CSS 字型CSS 字型屬性

font：字型綜合屬性

在一個聲明中設定所有字型屬性。（字型眾多屬性的綜合寫法）

 

 

font-family：規定元素的字型系列

 

font-size：屬性可設定字型的尺寸。（實際上它設定的是字型中字元框的高度）

 

font-style：屬性定義字型的風格

 

font-weight：屬性設定文本的粗細（數字值 400 相當於 關鍵字 normal，700 等價於 bold）