網(wǎng)頁設計中的顏色

  • 2018-12-25 17:17:08
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://americanwasteexpansions.com

還記得你第一次改變Web頁面的顏色是什么時候嗎?以前總是灰色背景上的黑色文本,其間有一些藍色的鏈接,突然之間,你可以按自己的意愿使用任何顏色組合,可以是黑色背景上的淡藍色文本,而超鏈接是淺綠色的。這只是朝著有色文本前進的一個小進步(最終目標是頁面上的文本有多種顏色),這要歸功于<FONT COLOR="…">。一旦還能增加背景圖像,那么一切皆有可能,或者起碼看上去是這樣,網(wǎng)站建設在顏色和背景方面則走得更遠,它允許向一個頁面應用多種不同的顏色和背景,而且根本不需要任何FONT或TABLE標記。

顏色

網(wǎng)站設計師在設計頁面時,要在開始前先做好計劃。不論什么情況下通常都是如此,不過對于顏色,這一點更為重要。如果設計師要讓所有超鏈接都是黃色,它們會與文檔中某些部分的背景色沖突嗎?如果使用了太多的顏色,會不會讓用戶無所適從?(提示:確實如此)。如果改變了默認的超鏈接顏色,用戶還能找出鏈接在哪里嗎?(例如,如果讓常規(guī)文本和超鏈接文本顏色相同。要找出鏈接就會困難得多,實際上,如果鏈接沒有加下劃線,則幾乎不可能識別出超鏈接。)

盡管需要先做一些規(guī)劃,不過修改元素顏色的功能還是讓人趨之若騖,這幾乎是每一位網(wǎng)站建設創(chuàng)作人員都想使用的功能,而且也確實相當常用。如果使用得當,顏色確實能強化文檔的表示。例如,假設你有一個設計,其中所有h1元素都是綠色,大多數(shù)h2元素是藍色,所有超鏈接都應當是暗紅色。不過,在某些情況下你希望h2元素是深藍色,因為與之關聯(lián)有不同類型的信息。要處理這種情況,最容易的辦法是為應當為深藍色的各個h2指定一個class,然后作以下聲明:

h1 {color:green;}

h2 {color:blue;}

h2.dkblue {color:navy;}

a {color:maroon;}/*a good dark red color*/

注意:選擇的類名最好描述其中包含的信息類型,而不是你想要達到什么視覺效果。例如,假設你希望對所有作為下級標題的h2元素應用深藍色。更可取的做法是選擇subsec甚至sub-section作為類名,這就能反映某種含義,而且更重要的是,這不依賴于任何表示概念。畢竟,也許你以后會決定所有下級標題是深紅色而不是深藍色,如果是這樣,寫作h2.dkblue{color:maroon;}看上去就會有些傻。

從這個簡單的例子可以看到,使用樣式之前最好先做些規(guī)劃,這樣才能充分合理地使用所有工具。例如,假設向前例中的頁面增加一個導航條。在這個導航條中,超鏈接應當是黃色而不是深紅色。如果導航條標志為ID是navbar,則只需增加以下規(guī)則:

#navbar a{color:yellow;}

這會改變導航條中超鏈接的顏色,而不影響文檔中的其他超鏈接。

網(wǎng)站建設中實際上只有一種顏色類型,即純色。如果將一個文檔的color設置為red,文本都將是紅色。當然,HTML的做法也一樣。使用HTML 3.2時,如果聲明<BODY LINK="blue" VLlNK="blue">,那么所有超鏈接都將是藍色,而不論它們放在文檔中的哪個位置。

使用CSS時也是如此。如果使用CSS將所有超鏈接(包括已訪問和未訪問)的color都設置為blue,它們將全是藍色。同樣,如果使用樣式設置body的背景為green,那么整個body的背景都是同樣的綠色。

網(wǎng)站建設中,可以為任何元素設置前景和背景色,從body到強調(diào)元素和超鏈接元素,再到幾乎所有一切(列表項、整個列表、標題、表單元格,甚至從某種程度上圖像也可以設置前景和背景色)。不過,要理解這是如何工作的,重要的是應當理解元素前景中有什么、沒有什么。

先來討論前景本身;一般來說,前景是元素的文本,不過前景還包括元素周圍的邊框。因此,有兩種方式直接影響一個元素的前景色:可以使用color屬性,也可以使用某個邊框?qū)傩栽O置邊框顏色,這在上一章討論過。

當前文章標題:網(wǎng)頁設計中的顏色

當前URL:http://americanwasteexpansions.com/news/wzzz/design-color.html

上一篇:網(wǎng)頁設計中的內(nèi)邊距和元素

下一篇:網(wǎng)頁設計中的前景色

網(wǎng)站建設、網(wǎng)絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)