百分?jǐn)?shù)如果width,內(nèi)邊距和外邊距設(shè)置為百分?jǐn)?shù)值,會(huì)應(yīng)用同樣的基本規(guī)則。值聲明為長度還是百分?jǐn)?shù)并不重要。百分?jǐn)?shù)可能很有用。假設(shè)你希望一個(gè)元素的內(nèi)容是其包含塊
查看詳情到目前為止,看上去一切都很直接明了,你可能會(huì)奇怪前面為什么會(huì)說情況可能很復(fù)雜。外邊距還有一個(gè)方面很特殊:外邊距可以為負(fù),這種設(shè)置是對(duì)的,完全可以將外邊距設(shè)置
查看詳情設(shè)置auto如果設(shè)置width、margin-left或margin-right中的某個(gè)值為auto,而余下兩個(gè)屬性指定為特定的值,那么設(shè)置為auto的屬性會(huì)確定所需的長度,從而使元素框的寬度等
查看詳情塊級(jí)元素的表現(xiàn)有時(shí)可以預(yù)測(cè),有時(shí)則很讓人驚訝。例如,元素沿橫軸和豎軸擺放時(shí),其處理就可能不同,為了充分了解如何處理塊級(jí)元素,必須對(duì)一些邊界和區(qū)域很清楚。圖7
查看詳情在前面幾章中。我們針對(duì)CSS如何處理文檔中的文本和字體介紹了很多實(shí)用知識(shí)。這一章中,我們將介紹視覺表現(xiàn)的一些理論方面,另外,前面為了強(qiáng)調(diào)CSS如何實(shí)現(xiàn)而跳過了一
查看詳情CSS2包含一個(gè)屬性來為文本增加陰彩,不過這個(gè)屬性并沒有在CSS2.1中保留,因?yàn)樵贑SS2.1完成前沒有一個(gè)瀏覽器對(duì)此提供了充分的支持??梢钥紤]一下,如果要讓W(xué)eb瀏覽器
查看詳情下面來看如何使用text-transform屬性處理文本的大小寫。默認(rèn)值none對(duì)文本不做任何改動(dòng),將使用源文檔中原有的大小寫,頭名思義,uppercase和lowercase將文本轉(zhuǎn)換為全
查看詳情前面已經(jīng)介紹了對(duì)齊,下面來看如何處理網(wǎng)頁設(shè)計(jì)中字間隔和字母間隔。同樣地,這些屬性存在一些不太直觀的問題。字間隔word-spacing屬性接受一個(gè)正長度值或負(fù)長度值
查看詳情前面已經(jīng)討論了水平對(duì)齊,下面來看垂直對(duì)齊。因?yàn)槲谋拘械臉?gòu)造將在第7章更詳細(xì)地討論,這里只是提供一個(gè)簡(jiǎn)單的概述。行高line-height屬性是指文本行基線之間的距離
查看詳情不錯(cuò),很多Web設(shè)計(jì)都需要選擇適當(dāng)?shù)念伾?,讓頁面有最酷的外觀,不過在真正的Web設(shè)計(jì)中,可能更多的時(shí)間都花在這樣一些問題上:文本放在哪里,文本的外觀是怎樣的。由于
查看詳情可以看到,CSS允許匹配字體系列、加粗和變形,所有這些都是通過字體匹配完成的,這是一個(gè)相當(dāng)復(fù)雜的過程。如果創(chuàng)作人員想幫助用戶代理在顯示其文檔時(shí)做出正確的字體
查看詳情font屬性當(dāng)然,所有這些屬性都很復(fù)雜,不過要使用所有這些屬性可能更麻煩:h1{font-family:Verdana,Helvetica,Arial,sans-serif;font-size:30px;font-weight:900;fo
查看詳情風(fēng)格和變形今天討論的屬性簡(jiǎn)單易懂,所以閱讀這一部分可能很輕松,首先,我們將討論font-style,再轉(zhuǎn)向font-variant,最后對(duì)字體屬性做一個(gè)總結(jié)。有風(fēng)格的字體font-st
查看詳情盡管你可能還沒有意識(shí)到,但實(shí)際上你已經(jīng)對(duì)字體加粗很熟悉了,粗體文本就是字體加粗的一個(gè)很常見的例子。利用font-weight屬性,CSS允許對(duì)字體加粗有更多控制,至少在
查看詳情網(wǎng)頁設(shè)計(jì)師應(yīng)該清楚地認(rèn)識(shí)到,字體選擇是一個(gè)常見(而且重要)的特性。畢竟,有多少頁面分布著數(shù)十個(gè)甚至數(shù)百個(gè)標(biāo)記呢?實(shí)際上,規(guī)范中“字體屬性”一節(jié)最開始就有這樣
查看詳情如果你寫過Web頁面,肯定對(duì)URL(或者在CSS2.1中稱為URI)很熟悉。如果需要引用一個(gè)URL(如@import語句中,導(dǎo)入外部樣式表時(shí)就會(huì)使用這條語句),一般格式則為:url(proto
查看詳情很多CSS屬性(如外邊距)都依賴于長度度量來適當(dāng)?shù)仫@示各種頁面元素。因此,CSS中有很多度量長度的方法不足為奇。所有長度單位都可以表示為正數(shù)或負(fù)數(shù),其后跟有一個(gè)
查看詳情CSS允許你使用HTML網(wǎng)頁設(shè)計(jì)師很熟悉的十六進(jìn)制顏色記法來定義顏色:h1{color:#FF0000;}/*set*Hlstored*/h2{color:#903BC0;}/*setH2stoaduskypurple*/h3{color:#00
查看詳情在利用CSS能做的幾乎所有工作中,其基礎(chǔ)都是單位(units),這是影響所有屬性的顏色、距離和大小的一種元素,本章就要討論單位。如果沒有單位,就不能聲明某個(gè)段落應(yīng)當(dāng)
查看詳情在我們?cè)O(shè)計(jì)網(wǎng)頁時(shí),如果特殊性相等的兩個(gè)規(guī)則同時(shí)應(yīng)用到同一個(gè)元素會(huì)怎么樣呢?瀏覽器如何解決這個(gè)沖突?例如,假設(shè)有以下規(guī)則:h1{color:red;}h1{color:blue;}哪一個(gè)
查看詳情特殊性對(duì)于理解如何向網(wǎng)頁文檔應(yīng)用聲明很重要,同樣的,還有一個(gè)很重要的概念,即繼承?;诶^承機(jī)制,樣式不僅應(yīng)用到指定的元素,還會(huì)應(yīng)用到它的后代元素。例如,如果
查看詳情前面我們介紹了如何利用網(wǎng)頁文檔結(jié)構(gòu)和CSS選擇器為元素應(yīng)用各種豐富的樣式。每個(gè)合法的文檔都會(huì)生成一個(gè)結(jié)構(gòu)樹,了解了這一點(diǎn),就能根據(jù)元素的祖先、屬性、兄弟元素
查看詳情設(shè)置首字母樣式第一個(gè)偽元素用于設(shè)置一個(gè)塊級(jí)元素首字母的樣式,而且僅對(duì)該首字母設(shè)置樣式:p:first-letter{color:red;}這個(gè)規(guī)則會(huì)把毎一段的第一個(gè)字母變成紅色。
查看詳情選擇第一個(gè)子元素還可以使用另一個(gè)靜態(tài)偽類:first-child來選擇元素的第一個(gè)子元素。這個(gè)特定偽類很容易遭到誤解,所以有必要舉個(gè)例子來說明。考慮以下標(biāo)記:Thesea
查看詳情CSS2.1定義了3個(gè)動(dòng)態(tài)偽類,它們可以根據(jù)用戶行為改變文檔的外觀。這些動(dòng)態(tài)偽類以前總用來設(shè)置超鏈接的樣式,不過它們還有很多其他用途。表2-3描述了這些偽類。表2-
查看詳情偽類選擇器和偽元素選擇器才真正有些意思。利用這些選擇器,可以為網(wǎng)頁中不一定具體存在的結(jié)構(gòu)指定樣式,或者為某些元素(甚至是文檔本身)的狀態(tài)所指示的幻像類指定
查看詳情除了指示網(wǎng)頁文檔元素的選擇器外,還有另外兩種類型的選擇器:類選擇器(classselector)和ID選擇器(IDselector),它們?cè)试S以一種獨(dú)立于文檔元素的方式來指定樣式。這
查看詳情CSS的主要優(yōu)點(diǎn)之一(特別是對(duì)于網(wǎng)頁設(shè)計(jì)師來說),就是它能很容易地向所有同類型的元素應(yīng)用一組樣式。是不是聽上去還不夠震撼?那么請(qǐng)這樣想想看:只需編輯一行CSS,就
查看詳情