css在網(wǎng)頁(yè)設計中的分組功能

  • 2018-07-30 07:07:15
  • 閱讀次數:次
  • 作者:盈嵐科技小編
  • 來(lái)源:http://amzcoolest.com

CSS的主要優(yōu)點(diǎn)之一(特別是對于網(wǎng)頁(yè)設計師來(lái)說(shuō)),就是它能很容易地向所有同類(lèi)型的元素應用一組樣式。是不是聽(tīng)上去還不夠震撼?那么請這樣想想看:只需編輯一行CSS,就能改變所有標題的顏色!是不是不喜歡現在用的藍色?那就改變那行代碼,標題將會(huì )全部變成紫色、黃色、紫紅色,或者是你想要的任何其他顏色。這就能讓作為網(wǎng)頁(yè)設計師的你更多地關(guān)注設計而不是那些瑣事。下一次開(kāi)會(huì )討論時(shí),如果有人希望標題還要有綠色陰影,只需編輯樣式,再單擊Reload按鈕就行了。很酷吧?只需區區幾秒就大功告成。

當然,CSS并不能解決你的所有問(wèn)題,比如說(shuō)你不能用它來(lái)改變GIF的顏色,但是利用CSS確實(shí)能更容易地完成一些全局性的修改。所以下面先來(lái)介紹選擇器和結構。

基本規則

前面已經(jīng)提到,CSS的一個(gè)核心特性就是能向文檔中的一組元素類(lèi)型應用某些規則。例如,假設你想讓所有h2元素的文本都顯示為灰色。如果使用傳統的HTML,就必須在所有h2 元素中插入<FONT COLOR="gray">...</FONT>標記:

<h2><font color="gray">This is h2 text</font></h2>

顯然,如果你的文檔中包含了大量h2元素,這將是一個(gè)很繁瑣的過(guò)程。更槽糕的是,如果你后來(lái)又決定要讓所有h2元素都是綠色而不是灰色,就必須再重來(lái)一次,手動(dòng)地為所有h2元素設置相應的標記。

利用CSS,可以創(chuàng )建易于修改和編輯的規則,并且能很容易地將其應用到你定義的所有文本元素(下一節將解釋這些規則如何工作)。例如,只需將以下規則寫(xiě)一次,就能讓所有h2元素變成灰色:

h2 {color:gray;}

如果希望將所有h2文本都改為其他顏色,如銀色,只需把這個(gè)規則修改如下:

h2 {color:silver;}

規則結構

為了更詳細地說(shuō)明規則的概念,下面將規則的結構分解開(kāi)逐一介紹。

每個(gè)規則都有兩個(gè)基本部分:選擇器(selector)和聲明塊(declaration block)。聲明塊由一個(gè)或多個(gè)聲明(declaration)組成,每個(gè)聲明則是一個(gè)屬性-值對(property-value)。每個(gè)樣式表由一系列規則組成。

一旦直接向元素全局地應用樣式,可以將這些樣式從一個(gè)元素切換應用到另一個(gè)元素。假設你決定將網(wǎng)頁(yè)中的主體字體設置為灰色。沒(méi)問(wèn)題。只需把h1選擇器改為P:

html {color: black;}

p {color: gray;}

h2 {color: silver;}

聲明和關(guān)鍵字

聲明塊包含一個(gè)或多個(gè)聲明。聲明總有如下格式:一個(gè)屬性后面跟一個(gè)冒號,再后面是一個(gè)值,然后是一個(gè)分號。冒號和分號后面可以有0個(gè)或多個(gè)空格。幾乎在所有情況下,值要么是一個(gè)關(guān)鍵字,要么是該屬性可取關(guān)鍵字的一個(gè)列表(包含一個(gè)或多個(gè)關(guān)鍵字),關(guān)鍵字之間用空格分隔。如果聲明中使用了不正確的屬性或者不正確的值,整個(gè)聲明都會(huì )被忽略。因此,下面這兩個(gè)聲明將會(huì )失?。?br/>

brain-size:2cm;/* unknown property */

color:ultraviolet;/* unknown value */

如果一個(gè)屬性的值可以取多個(gè)關(guān)鍵字,在這種情況下,關(guān)鍵字通常由空格分隔。并不是所有屬性都能接受多個(gè)關(guān)鍵字,不過(guò)確實(shí)有許多屬性是這樣,例如font屬性。假設你想為段落文本定義中等大小的Helvetica字體。

注意medium和Helvetica之間的空格,medium和Helvetica都是關(guān)鍵字(前一個(gè)指定了字體的大小,后一個(gè)是具體的字體名)。兩個(gè)關(guān)鍵字之間的空格使用戶(hù)代理能夠區分這兩個(gè)關(guān)鍵字,并適當地應用。后面的分號指示聲明結束。

用空格分隔的這些詞稱(chēng)為關(guān)鍵字,這是因為,它們加在一起構成了當前屬性的值。例如,考慮以下假想規則:

rainbow: red orange yellow green blue indigo violet;

當然并沒(méi)有rainbow這樣的屬性,另外這里使用的顏色也不合法,不過(guò)可以用這個(gè)例子來(lái)說(shuō)明有關(guān)的概念。rainbow 的值是red orange yellow green blue indigo violet,這7個(gè)關(guān)鍵字加在一起構成了一個(gè)唯一的值??梢园裷ainbow的值重新定義如下:

rainbow: infrared red orange yellow green blue indigo violet ultraviolet;

現在rainbow就有了一個(gè)新值,由9個(gè)而不是7個(gè)關(guān)鍵字組成。盡管這兩個(gè)值的名字是相同的,但是它們就像0和1一樣黑白分明,完全不同。

注意:可以看到,CSS關(guān)鍵字往往由空格分隔。只有一種情況例外。在CSS的font屬性中。只有一種情況下可以使用斜線(xiàn)(/)來(lái)分隔兩個(gè)特定關(guān)鍵字。下面是一個(gè)例子:

h2 {font: large/150% sans-serif;}

斜線(xiàn)分隔了用來(lái)設置元素的字體大小和行高的兩個(gè)關(guān)鍵字。只有在這里才允許font聲明中出現斜線(xiàn)。font允許的所有其他關(guān)鍵字都用空格分隔。

以上介紹了簡(jiǎn)單聲明的基礎知識,不過(guò)聲明可以比這復雜得多。接下來(lái)將帶你了解CSS的功能有多強大。

分組

到目前為止,我們已經(jīng)學(xué)習了如何向一個(gè)選擇器應用一個(gè)樣式,這個(gè)技術(shù)相當簡(jiǎn)單。但是如果想為多個(gè)元素應用同一個(gè)樣式該怎么做呢?倘若如此,可能要使用多個(gè)選擇器,或者向一個(gè)元素或一組元素應用多個(gè)樣式。

選擇器分組

假設希望h2元素和段落都有灰色文本。為達到這個(gè)目的,最容易的做法是使用以下聲明:

h2,p {color:gray;}

將h2和p選擇器放在規則的左邊,并用一個(gè)逗號來(lái)分隔,這樣就定義了一個(gè)規則,其右邊的樣式(color: gray;)將應用到這兩個(gè)選擇器所引用的元素。逗號告訴瀏覽器,規則中包含兩個(gè)不同的選擇器。如果沒(méi)有這個(gè)逗號,那么規則的含義則完全不同,有關(guān)內容將在“后代選擇器”一節中詳細介紹。

可以將任意多個(gè)選擇器分組在一起,對此沒(méi)有任何限制。例如,如果你想把很多元素顯示為灰色,可以使用類(lèi)似如下的規則:

body,table,th,td,h1,h2,h3,h4,p,pre,strong,em,b,i{color:gray;}

通過(guò)分組,網(wǎng)頁(yè)設計師可以將某些類(lèi)型的樣式“壓縮”在一起,這就能得到一個(gè)更簡(jiǎn)短的樣式表。以下的兩組規則能得到同樣的結果,不過(guò)可以很清楚地看出哪一個(gè)寫(xiě)起來(lái)更容易:

h1 {color:purple;}

h2 {color:purple;}

h3 {color:purple;}

h4 {color:purple;}

h5 {color:purple;}

h6 {color:purple;}

h1,h2,h3,h4,h5,h6{color: purple;}

分組提供了一些有意思的選擇。例如,下例中的所有規則分組都是等價(jià)的,每個(gè)組只是展示了對選擇器和聲明分組的不同方法:

/* group 1 */

h1 {color:silver;background:white;}

h2 {color:silver;background:gray;}

h3 {color:white;background:gray;}

h4 {color:silver;background:white;}

h5 {color:gray;background:white;}

/* group 2*/

h1,h2,h4 {color:silver;}

h2,h3 {background:gray;}

h1,h4,b {background:white;}

h3 {color: white;}

b {color: gray;}

/*group3*/

h1,h4 {color: silver; background: white;}

h2 {color: silver;}

h3 {color: white;}

h2,h3 {background: gray;}

b {color: gray; background: white;}

通配選擇器

CSS2引入了一種新的簡(jiǎn)單選擇器,稱(chēng)為通配選擇器(universal selector),顯示為一個(gè)星號(*)。這個(gè)選擇器可以與任何元素匹配,就像是一個(gè)通配符。例如,要讓一個(gè)文檔中的每一個(gè)元素都為紅色,可以寫(xiě)為以下規則:

*{color: red;}

這個(gè)聲明等價(jià)于列出了網(wǎng)頁(yè)文檔中所有元素的一個(gè)分組選擇器。利用通配選擇器,只需敲一次鍵(僅一個(gè)星號)就能把文檔中所有元素的color值都指定為red。不過(guò)要當心,盡管通配選擇器很方便,但它也有一些意想不到的后果。

聲明分組

既然可以將選擇器分組到一個(gè)規則中,當然也可以對聲明分組。假設你希望所有h1元素都有淺綠色背景,并使用18像素高的Helvetica字體顯示為

