字型顏色的使用 CSS入門基礎(006)

2021-10-11 18:41:03 字數 2253 閱讀 2887

今天我們接著說字型樣式的內容。

color字型顏色:

語法:

color:顏色值;
顏色值可以是乙個關鍵字,也可以是乙個十六進製制的rgb值。

關鍵字的顏色值,其實就是比較常用的顏色的一種列舉值,比如

black,黑色

white,白色

green,綠色

blue,藍色

red,紅色

gray,灰色

等等;示例**:

以上**有個小技巧,就是四個分隔區域都是需要設定寬度高度的,所以把共同的**提取出來,放在了元素選擇器裡,簡化**,另外,id選擇器由於只有一行**,我就不規範的縮寫成了一行,這樣便於觀察**的區別,但是不建議屬性多時這麼做。

關鍵字顏色由於和英文顏色的單詞基本一致,所以對於熟悉英文的同學,使用關鍵字顏色會方便些,但是它沒有十六進製制顏色靈活,色彩選擇多。

十六進製制rgb顏色:

所謂十六進製制rgb值指的是類似「#ffffff」這種形式的顏色值,對於初學者來說,需要掌握十六進製制的顏色值,是有困難的。大家如果有使用photoshop的經驗,就會熟悉調色盤功能,對十六進製制的顏色值就不陌生。

示例**:

以上**,大家會發現,顏色值使用的是十六進製制的,並且為了表示顏色值是十六進製制的,需要在數值前加字首「#」,表示其後跟著的數值是十六進製制的顏色值。

要說到十六進製制顏色值,我們得先說說什麼是rgb顏色值?

在計算機中,我們需要表示一種顏色,需要用到三原色概念,也就是任何一種顏色都是可以由三原色構成的,三原色就是我們說的紅、綠、藍,英文名詞就是red、green、blue,所以縮寫起來就是rgb;

這裡需要注意,我們說三原色時,或者說rgb色時,一定是按照紅、綠、藍的順序來描述色彩的,不可以變動順序,可以說這是一種規範吧,你記住就好了;

為了方便表示rgb色彩,我們通常這麼寫

rgb(數值,數值,數值)
數值的取值範圍是0~255,也就是2的16次方,為了便於描述,我們暫時定義一下,0代表沒有,255代表有,那麼在1~254之間的數代表有的程度是多少。比如

紅色,表述為rgb(255,0,0)綠色,表述為rgb(0,255,0)藍色,表述為rgb(0,0,255)
也就是說,當r值取為最大值255,其他數值取0,說明只有紅色有,綠色、藍色沒有,最終rgb顏色就是紅色;

當g值取為最大值255,其他數值取0,說明只有綠色有,紅色、藍色沒有,最終rgb顏色就是綠色;

當b值取為最大值255,其他數值取0,說明只有藍色有,紅色、綠色沒有,最終rgb顏色就是藍色;

(以上表述有點囉嗦,大家別見怪,我只是為了說的清楚明白些。)

但是使用rgb表述顏色時,多有不方便,因為數值有可能是兩位數,有可能是三位數,數值與數值間還需要逗號分隔,如果不用逗號分隔,就無法準確的取得數值,比如rgb(1111111),沒有逗號分隔時,你完全不知道這個表示什麼顏色,它可以是rgb(11,111,11),也可以是rgb(111,11,11),或者rgb(11,11,111),以上這段是我自己的理解,也可能不是非常準確。

而使用十六進製制數值表示顏色就方便些,也準確些,

紅色,表述為#ff0000綠色,表述為#00ff00藍色,表述為#0000ff
在十六進製制中,10用字母a表示,依次類推,11是b,12是c,13是d,14是e,15是f,所以如果需要表述顏色時,都是需要兩位數,就可以表示乙個單色了。

黑色,可以表示為#000000,白色,可以表示為#ffffff,也就是當三原色都沒有時,我們看到的就是黑色,當三原色都有時,我們看到的就是白色,這個十六進製制顏色值,你可以自己修改修改,從而可以感知一下其中的奧秘,多使用,就能很方便的調整色彩了。

字型粗細的使用 CSS入門基礎(007)

今天我們接著分享字型的內容。在css中,我們使用font weight屬性來定義字型粗細。字型的粗細和字型的大小是不一樣的,粗細指的是字型的肥瘦,而大小指的是字型的高寬。語法 font weight 粗細值屬性取值有兩種,一種是關鍵字,一種是100 900之間的數值。關鍵字 font weight屬...

字型樣式 CSS入門基礎(005)

今天我們分享關於字型樣式的內容。在網頁開發中,需要優先考慮頁面的文字樣式屬性。包括字型 大小 粗細 顏色等 css字型樣式屬性 屬性值說明 font family 字型型別 font size 字型大小 font style 字型斜體 color 字型顏色 除了字型顏色以外,其他文字屬性都是font...

css字型顏色的設定方法

css字型顏色的設定方法 首先建立乙個html示例檔案 然後在body定義一些p標籤並在p標籤中輸入文字內容 最後給p標籤新增css樣式為 p 即可修改字型顏色。一 首先我們先給大家看個html字型的基礎 php中文網 字型顏色設定 字型顏色設定 字型顏色設定 字型顏色設定 這裡是p標籤的四段話,我...