Day05 | border-color漸層
多久沒改編網頁的色彩了呢?把預設的白底黑字與藍色的連結改變成任何的色彩組合。改變文字顏色只是個開始,最終是讓頁面上的文字呈現各種不同的色彩,等到能加上背景的影像之後,似乎就變得無所不能。CSS帶領色彩與背景進入全新的境界,賦予頁面或元素各種不同的色彩與背景。使用CSS能夠設定任何元素的前景和背景。前景指的是一般的文字,也包含元素周圍的邊框。也就是,有兩種直接影響元素前景的方法:一種是使用color屬性,另一種是使用邊框屬性改變邊框的顏色。前景顏色要改變元素的前景顏色,最簡單的方法就是使用color屬性。設定...
多久沒改編網頁的色彩了呢?把預設的白底黑字與藍色的連結改變成任何的色彩組合。改變文字顏色只是個開始,最終是讓頁面上的文字呈現各種不同的色彩,等到能加上背景的影像之後,似乎就變得無所不能。CSS帶領色彩與背景進入全新的境界,賦予頁面或元素各種不同的色彩與背景。
使用CSS能夠設定任何元素的前景和背景。前景指的是一般的文字,也包含元素周圍的邊框。也就是,有兩種直接影響元素前景的方法:一種是使用color屬性,另一種是使用邊框屬性改變邊框的顏色。
前景顏色要改變元素的前景顏色,最簡單的方法就是使用color屬性。設定及輸出如下方所示
<p style="color:red;">使用太多的色彩會造成使用者的負擔</p> <p>使用太多的色彩會造成使用者的負擔</p>color的另一個用途是讓特定類型的文字更為醒目,比如粗體字已經十分明顯,但是如果再換上不同的顏色,就會更加顯眼。
b,strong {color:maroon;} 影響邊框color值也能夠影響元素周圍的邊框,如果我們作以下的宣告
p.aside {color:orange; border-style:solid;}當我們使用<p class="aside">元素時,就會出現橘色的文字和邊框
影響影像邊框由於影像本身就包含了顏色,所以設定color並不會影響影像圖片內容,但可以用來改變影像周圍出現的所有邊框。color或border-color都能夠產生相同的效果。
img.type1 {border-style:solid; color:gray;} img.type2 {border-style:solid; border-style:gray;}
元素的背景區域預設是包含了前景之後的所有空間直到邊框外緣,也就是內容方框與內距區域都是元素背景的一部分,邊框則是描繪在背景之上。
背景顏色要指定元素的背景顏色,就得使用background-color屬性,這個屬性可以使用所有合法的顏色值。
p {background-color:#adebeb;}