一溅话、CSS背景
- CSS 允許應(yīng)用純色作為背景晓锻，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果。
- CSS 在這方面的能力遠(yuǎn)遠(yuǎn)在 HTML 之上飞几。
背景色
- 可以使用 background-color 屬性為元素設(shè)置背景色砚哆。這個(gè)屬性接受任何合法的顏色值。
- 這條規(guī)則把元素的背景設(shè)置為灰色：
p {background-color: gray;}
- 如果你希望背景色從元素中的文本向外少有延伸屑墨，只需增加一些內(nèi)邊距：
p {background-color: gray; padding: 20px;}
- 可以為所有元素設(shè)置背景色躁锁，這包括 body 一直到 em 和 a 等行內(nèi)元素。
- background-color 不能繼承卵史，其默認(rèn)值是 transparent战转。transparent 有“透明”之意。也就是說(shuō)以躯，如果一個(gè)元素沒(méi)有指定背景色槐秧，那么背景就是透明的，這樣其祖先元素的背景才能可見(jiàn)寸潦。
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
<body>
<h1>這是標(biāo)題 1</h1>
<h2>這是標(biāo)題 2</h2>
<p>這是段落</p>
<p class="no2">這個(gè)段落設(shè)置了內(nèi)邊距色鸳。</p>
</body>
</html>
背景圖像
要把圖像放入背景，需要使用 background-image 屬性见转。background-image 屬性的默認(rèn)值是 none命雀，表示背景上沒(méi)有放置任何圖像。
如果需要設(shè)置一個(gè)背景圖像斩箫，必須為這個(gè)屬性設(shè)置一個(gè) URL 值：
body {background-image: url(/i/eg_bg_04.gif);}
- 大多數(shù)背景都應(yīng)用到 body 元素吏砂，不過(guò)并不僅限于此。
- 下面例子為一個(gè)段落應(yīng)用了一個(gè)背景乘客，而不會(huì)對(duì)文檔的其他部分應(yīng)用背景：
p.flower {background-image: url(/i/eg_bg_03.gif);}
- 你甚至可以為行內(nèi)元素設(shè)置背景圖像狐血，下面的例子為一個(gè)鏈接設(shè)置了背景圖像：
a.radio {background-image: url(/i/eg_bg_07.gif);}
- 理論上講，甚至可以向 textareas 和 select 等替換元素的背景應(yīng)用圖像易核，不過(guò)并不是所有用戶(hù)代理都能很好地處理這種情況匈织。
- 另外還要補(bǔ)充一點(diǎn)，background-image 也不能繼承牡直。事實(shí)上缀匕，所有背景屬性都不能繼承。
<html>
<head>
<style type="text/css">
body {background-image:url(/i/eg_bg_04.gif);}
p.flower {background-image: url(/i/eg_bg_03.gif); padding: 20px;}
a.radio {background-image: url(/i/eg_bg_07.gif); padding: 20px;}
</style>
</head>
<body>
<p class="flower">我是一個(gè)有花紋背景的段落碰逸。<a href="#" class="radio">我是一個(gè)有放射性背景的鏈接乡小。</a></p>
<p><b>注釋?zhuān)?lt;/b>為了清晰地顯示出段落和鏈接的背景圖像，我們?yōu)樗鼈冊(cè)O(shè)置了少許內(nèi)邊距饵史。</p>
</body>
</html>
背景重復(fù)
如果需要在頁(yè)面上對(duì)背景圖像進(jìn)行平鋪满钟，可以使用 background-repeat 屬性胜榔。
屬性值 repeat 導(dǎo)致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣湃番。repeat-x 和 repeat-y 分別導(dǎo)致圖像只在水平或垂直方向上重復(fù)夭织，no-repeat 則不允許圖像在任何方向上平鋪。
默認(rèn)地牵辣，背景圖像將從一個(gè)元素的左上角開(kāi)始摔癣。請(qǐng)看下面的例子：
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
<html>
<head>
<style type="text/css">
body
{
background-image:
url(/i/eg_bg_03.gif);
background-repeat: repeat-y
}
</style>
</head>
<body>
</body>
</html>
背景定位
可以利用 background-position 屬性改變圖像在背景中的位置奴饮。
下面的例子在 body 元素中將一個(gè)背景圖像居中放置：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
- 為 background-position 屬性提供值有很多方法纬向。首先，可以使用一些關(guān)鍵字：top戴卜、bottom逾条、left、right 和 center投剥。通常师脂，這些關(guān)鍵字會(huì)成對(duì)出現(xiàn)，不過(guò)也不總是這樣江锨。還可以使用長(zhǎng)度值吃警，如 100px 或 5cm，最后也可以使用百分?jǐn)?shù)值啄育。不同類(lèi)型的值對(duì)于背景圖像的放置稍有差異酌心。
關(guān)鍵字
- 圖像放置關(guān)鍵字最容易理解，其作用如其名稱(chēng)所表明的作岖。例如埃跷，top right 使圖像放置在元素內(nèi)邊距區(qū)的右上角鄙麦。
- 根據(jù)規(guī)范，位置關(guān)鍵字可以按任何順序出現(xiàn)侯勉，只要保證不超過(guò)兩個(gè)關(guān)鍵字 - 一個(gè)對(duì)應(yīng)水平方向，另一個(gè)對(duì)應(yīng)垂直方向铝阐。
- 如果只出現(xiàn)一個(gè)關(guān)鍵字址貌，則認(rèn)為另一個(gè)關(guān)鍵字是 center。
- 所以徘键，如果希望每個(gè)段落的中部上方出現(xiàn)一個(gè)圖像练对，只需聲明如下：
p
{
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;
}
- 下面是等價(jià)的位置關(guān)鍵字：
百分?jǐn)?shù)值
- 百分?jǐn)?shù)值的表現(xiàn)方式更為復(fù)雜。假設(shè)你希望用百分?jǐn)?shù)值將圖像在其元素中居中啊鸭，這很容易：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50% 50%;
}
- 這會(huì)導(dǎo)致圖像適當(dāng)放置锹淌，其中心與其元素的中心對(duì)齊。換句話(huà)說(shuō)赠制，百分?jǐn)?shù)值同時(shí)應(yīng)用于元素和圖像赂摆。也就是說(shuō)挟憔，圖像中描述為 50% 50% 的點(diǎn)（中心點(diǎn)）與元素中描述為 50% 50% 的點(diǎn)（中心點(diǎn)）對(duì)齊。
- 如果圖像位于 0% 0%烟号，其左上角將放在元素內(nèi)邊距區(qū)的左上角绊谭。如果圖像位置是 100% 100%，會(huì)使圖像的右下角放在右邊距的右下角汪拥。
- 因此达传，如果你想把一個(gè)圖像放在水平方向 2/3、垂直方向 1/3 處迫筑，可以這樣聲明：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:66% 33%;
}
- 如果只提供一個(gè)百分?jǐn)?shù)值宪赶，所提供的這個(gè)值將用作水平值，垂直值將假設(shè)為 50%脯燃。這一點(diǎn)與關(guān)鍵字類(lèi)似搂妻。
- background-position 的默認(rèn)值是 0% 0%，在功能上相當(dāng)于 top left辕棚。這就解釋了背景圖像為什么總是從元素內(nèi)邊距區(qū)的左上角開(kāi)始平鋪欲主，除非您設(shè)置了不同的位置值。
長(zhǎng)度值
- 長(zhǎng)度值解釋的是元素內(nèi)邊距區(qū)左上角的偏移逝嚎。偏移點(diǎn)是圖像的左上角扁瓢。
- 比如，如果設(shè)置值為 50px 100px补君，圖像的左上角將在元素內(nèi)邊距區(qū)左上角向右 50 像素引几、向下 100 像素的位置上：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50px 100px;
}
- 注意，這一點(diǎn)與百分?jǐn)?shù)值不同赚哗，因?yàn)槠浦皇菑囊粋€(gè)左上角到另一個(gè)左上角她紫。也就是說(shuō)，圖像的左上角與 background-position 聲明中的指定的點(diǎn)對(duì)齊屿储。
背景關(guān)聯(lián)
如果文檔比較長(zhǎng)贿讹，那么當(dāng)文檔向下滾動(dòng)時(shí)，背景圖像也會(huì)隨之滾動(dòng)够掠。當(dāng)文檔滾動(dòng)到超過(guò)圖像的位置時(shí)民褂，圖像就會(huì)消失。
你可以通過(guò) background-attachment 屬性防止這種滾動(dòng)疯潭。通過(guò)這個(gè)屬性赊堪，可以聲明圖像相對(duì)于可視區(qū)是固定的（fixed），因此不會(huì)受到滾動(dòng)的影響：
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
- background-attachment 屬性的默認(rèn)值是 scroll竖哩，也就是說(shuō)哭廉，在默認(rèn)的情況下，背景會(huì)隨文檔滾動(dòng)相叁。
<html>
<head>
<style type="text/css">
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
</style>
</head>
<body>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)遵绰。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)辽幌。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)椿访。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)乌企。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)成玫。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)加酵。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)哭当。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)猪腕。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)荣病。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)码撰。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)个盆。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)朵栖。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)颊亮。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)陨溅。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)终惑。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)门扇。</p>
</body>
</html>
CSS 背景屬性
二雹有、CSS文本
- CSS 文本屬性可定義文本的外觀(guān)。
- 通過(guò)文本屬性臼寄，你可以改變文本的顏色霸奕、字符間距，對(duì)齊文本吉拳，裝飾文本质帅，對(duì)文本進(jìn)行縮進(jìn)，等等留攒。
縮進(jìn)文本
- 把 Web 頁(yè)面上的段落的第一行縮進(jìn)煤惩，這是一種最常用的文本格式化效果。
- CSS 提供了 text-indent 屬性炼邀，該屬性可以方便地實(shí)現(xiàn)文本縮進(jìn)魄揉。
- 通過(guò)使用 text-indent 屬性，所有元素的第一行都可以縮進(jìn)一個(gè)給定的長(zhǎng)度拭宁，甚至該長(zhǎng)度可以是負(fù)值洛退。
- 這個(gè)屬性最常見(jiàn)的用途是將段落的首行縮進(jìn)票彪，下面的規(guī)則會(huì)使所有段落的首行縮進(jìn) 5 em：
p {text-indent: 5em;}
- 一般來(lái)說(shuō)，可以為所有塊級(jí)元素應(yīng)用 text-indent不狮，但無(wú)法將該屬性應(yīng)用于行內(nèi)元素降铸，圖像之類(lèi)的替換元素上也無(wú)法應(yīng)用 text-indent 屬性。不過(guò)摇零，如果一個(gè)塊級(jí)元素（比如段落）的首行中有一個(gè)圖像推掸，它會(huì)隨該行的其余文本移動(dòng)。
- 如果想把一個(gè)行內(nèi)元素的第一行“縮進(jìn)”驻仅，可以用左內(nèi)邊距或外邊距創(chuàng)造這種效果谅畅。
使用負(fù)值
- text-indent 還可以設(shè)置為負(fù)值。利用這種技術(shù)噪服，可以實(shí)現(xiàn)很多有趣的效果毡泻，比如“懸掛縮進(jìn)”，即第一行懸掛在元素中余下部分的左邊：
p {text-indent: -5em;}
- 不過(guò)在為 text-indent 設(shè)置負(fù)值時(shí)要當(dāng)心粘优，如果對(duì)一個(gè)段落設(shè)置了負(fù)值仇味，那么首行的某些文本可能會(huì)超出瀏覽器窗口的左邊界。為了避免出現(xiàn)這種顯示問(wèn)題雹顺，建議針對(duì)負(fù)縮進(jìn)再設(shè)置一個(gè)外邊距或一些內(nèi)邊距：
p {text-indent: -5em; padding-left: 5em;}
使用百分比值
- text-indent 可以使用所有長(zhǎng)度單位丹墨，包括百分比值。
- 百分?jǐn)?shù)要相對(duì)于縮進(jìn)元素父元素的寬度嬉愧。換句話(huà)說(shuō)贩挣，如果將縮進(jìn)值設(shè)置為 20%，所影響元素的第一行會(huì)縮進(jìn)其父元素寬度的 20%没酣。
- 在下例中王财，縮進(jìn)值是父元素的 20%，即 100 個(gè)像素：
div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>
繼承
- text-indent 屬性可以繼承裕便，請(qǐng)考慮如下標(biāo)記：
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>
- 以上標(biāo)記中的段落也會(huì)縮進(jìn) 50 像素绒净，這是因?yàn)檫@個(gè)段落繼承了 id 為 inner 的 div 元素的縮進(jìn)值。
水平對(duì)齊
text-align 是一個(gè)基本的屬性闪金，它會(huì)影響一個(gè)元素中的文本行互相之間的對(duì)齊方式疯溺。它的前 3 個(gè)值相當(dāng)直接，不過(guò)第 4 個(gè)和第 5 個(gè)則略有些復(fù)雜哎垦。
值 left囱嫩、right 和 center 會(huì)導(dǎo)致元素中的文本分別左對(duì)齊、右對(duì)齊和居中漏设。
西方語(yǔ)言都是從左向右讀墨闲，所有 text-align 的默認(rèn)值是 left。文本在左邊界對(duì)齊郑口，右邊界呈鋸齒狀（稱(chēng)為“從左到右”文本）鸳碧。對(duì)于希伯來(lái)語(yǔ)和阿拉伯語(yǔ)之類(lèi)的的語(yǔ)言盾鳞，text-align 則默認(rèn)為 right，因?yàn)檫@些語(yǔ)言從右向左讀瞻离。不出所料腾仅，center 會(huì)使每個(gè)文本行在元素中居中。
將塊級(jí)元素或表元素居中套利，要通過(guò)在這些元素上適當(dāng)?shù)卦O(shè)置左推励、右外邊距來(lái)實(shí)現(xiàn)。
text-align:center 與 <CENTER>
- 你可能會(huì)認(rèn)為 text-align:center 與 <CENTER> 元素的作用一樣肉迫，但實(shí)際上二者大不相同验辞。
- <CENTER> 不僅影響文本，還會(huì)把整個(gè)元素居中喊衫。text-align 不會(huì)控制元素的對(duì)齊跌造，而只影響內(nèi)部?jī)?nèi)容。元素本身不會(huì)從一段移到另一端族购，只是其中的文本受影響壳贪。
justify
- 最后一個(gè)水平對(duì)齊屬性是 justify。
- 在兩端對(duì)齊文本中联四，文本行的左右兩端都放在父元素的內(nèi)邊界上撑碴。然后，調(diào)整單詞和字母間的間隔朝墩，使各行的長(zhǎng)度恰好相等。你也許已經(jīng)注意到了伟姐，兩端對(duì)齊文本在打印領(lǐng)域很常見(jiàn)收苏。
- 需要注意的是，要由用戶(hù)代理（而不是 CSS）來(lái)確定兩端對(duì)齊文本如何拉伸愤兵，以填滿(mǎn)父元素左右邊界之間的空間鹿霸。如需了解詳情，請(qǐng)參閱 CSS text-align 屬性參考頁(yè)秆乳。
字間隔
word-spacing 屬性可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔懦鼠。其默認(rèn)值 normal 與設(shè)置值為 0 是一樣的。
word-spacing 屬性接受一個(gè)正長(zhǎng)度值或負(fù)長(zhǎng)度值屹堰。如果提供一個(gè)正長(zhǎng)度值肛冶，那么字之間的間隔就會(huì)增加。為 word-spacing 設(shè)置一個(gè)負(fù)值扯键，會(huì)把它拉近：
<html>
<head>
<style type="text/css">
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
</style>
</head>
<body>
<p class="spread">This is some text. This is some text.</p>
<p class="tight">This is some text. This is some text.</p>
</body>
</html>
字母間隔
- letter-spacing 屬性與 word-spacing 的區(qū)別在于睦袖，字母間隔修改的是字符或字母之間的間隔。
與 word-spacing 屬性一樣荣刑，letter-spacing 屬性的可取值包括所有長(zhǎng)度馅笙。默認(rèn)關(guān)鍵字是 normal（這與 letter-spacing:0 相同）伦乔。輸入的長(zhǎng)度值會(huì)使字母之間的間隔增加或減少指定的量：
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>
<html>
<head>
<style type="text/css">
p.spread {letter-spacing: -0.5em;}
p.tight {letter-spacing: 20px;}
</style>
</head>
<body>
<p class="spread">This is some text. This is some text.</p>
<p class="tight">This is some text. This is some text.</p>
</body>
</html>
字符轉(zhuǎn)換
-
text-transform 屬性處理文本的大小寫(xiě)。這個(gè)屬性有 4 個(gè)值：
- none
- uppercase
- lowercase
- capitalize
默認(rèn)值 none 對(duì)文本不做任何改動(dòng)董习，將使用源文檔中的原有大小寫(xiě)烈和。顧名思義，uppercase 和 lowercase 將文本轉(zhuǎn)換為全大寫(xiě)和全小寫(xiě)字符皿淋。最后招刹，capitalize 只對(duì)每個(gè)單詞的首字母大寫(xiě)。
作為一個(gè)屬性沥匈，text-transform 可能無(wú)關(guān)緊要蔗喂，不過(guò)如果你突然決定把所有 h1 元素變?yōu)榇髮?xiě)，這個(gè)屬性就很有用高帖。不必單獨(dú)地修改所有 h1 元素的內(nèi)容缰儿，只需使用 text-transform 為你完成這個(gè)修改：
h1 {text-transform: uppercase}
- 使用 text-transform 有兩方面的好處。首先散址，只需寫(xiě)一個(gè)簡(jiǎn)單的規(guī)則來(lái)完成這個(gè)修改乖阵，而無(wú)需修改 h1 元素本身。其次预麸，如果你以后決定將所有大小寫(xiě)再切換為原來(lái)的大小寫(xiě)瞪浸，可以更容易地完成修改。
<html>
<head>
<style type="text/css">
h1 {text-transform: uppercase}
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>
</head>
<body>
<h1>This Is An H1 Element</h1>
<p class="uppercase">This is some text in a paragraph.</p>
<p class="lowercase">This is some text in a paragraph.</p>
<p class="capitalize">This is some text in a paragraph.</p>
</body>
</html>
文本裝飾
接下來(lái)吏祸，我們討論 text-decoration 屬性对蒲，這是一個(gè)很有意思的屬性，它提供了很多非常有趣的行為贡翘。
-
text-decoration 有 5 個(gè)值：
- none
- underline
- overline
- line-through
- blink
