成為前端工程師必會技能之一-CSS背景顏色設定

成為前端工程師必會技能之一-CSS背景顏色設定

成為前端工程師必會技能之一-CSS背景顏色設定
成為前端工程師必會技能之一-CSS背景顏色設定

要成前端工程師條件有許多眉眉角角,其中之一是你要會背景顏色設定!

若要使用背景顏色設定 (background-color)屬性,可讓簡潔的純色背景可以襯托出網頁的主體、也可決定網頁的風格。像是背景純黑的網頁與背景為粉紅色的網頁,風格差異就會很大。其實 background-color 能夠使用的範圍除了網頁背景色外,也可以應用在設計表格、DIV 區塊、span 等網頁元素的背景顏色。

CSS background-color 基本語法如下:

background-color: 顏色名稱或色碼 ;

前端工程師建議如果要用background-color,可以利用CSS碼選擇使用的顏色值包含顏色的英文名稱、十六進位制色碼以及 RGB 色碼,挑選顏色請參考:網頁顏色代碼對照表

CSS background-color 語法範例一、網頁背景

html{background-color: 顏色名稱或色碼 ;}

CSS background-color 語法範例二、DIV 區塊、H1-H6 標題等斷落的背景顏色

div(可替換成 h1、p 等網頁元素標籤){background-color: 顏色名稱或色碼 ;}

前端工程師建議同樣的技巧還可用在其他的網頁元素,若想採用圖片當成背景,請參閱:2. 背景圖樣設定 (background-image)

其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)

 

 

 

推薦文章:

CSS父子繼承關係搞不定?前端工程師建議你可以這樣做!

 

前端工程師的御用愛將CSS,超好用四招搞定HTML!

 

還在猶豫怎麼用Class選擇器?前端工程師分析給你聽!

 

達內教育開幕 培養台灣IT人才進入全球企業

 

網路行銷課程進階(七)-擴大主題關鍵字,讓更多人看到你!!

 

了解過去,運用現在,展望未來,只有人工智慧能做到!

 

想要把SEO優化做到頂尖?那這東西你不能錯過!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *