前端工程師初級課程: CSS background-color

前端工程師初級課程: CSS background-color

前端工程師使用背景顏色設定 CSS (background-color)屬性,可以讓簡潔的純色背景襯托出網頁的主體、也可決定網頁的風格。像是背景純黑的網頁與背景為粉紅色的網頁,風格就大不相同。其實 CSS background-color 能夠使用的範圍除了網頁背景色外,也可以用來設計表格、DIV 區塊、span 等網頁元素的背景顏色。

 

CSS background-color 基本語法如下:

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

background-color 可以使用的顏色值包含十六進位制色碼、顏色的英文名稱以及 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必修課-盒子模式(下)

讓前端工程師少一個Bug, CSS的字體單位解釋(上)-絕對單位篇

白帽SEO黑帽SEO到底差在哪? 不都一樣是SEO嗎?網路行銷課程小常識

台灣本土人工智慧APP雅婷逐字稿幫你解決所有語音辨識的煩惱!!

HTML5教學網路行銷必知3-HTML新增了些什麼?

HTML5教學跟你說怎麼樣才能做出精美的書本翻頁動畫!!

 

 

arrow
arrow

    uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()