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

來源:互聯網
上載者:User
文章目錄
  • 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

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。