紫色文本(你并不關(guān)心讀者能不能看清楚)??梢詫?xiě)以下樣式:

h1 {font: 18px Helvetica;}

h1 {color: purple;}

h1 {background: aqua;}

但是這種方法效率不高,想想看,如果為一個(gè)有10個(gè)或15個(gè)樣式的元素創(chuàng )建這樣一個(gè)列表會(huì )多麻煩!相反,可以將聲明分組在一起:

h1 {font: 18px Helvetica; color: purple; background: aqua;}

這與前面的3行樣式表的效果完全一樣。

注意,對聲明分組時(shí),一定要在各個(gè)聲明的最后使用分號,這很重要。瀏覽器會(huì )忽略樣式表中的空白符,而且用戶(hù)代理必須依賴(lài)正確的語(yǔ)法才能解析樣式表。只要加了分號,就可以毫無(wú)顧忌地采用以下格式建立樣式:

h1 {

font: 18px Helvetica;

color: purple;

background: aqua;

}

不過(guò),如果忽略了第二個(gè)分號,用戶(hù)代理就會(huì )把這個(gè)樣式表解釋如下:

h1 {

font: 18px Helvetica;

color: purple background: agua;

}

因為background:對于color來(lái)說(shuō)不是一個(gè)合法值,而且由于只能為color指定一個(gè)關(guān)鍵字,所以用戶(hù)代理會(huì )完全忽略這個(gè)color聲明(包括background: aqua部分。這樣h1標題只會(huì )顯示為紫色文本,而沒(méi)有淡綠色背景,不過(guò)更有可能根本得不到紫色的h1。相反,這些標題只會(huì )顯示為默認顏色(通常是黑色),而且根本沒(méi)有背景色(font:18px Helvetica聲明仍能正常起作用,因為它確實(shí)正確地以一個(gè)分號結尾)。

注意:盡管從技術(shù)上講沒(méi)有必要讓規則的最后一個(gè)聲明也以分號結尾,不過(guò)這通常是一個(gè)好的實(shí)踐做法。首先,這會(huì )讓你養成在聲明后加上分號的好習慣。聲明的最后缺少分號,是導致表現出錯的最常見(jiàn)的原因之一。其次,如果你決定向規則增加另一個(gè)聲明,就不必擔心忘記再插入一個(gè)分號。最后一點(diǎn),如果規則中的最后一個(gè)聲明少了分號,一些較老的瀏覽器(如Internet Explorer 3.X)很可能會(huì )不知所措。一定要避免所有這些問(wèn)題。所以只要出現規則,就要在聲明的后面加一個(gè)分號。

與選擇器分組一樣,聲明分組也是一種便利的方法,可以縮短樣式表,使之表述更為清晰,而且易于維護。

結合選擇器和聲明的分組

現在應該了解到,可以對選擇器分組,還可以對聲明分組。如果在一個(gè)規則中結合這兩種分組,就可以使用很少的一些語(yǔ)句定義相當復雜的網(wǎng)頁(yè)設計的樣式?,F在,如果你想為文檔中的所有標題指定某種復雜的樣式,而且希望向所有這些標題應用同樣的樣式,該怎么辦呢?可以這么做:

h1,h2,h3,h4,h5,h6 {color: gray; background: white; padding:0.5em; border: 1px solid black; font-family: Charcoal, sans-serif;}

以上對選擇器進(jìn)行了分組,所以規則右邊的樣式會(huì )應用到所列的所有標題上,而且對聲明分組意味著(zhù)所列的所有樣式都會(huì )應用到規則左邊的選擇器。

這種方法對比較長(cháng)的樣式很適用,該樣式可能如下:

h1 {color: gray;}

h2 {color: gray;}

h3 {color: gray;}

h4 {color: gray;}

h5 {color: gray;}

h6 {color: gray;}

h1 {background: white;}

h2 {background: white;}

h3 {background: white;}

而且后面還有很多行。用這種方式寫(xiě)出長(cháng)長(cháng)的樣式也是可以的,不過(guò)我不推薦這樣的方法,編輯這樣一個(gè)冗長(cháng)的樣式就像到處使用font標記一樣麻煩!

還可以向選擇器增加更多的表達式,并按信息的類(lèi)型以“快捷”方式選擇元素來(lái)應用樣式。當然,要想得到如此強大的功能,還需要先做一點(diǎn)準備工作,但這是很值得的。


當前文章標題:css在網(wǎng)頁(yè)設計中的分組功能

當前URL:http://amzcoolest.com/news/wzzz/css-webdesign-group.html

上一篇:css在網(wǎng)頁(yè)設計中的引入

下一篇:網(wǎng)頁(yè)css的類(lèi)選擇器和id選擇器

網(wǎng)站建設、網(wǎng)絡(luò )營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線(xiàn):181-8386-5875(點(diǎn)擊可一鍵撥號)
亚洲精品无码mv在线|新国产精品视频福利免费|日韩高清在线观看不卡一区二区|一本久久a久久精品免费不|亚洲私人无码内射免费观看