<output id="jbxdv"></output>

      1. css在網頁設計中的分組功能

        • 2018-07-30 07:07:15
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

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

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

        基本規則

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

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

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

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

        h2 {color:gray;}

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

        h2 {color:silver;}

        規則結構

        為了更詳細地說明規則的概念,下面將規則的結構分解開逐一介紹。

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

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

        html {color: black;}

        p {color: gray;}

        h2 {color: silver;}

        聲明和關鍵字

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

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

        color:ultraviolet;/* unknown value */

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

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

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

        rainbow: red orange yellow green blue indigo violet;

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

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

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

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

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

        斜線分隔了用來設置元素的字體大小和行高的兩個關鍵字。只有在這里才允許font聲明中出現斜線。font允許的所有其他關鍵字都用空格分隔。

        以上介紹了簡單聲明的基礎知識,不過聲明可以比這復雜得多。接下來將帶你了解CSS的功能有多強大。

        分組

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

        選擇器分組

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

        h2,p {color:gray;}

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

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

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

        通過分組,網頁設計師可以將某些類型的樣式“壓縮”在一起,這就能得到一個更簡短的樣式表。以下的兩組規則能得到同樣的結果,不過可以很清楚地看出哪一個寫起來更容易:

        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;}

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

        /* 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引入了一種新的簡單選擇器,稱為通配選擇器(universal selector),顯示為一個星號(*)。這個選擇器可以與任何元素匹配,就像是一個通配符。例如,要讓一個文檔中的每一個元素都為紅色,可以寫為以下規則:

        *{color: red;}

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

        聲明分組

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

        紫色文本(你并不關心讀者能不能看清楚)??梢詫懸韵聵邮剑?/p>

        h1 {font: 18px Helvetica;}

        h1 {color: purple;}

        h1 {background: aqua;}

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

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

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

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

        h1 {

        font: 18px Helvetica;

        color: purple;

        background: aqua;

        }

        不過,如果忽略了第二個分號,用戶代理就會把這個樣式表解釋如下:

        h1 {

        font: 18px Helvetica;

        color: purple background: agua;

        }

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

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

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

        結合選擇器和聲明的分組

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

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

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

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

        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;}

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

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


        當前文章標題:css在網頁設計中的分組功能

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

        上一篇:css在網頁設計中的引入

        下一篇:網頁css的類選擇器和id選擇器

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>