從零開始學習html(十四)單位和值

2022-07-16 05:48:12 字數 2341 閱讀 4228

1

doctype html

>

2<

html

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

title

>顏色值

title

>

6<

style

type

="text/css"

>78

style

>

9head

>

1011

<

body

>

12<

p>當我還是三年級的學生時是乙個害羞的小女生。

p>

13body

>

14html

>

顏色值在網頁中的顏色設定是非常重要,有字型顏色(color)、背景顏色(background-color)、邊框顏色(border)等,設定顏色的方法也有很多種:

1、英文命令顏色

前面幾個小節中經常用到的就是這種設定方法:

p
2、rgb顏色

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

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

p
3、十六進製制顏色

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

p
配色表:

(單擊可放大)

來試試:為文字設定顏色為#0fc;

p

1

doctype html

>

2<

html

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

title

>長度

title

>

6<

style

type

="text/css"

>7p

8span

9style

>

10head

>

11<

body

>

12<

p>慕課網,<

span

>超酷的網際網路

span

>、it技術免費學習平台,創新的網路一站式學習、實踐體驗;<

span

>服務及時貼心

span

>,內容專業、<

span

>有趣易學

span

>。專注服務網際網路工程師快速成為技術高手!

p>

13body

>

14html

>

長度值長度單位總結一下,目前比較常用到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:

以這個例子為例。

css:

p

span

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

3、百分比

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

HTML從零開始

一 標籤 1.使用小寫 2.開始標籤常被稱為開放標籤 opening tag 結束標籤常稱為閉合標籤 closing tag 有效 示例 i reallystrong mean thatem 無效 示例 invalid i reallyem mean thatstrong 二 屬性 1.開始標籤包含...

HTML 從零開始的學習過程 1

1.html的概念 html hyper text markup language 超文字標記語言,使用一系列的標籤對文件 圖示以及其他資訊資源進行統一關聯。特點 1.不需要編譯,直接由瀏覽器執行 2.文字檔案 3.檔案字尾名為html 4.對大小寫不敏感。2.html基礎語法部分 基本結構 doc...

HTML 從零開始的學習過程(3)

結構 標題 caption 表頭 th 頭,內容居中顯示,加粗顯示 tr thead 主體 td 表體,預設靠左顯示,不加粗 tr tbody table 腳注 td 表體,預設靠左顯示,不加粗 tr tfoot body 屬性 frame 外部邊框樣式 void,不顯示外側邊框 above,顯示上...