CSS學習之「顏色和背景」

2021-04-03 00:10:39 字數 2341 閱讀 5880

在css中,只有一種型別的顏色,即簡單的純色。另外在css中,可以設定任何元素的前影色和背景色。那什麼是元素的前景呢?一般來說,前景是指元素中的文字,但也不盡然:元素的邊框也被認為是前景的一部分。這樣就有兩種方式直接影響元素的前影色:使用顏色屬性和使用邊框屬性中的一種來設定邊框顏色。最基本的是邊框顏色(border-color)屬性,以及更具體的一些屬性,如border-top、border-right等。元素的背景指的是所有前景後面的空間,直到邊框圖的邊緣,這樣,內容框和填充都是元素背景的一部分。

前景色color

允許值:《顏色》

初始值:與使用者代量有關

可否繼承:是

適用於:所有元素

設定前景色的最簡便方法是用color屬性。

p.warn

p.warn a:link

你好,歡迎來到http://blog.csdn.net/bzmuwei target="_blank">清清海水的blog,讓我們一塊來共同學習吧。

顯示效果如下:

你好,歡迎來到清清海水的blog,讓我們一塊來共同學習吧。

body屬性

用css中的偽類來控制body中的鏈結顏色,那真是再好不過了。雖然html中body屬性link、vlink等已經實現該功能,但對於複雜的鏈結控制來說只有css能夠完成。

例:body /*設定文字為黑色*/

a:link /*設定鏈結為#808080*/

a.external:link /*設定鏈結external類的顏色為#666*/

a:active /*設定鏈結處於活躍狀態時的顏色為silver*/

a:visited /*設定訪問過的鏈結顏色為#333。*/

a:external:visited /*設定訪問過的鏈結external類的顏色。*/

動人的邊框

例:p.aside

我待將心托明月,想找乙個純淨的女孩子戀愛,希望能夠找個心地純潔善良,有責任感的單身mm,執子之手,與子偕老,坦誠相對。不求盡如人意,但求無悔我心。人群中,我往往是安靜的!

同樣,對於圖象的邊框顏色也可以設定。

例:img.type1

img.type2

則顯示效果如下:

從上面的幾個例子可以看出,顏色屬性值是可以繼承的,如設定body為紅色,除已經樣式化的元素之外所有的文字均為紅色,但不會影響水平線規則(hr)和影象元素。

背景顏色

background-color

允許值:《顏色》 | transparent

可否繼承:否

適用於:所有元素

背景指的是內容框及補白(padding),總是位於前景的後面。宣告的背景色會同時應用於內容框和補白。例:

p 效果如下:

我待將心托明月,想找乙個純淨的女孩子戀愛,希望能夠找個心地純潔善良,有責任感的單身mm,執子之手,與子偕老,坦誠相對。不求盡如人意,但求無悔我心。人群中,我往往是安靜的!

如果想讓顏色再從元素的文字中向外擴充一點,只需要新增一些補白就可以實現了。如下:

p 效果如下:

我待將心托明月,想找乙個純淨的女孩子戀愛,希望能夠找個心地純潔善良,有責任感的單身mm,執子之手,與子偕老,坦誠相對。不求盡如人意,但求無悔我心。人群中,我往往是安靜的!

背景影象

background-image

允許值:| none

初始值:none

可否繼承:否

適用於:所有元素

預設值none表示沒有影象會放置於背景,要想獲得背景影象,只需要給出屬性的乙個url值就可以了。如下:

p.bg

我待將心托明月,想找乙個純淨的女孩子戀愛,希望能夠找個心地純潔善良,有責任感的單身mm,執子之手,與子偕老,坦誠相對。不求盡如人意,但求無悔我心。人群中,我往往是安靜的!

靈活運用背景顏色可以製作出更多漂亮的頁面效果,因為它適用於所有元素,每個元素都可以定義背景色。

CSS顏色和背景屬性

一 介紹 1 backgroundcolor屬性 backgroundcolor屬性用於設定或檢索物件的背景顏色。其對應的樣式標籤屬性為background color屬性。語法 background color color 說明 在style物件中,樣式屬性與樣式標籤屬性的語法中的引數型別基本相同...

《css權威指南》顏色和背景

可選值 inherit 初始值 使用者 決定 應用於 所有元素 是否預設繼承 是可選值 transparent inherit 初始值 transparent 應用於 所有元素 是否預設繼承 是可選值 none inherit 初始值 none 應用於 所有元素 是否預設繼承 否可選值 repeat...

設定背景顏色佔比 CSS系列之背景

通過 css 背景屬性,可以給頁面元素新增背景樣式。背景屬性可以設定背景顏色 背景 背景平鋪 背景位置 背景影象固定等。background color 屬性定義了元素的背景顏色。支援英語單詞,rgb,以及十六進製制顏色碼 background color 顏色值 一般情況下元素背景顏色預設值是 t...