CSS顏色 長度值 字型

2021-07-10 10:22:59 字數 1479 閱讀 6018

顏色值

設定顏色的方法:

1、英文命令顏色

p 2、rgb顏色

與 photoshop 中的 rgb 顏色是一致的,由 r(red)、g(green)、b(blue) 三種顏色的比例來配色。

每一項的值可以是 0~255 之間的整數,也可以是 0%~100% 的百分數。

示例:p 或 p

3、十六進製制顏色

使用比較普遍的方法,其原理也是 rgb 設定,但其每一項的值由 0-255 變成了十六進製制 00-ff。

示例:p

顏色值的縮寫

當設定的顏色是16進製制的色彩值時,如果每兩位的值相同,可以縮寫一半。

示例:p 可縮寫為: p

p 可縮寫為: p

配色表:

長度值

比較常用到px(畫素)、em、% 百分比(這三種單位都是相對單位)

1、畫素

畫素指的是顯示器上的小點(css規範中假設「90畫素=1英吋」)。在目前大多數的設計者都傾向於使用畫素(px)作為單位。

2、em

本元素設定的字型 font-size 值,如果元素的 font-size 為 14px ,那麼 1em = 14px;如果 font-size 為 18px,那麼 1em = 18px。

示例: p

實現段落首行縮排 24px(也就是兩個字型大小的距離)。

注意:但當給 font-size 設定單位為 em 時,此時計算的標準以 p 的父元素的 font-size 為基礎。

示例:

html:

以這個例子span>為例。p>

css:

pspan

結果 span 中的字型「例子」字型大小就為 11.2px(14 * 0.8 = 11.2px)。

3、百分比

示例: p 設定行高(行間距)為字型的130%(12 * 1.3 = 15.6px)。

字型縮寫:

示例:給網頁設定字型的**:

body

可縮寫為一句:

body

注意:1、使用這一簡寫方式至少要指定 font-size 和 font-family 屬性,其他的屬性(如 font-weight、font-style、font-varient、line-height)如未指定將自動使用預設值。

2、在縮寫時 font-size 與 line-height 中間要加入「/」斜扛。

一般情況下因為對於中文**,英文還是比較少的,所以下面縮寫**比較常用:

body

只是有字型大小、行間距、中文字型、英文本型設定。

CSS 顏色值 長度值

在網頁中的顏色設定是非常重要,有字型顏色 color 背景顏色 background color 邊框顏色 border 等,設定顏色的方法也有很多種 1 英文命令顏色 前面幾個小節中經常用到的就是這種設定方法 p2 rgb顏色 這個與 photoshop 中的 rgb 顏色是一致的,由 r red...

CSS中的 顏色值 長度值

p 這個與 photoshop 中的 rgb 顏色是一致的,由 r red g green b blue 三種顏色的比例來配色。p每一項的值可以是 0 255 之間的整數,也可以是 0 100 的百分數。如 p這種顏色設定方法是現在比較普遍使用的方法 其原理其實也是 rgb 設定,但是其每一項的值由...

CSS 布局模型,顏色值,長度值

目錄 一 布局模型 網頁布局模型 個人理解,就是對html中各個元素進行乙個排列。而排列的方法可以分為三種 流動模型 浮動模型 層模型。二 流動模型 這是網頁預設情況的布局模式。特徵 塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布,因為在預設狀態下,塊狀元素的寬度都為100 獨佔一行 內聯...