HTML與CSS中的顏色與單位個(gè)人分享

PAMPANG 發(fā)布于2019-08-29 16:33 / 1887人閱讀

摘要：顏色與單位安全色有中其中色彩有中非色彩中前景色與背景色前景色就是設(shè)置字體的顏色背景色就是為指定元素設(shè)置背景色瀏覽器默認(rèn)背景色的顏色為透明色顏色的命名使用單詞方式定義顏色目前主流瀏覽器識(shí)別種預(yù)定義顏色問題可選的顏色數(shù)量有限不同瀏覽器中存在

顏色與單位

Web安全色有216中其中色彩有210中,非色彩6中

前景色與背景色

前景色就是設(shè)置字體的顏色

背景色就是為指定元素設(shè)置背景色 - 瀏覽器默認(rèn)背景色的顏色為透明色

顏色的命名

1.使用單詞方式定義顏色 - 目前主流瀏覽器識(shí)別147種預(yù)定義顏色

問題:可選的顏色數(shù)量有限

不同瀏覽器中存在色差問題

2.使用RGB方式定義顏色 - 稱為三原色(就是不能再分解的三種基本顏色)

RGB - red(紅色)、green(綠色)、blue(藍(lán)色)

使用方法:

1.函數(shù)式RGB顏色 - rgb(紅色, 綠色, 藍(lán)色)

每個(gè)顏色的值范圍 - 0 ~ 255

2.十六進(jìn)制RGB顏色 - #紅色綠色藍(lán)色

每個(gè)顏色具有兩位

每個(gè)顏色的值范圍 - 00 ~ ff

數(shù)字是 - 0 ~ 9 字母是 - a ~ f

如果每個(gè)顏色的兩位相同的話則可以省略其中一個(gè)

示例代碼:




一花一世界

透明度

透明度 - 默認(rèn)值為1.0 (完全不透明)

取值范圍是 - 0 ~ 1.0

語(yǔ)法 - opacity: 0.5;

設(shè)置透明度還有第二種方式:

rgba() - 其中a表示透明度

示例代碼:

/* 以下是透明度的兩種用法 */

opacity: 0.5;

background-color: rgba(223,0,220,0.5);

單位

單位分為相對(duì)值和絕對(duì)值

像素值(px) - 與電腦分辨率有關(guān)分辨率越大單位像素值就相對(duì)越小

示例代碼:

圖片分析:

GPU云服務(wù)器云服務(wù)器 css與html html與css html與css區(qū)別 css與html的區(qū)別

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/113819.html

相關(guān)文章

HTML與CSS中的顏色與單位個(gè)人分享

摘要：顏色與單位安全色有中其中色彩有中非色彩中前景色與背景色前景色就是設(shè)置字體的顏色背景色就是為指定元素設(shè)置背景色瀏覽器默認(rèn)背景色的顏色為透明色顏色的命名使用單詞方式定義顏色目前主流瀏覽器識(shí)別種預(yù)定義顏色問題可選的顏色數(shù)量有限不同瀏覽器中存在顏色與單位 Web安全色有216中其中色彩有210中,非色彩6中前景色與背景色前景色就是設(shè)置字體的顏色背景色就是為指定元素設(shè)置背景色 - 瀏...

lmxdawn 2019-08-02 11:22 評(píng)論0 收藏0
HTML與CSS中的文本個(gè)人分享

摘要：文本標(biāo)題元素注意在一個(gè)頁(yè)面中最好只使用一個(gè)標(biāo)題因?yàn)闉g覽器只會(huì)抓取一個(gè)多了沒用示例代碼標(biāo)題元素元素默認(rèn)效果是顯示最大顯示最小默認(rèn)效果是由瀏覽器自帶樣式提供可以通過進(jìn)行修改每個(gè)標(biāo)題元素是獨(dú)占一行并且是垂直排列在實(shí)際開發(fā)中常用的標(biāo)題元素最文本標(biāo)題元素注意: 在一個(gè)HTML頁(yè)面中最好只使用一個(gè)標(biāo)題因?yàn)闉g覽器只會(huì)抓取一個(gè)多了沒用示例代碼: 一花一世界一葉一孤城娃哈哈爽歪歪...

MartinHan 2019-08-29 16:32 評(píng)論0 收藏0
HTML與CSS中的文本個(gè)人分享

摘要：文本標(biāo)題元素注意在一個(gè)頁(yè)面中最好只使用一個(gè)標(biāo)題因?yàn)闉g覽器只會(huì)抓取一個(gè)多了沒用示例代碼標(biāo)題元素元素默認(rèn)效果是顯示最大顯示最小默認(rèn)效果是由瀏覽器自帶樣式提供可以通過進(jìn)行修改每個(gè)標(biāo)題元素是獨(dú)占一行并且是垂直排列在實(shí)際開發(fā)中常用的標(biāo)題元素最文本標(biāo)題元素注意: 在一個(gè)HTML頁(yè)面中最好只使用一個(gè)標(biāo)題因?yàn)闉g覽器只會(huì)抓取一個(gè)多了沒用示例代碼: 一花一世界一葉一孤城娃哈哈爽歪歪...

iliyaku 2019-08-02 11:21 評(píng)論0 收藏0
HTML與CSS中的,鏈接與圖像個(gè)人分享

摘要：鏈接與圖像鏈接元素元素表示鏈接元素作用從當(dāng)前頁(yè)面跳轉(zhuǎn)到指定頁(yè)面屬性設(shè)置指定跳轉(zhuǎn)頁(yè)面的路徑路徑分類相對(duì)路徑相對(duì)于當(dāng)前頁(yè)面的路徑絕對(duì)路徑訪問的路徑地址不變化示例代碼相對(duì)路徑的鏈接文本陰影案例他是鏈接絕對(duì)路徑的鏈接他也鏈接與圖像鏈接元素 < a >元素 - 表示鏈接元素作用 - 從當(dāng)前html頁(yè)面跳轉(zhuǎn)到指定html頁(yè)面屬性 href - 設(shè)置指定跳轉(zhuǎn)html頁(yè)面的路徑 ...

cocopeak 2019-08-29 16:34 評(píng)論0 收藏0
HTML與CSS中的,鏈接與圖像個(gè)人分享

摘要：鏈接與圖像鏈接元素元素表示鏈接元素作用從當(dāng)前頁(yè)面跳轉(zhuǎn)到指定頁(yè)面屬性設(shè)置指定跳轉(zhuǎn)頁(yè)面的路徑路徑分類相對(duì)路徑相對(duì)于當(dāng)前頁(yè)面的路徑絕對(duì)路徑訪問的路徑地址不變化示例代碼相對(duì)路徑的鏈接文本陰影案例他是鏈接絕對(duì)路徑的鏈接他也鏈接與圖像鏈接元素 < a >元素 - 表示鏈接元素作用 - 從當(dāng)前html頁(yè)面跳轉(zhuǎn)到指定html頁(yè)面屬性 href - 設(shè)置指定跳轉(zhuǎn)html頁(yè)面的路徑 ...

elisa.yang 2019-08-02 11:21 評(píng)論0 收藏0