關(guān)聯(lián)現(xiàn)在已經(jīng)知道,可以將背景原圖像放在元素背景上的任何位置,而且可以控制(從某種程度上)它如何平鋪。不過(guò),你可能已經(jīng)認(rèn)識(shí)到了,將一個(gè)圖像放在body元素的中心可
查看詳情有方向的重復(fù)(深入)在前面關(guān)于重復(fù)的一節(jié)中,我們介紹了值repeat-x、repeat-y和repeat,并說(shuō)明了它們對(duì)背景圖像的平鋪有何影響。不過(guò),對(duì)于這些值,平鋪模式總是從包
查看詳情長(zhǎng)度值最后,我們來(lái)看定位的長(zhǎng)度值。在為原圖像的位置提供長(zhǎng)度值時(shí),這些長(zhǎng)度值將解釋為從元素內(nèi)邊距區(qū)左上角的偏移。偏移點(diǎn)是原圖像的左上角。因此,如果設(shè)置值為2
查看詳情百分?jǐn)?shù)值百分?jǐn)?shù)值與關(guān)鍵字緊密相關(guān),不過(guò)其表現(xiàn)方式更為復(fù)雜。假設(shè)你希望用百分?jǐn)?shù)值將原圖像在其元素中居中。這很容易:p{background-image:url(bigyinyang.gif);b
查看詳情關(guān)鍵字圖像放置關(guān)鍵字最容易理解。其作用如其名所表明的,例如,topright使原圖像放在元素內(nèi)邊距區(qū)的右上角。再回過(guò)頭來(lái)看先前的那個(gè)小“陰陽(yáng)”符號(hào):p{background-
查看詳情利用background-repeat,可以把一個(gè)大圖像放在文檔的背景中,然后使之一直重復(fù)。在此基礎(chǔ)上,下面來(lái)看如何改變圖像在背景中的位置。例如,可以在body元素中將一個(gè)背景
查看詳情有方向的重復(fù)過(guò)去,如果想要某種“邊欄式(sidebar)”背景,必須創(chuàng)建一個(gè)很短但非常寬的圖像放在背景上。有一段時(shí)間,這種圖像的最佳大小是10像素高1,500像素寬。當(dāng)然
查看詳情關(guān)于背景的良好實(shí)踐圖像放在所指定的背景顏色之上,如果完全平鋪GIF、JPEG或其他不透明的圖像類型,圖像在背景顏色之上并不會(huì)造成任何不同,因?yàn)橥耆戒伒膱D像會(huì)填
查看詳情為什么背景不能繼承之前我專門指出過(guò),背景不能繼承。從背景圖像可以了解到為什么繼承背景不是一件好事。假設(shè)背景確實(shí)能繼承,而且向body應(yīng)用了一個(gè)背景圖像。這個(gè)
查看詳情背景圖像前面已經(jīng)介紹了前景和背景色的基礎(chǔ)知識(shí),下面來(lái)討論背景圖像。在HTML3.2中,可以通過(guò)使用BODY屬性BACKGROUND向文檔的背景關(guān)聯(lián)一個(gè)圖像:這會(huì)使用戶代理加載
查看詳情特殊效果只需結(jié)合color和background-color,就可以創(chuàng)建一些有用的效果:h1{color:white;background-color:rgb(20%,20%,20%)font-family:Arial,sans-serif;}這個(gè)例子
查看詳情歷史問(wèn)題所以,設(shè)置背景色很簡(jiǎn)單——對(duì)此只有一個(gè)小小的警告:Navigator4對(duì)背景色的處理完全是錯(cuò)誤的。它不是將背景色應(yīng)用到整個(gè)內(nèi)容框和內(nèi)邊距,背景色只出現(xiàn)在文本
查看詳情元素的背景區(qū)包括前景之下直到邊框外邊界的所有空間,因此,內(nèi)容框和內(nèi)邊距都是元素背景的一部分,且邊框畫在背景之上。CSS允許應(yīng)用純色作為背景,也允許使用背景圖像
查看詳情由color的定義可知,這個(gè)屬性是可以繼承的。這是有道理的,因?yàn)槿绻暶鱞ody{color:gray;},你可能希望該段落中的所有文本也應(yīng)當(dāng)是灰色,即便是強(qiáng)調(diào)文本、粗體文本等
查看詳情影響表單元素(從理論上講)網(wǎng)站建設(shè)也可以為表單元素設(shè)置color值。聲明select元素有暗灰色文本就很簡(jiǎn)單,如下:select{color:rgb(33%,33%,33%);}這可能還會(huì)設(shè)置sele
查看詳情影響邊框color值還可以影響元素周圍的邊框。假設(shè)已經(jīng)聲明了以下樣式,其結(jié)果如圖9-4所示:p.aside{color:gray;border-style:solid;}圖9-4:邊框顏色取自內(nèi)容的顏色元
查看詳情color有很多用法,其中最基本的是替換HTML3.2的BODY屬性TEXT、LINK、ALINK和VLINK。利用錨偽類,color完全可以替換這些BODY屬性。下例中的第一行可以用后面的CSS重
查看詳情要設(shè)置一個(gè)元素的前最色,最容易的辦法是利用屬性color。color值:|inherit初始值:用戶代理特定的值應(yīng)用于:所有元素繼承性:有計(jì)算值:根據(jù)指定確定在第4章曾經(jīng)討論過(guò)
查看詳情還記得你第一次改變Web頁(yè)面的顏色是什么時(shí)候嗎?以前總是灰色背景上的黑色文本,其間有一些藍(lán)色的鏈接,突然之間,你可以按自己的意愿使用任何顏色組合,可以是黑色背
查看詳情內(nèi)邊距和行內(nèi)元素對(duì)于行內(nèi)元素,外邊距和內(nèi)邊距存在一個(gè)重要的區(qū)別。為說(shuō)明這一點(diǎn),下面先來(lái)看左右內(nèi)邊距。如果為左右內(nèi)邊距設(shè)置了值,左右內(nèi)邊距將是可見(jiàn)的:strong
查看詳情可以猜得到,網(wǎng)站建設(shè)CSS提供了一些屬性來(lái)設(shè)置框的單邊內(nèi)邊距,而不影響其他邊上的內(nèi)邊距。padding-top、padding-right、padding-bottom、padding-left值:<length>
查看詳情元素框的內(nèi)邊距在邊框和內(nèi)容區(qū)之間。亳不奇怪,控制這個(gè)區(qū)的最簡(jiǎn)單的屬性為padding。padding值:{1,4}1inherit初始值:對(duì)于簡(jiǎn)寫元素未定義應(yīng)用于:所有元素繼承性:無(wú)
查看詳情對(duì)于處理邊框和行內(nèi)元素我們應(yīng)該很熟悉了,因?yàn)槠湟?guī)則很大程度上與外邊距和行內(nèi)元素的相應(yīng)規(guī)則相同,這在第7章做過(guò)介紹。不過(guò),在此還是簡(jiǎn)要地介紹一下。首先,不論為
查看詳情下面我們來(lái)看所有邊框?qū)傩灾凶詈?jiǎn)短的簡(jiǎn)寫屬性:border.值:border|inherit初始值:根據(jù)單個(gè)屬性應(yīng)用于:所有元素繼承性:無(wú)計(jì)算值:根據(jù)指定確定這個(gè)屬性有一個(gè)好處,它
查看詳情遺憾的是,簡(jiǎn)寫屬性(如border-color和border-style)并不總像你想得那么有用。例如,你可能想在所有h1元素上應(yīng)用一個(gè)粗的灰色實(shí)線邊框,不過(guò)只是底邊上有此邊框。如果
查看詳情與邊框的其他方面相比,設(shè)置顏色很簡(jiǎn)單。網(wǎng)站建設(shè)CSS使用了一個(gè)簡(jiǎn)單屬性border-color,它一次可以接受最多4個(gè)顏色值。border-color值:{1,4}|inherit初始值:對(duì)簡(jiǎn)寫屬
查看詳情一旦為邊框指定一個(gè)樣式,下一步就是使用border-width為它指定一個(gè)寬度。border-width值:{1,4}|inherit初始值:對(duì)簡(jiǎn)寫屬性未定義應(yīng)用于:所有元素繼承性:無(wú)計(jì)算值:見(jiàn)
查看詳情CSS規(guī)范清楚地指出元素的背景會(huì)延伸到邊框邊界之外,因?yàn)橐?guī)范中提到,邊框繪制在“元素的背景之上”。這很重要,因?yàn)橛行┻吙蚴恰伴g斷的”(例如,點(diǎn)線邊框或虛線框),
查看詳情元素外邊距內(nèi)就是元素的邊框(border)。元素的邊框就是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。因此,元素的背景會(huì)在外邊框邊界處停止,因?yàn)楸尘安粫?huì)延伸到外邊距以內(nèi)
查看詳情網(wǎng)頁(yè)設(shè)計(jì)外邊距很有用,但同時(shí)也存在很多問(wèn)題——毫不奇怪,這些問(wèn)題都圍繞著NetscapeNavigator4.x(NN4.X)。第一個(gè)問(wèn)題是,Navigator4.x會(huì)把外邊距規(guī)則指定的外邊距
查看詳情