Day05 - CSS色彩、背景與漸層


多久沒改編網頁的色彩了呢?把預設的白底黑字與藍色的連結改變成任何的色彩組合。改變文字顏色只是個開始,最終是讓頁面上的文字呈現各種不同的色彩,等到能加上背景的影像之後,似乎就變得無所不能。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並不會影響影像圖片內容,但可以用來改變影像周圍出現的所有邊框。colorborder-color都能夠產生相同的效果。

img.type1 {border-style:solid; color:gray;}
img.type2 {border-style:solid; border-style:gray;}

背景

元素的背景區域預設是包含了前景之後的所有空間直到邊框外緣,也就是內容方框與內距區域都是元素背景的一部分,邊框則是描繪在背景之上。

背景顏色

要指定元素的背景顏色,就得使用background-color屬性,這個屬性可以使用所有合法的顏色值。

p {background-color:#adebeb;}

特殊效果

結合colorbackground-color能夠產生一些有趣的效果。

h2 {color:white; background:#1a1a1a;}

背景影像

以往在HTML裡,若要加上背景影像,通常會寫成<body background="sample.jpg>,而在CSS裡除了可以很容易做到與HTML效果,還能做一些更複雜的效果。CSS使用background-image屬性來設定背景影像。

 p.starry {backgroud-image:URL; color:white;}

background-image的值有下列五種

  • 影像的URL
  • linear-gradient
  • repeating-linear-gradient
  • radial-gradient
  • repeating-radial-gradient

背景位置

把影像圖片放到背景區之後,能不能決定影像放置的發法?當然可以,接下來我們使用background-position來設定背景位置。

body {background-image:URL;
      background-repeat:no-repeat;
      backgroun-position:center;
      }

結果就是只有一張背景圖,回呈現在置中的位置上。有關backgroun-position的數值如下

  • left | center | right | top | bottom | percentage | length

背景重複

要達到背景重複的效果,可以使用background-repeat屬性來設定。乍看之下似乎很複雜,實際上很簡單。背景重複共有四個值:repeat、non-repeat、space、round。
另外有兩個變化型:
repeat-x:只有針對水平的x軸重複
repeat-y:只有針對垂直的y軸重複

漸層

有兩種新的影像是完全由CSS產生:線性漸層(linear gradient)與放射性漸層(radial gradient),兩種類型分別再係分為重複和非重複。漸層最常使用在背景,也可以用在任何能夠使用影像圖片的場合。

漸層就是從一個顏色平滑的轉換到另外一個顏色,例如從白色到黑色的漸層,會逐漸變暗到灰色,最後再變成黑色。各種色調之間變化的程度會依能夠作漸層的空間而定。

body {background-image: linear-gradient(90deg, white, black);}

則會形成一個由白到黑漸層的body區域

線性漸層

線性漸層的基本語法為
linear-gradient(angle,to side,color1,color2)
如下例

body1 {background-image:linear-gradient(cyan,orange);}

body2 {background-image:linear-gradient(90deg,cyan,orange);}

body3 {background-image:linear-gradient(to left,cyan,orange);}

body4 {background-image:linear-gradient(-45deg,cyan,white,orange);}

body5 {background-image:linear-gradient(to bottom left,cyan,white,orange);}

放射性漸層

線性漸層雖然很酷,但有時候需要的是圓形的漸層,能夠用來產生焦點、圖形的陰影、光芒等等效果。使用的語法與線性漸層相似。
radial-gradient(shape|size|position,color1,color2)

body {background-image:radial-gradient(100px,cyan,orange);}

小結

設定元素的顏色背景是網頁作者十分強大的工具,比起傳統的作法,用CSS設定顏色與背景的優點在於能夠作用在文件中的任何元素!

#color #background #gradient #image
七天CSS入門手扎
透過七天的閱讀與寫作,完成css的入門手扎。






Related Posts

DAY 00 : 自我介紹

DAY 00 : 自我介紹

基礎電腦科學:演算法概要

基礎電腦科學:演算法概要

Command Line 指令 & Vim 心得筆記

Command Line 指令 & Vim 心得筆記

【單元測試的藝術】Chap 5: 隔離(模擬)框架

【單元測試的藝術】Chap 5: 隔離(模擬)框架

用 D3.js v4 看 Pokemon 屬性表

用 D3.js v4 看 Pokemon 屬性表

[Day 4] 基本組成(下)

[Day 4] 基本組成(下)



Comments