html開發(fā)筆記08- 字體樣式與顏色（標(biāo)簽的屬性）

、標(biāo)簽的分類：雙標(biāo)簽和單標(biāo)簽

雙標(biāo)簽：就是成對(duì)出現(xiàn)的，類似于這種 <html> </html>

單標(biāo)簽：就是可以單個(gè)使用的，類似于 <br> 換行標(biāo)簽或 <hr>水平線標(biāo)簽。

二、標(biāo)簽屬性的作用：

標(biāo)簽的屬性是用來定義文字或字符的顏色、寬高、粗細(xì)、大小、等，這個(gè)是標(biāo)簽屬性的作用。

三、標(biāo)簽屬性的特性：

1、每一個(gè)標(biāo)簽都有自己的屬性，單標(biāo)簽和雙標(biāo)簽都有。

2、一個(gè)標(biāo)簽可以有多個(gè)屬性。

3、每個(gè)屬性都有對(duì)應(yīng)的值，值要用單或雙引號(hào)引起來。

4、多個(gè)屬性之間使用空格隔開。

5、屬性沒有順序之分。

6、字體屬性值，必須是系統(tǒng)可以識(shí)別的字體，一般為系統(tǒng)自帶字體。

7、HTML5 中 font 屬性已經(jīng)棄用。

源代碼：↓

<!DOCTYPE html>

<head>

<title>中央氣象局</title>

</head>

<body>

</body>

</html>

家好，我是Echa。

最近有不少的粉絲老鐵們私信我為啥這幾天沒有創(chuàng)作新內(nèi)容了，實(shí)在對(duì)不住。小編我身在廣州中招羊了，我在最近一篇文章也有提到過，今天是第四天，基本上康復(fù)了，奧密克戎BA.5其實(shí)沒有那么恐怖，中招了前三天特難受，熬過來了就沒事了，大家莫慌。現(xiàn)在小編就可以認(rèn)認(rèn)真真的繼續(xù)創(chuàng)作內(nèi)容了。同時(shí)也非常感謝大家默默的關(guān)心我小編身體狀況，非常謝謝。

創(chuàng)作不易，喜歡的老鐵們加個(gè)關(guān)注，點(diǎn)個(gè)贊，后面會(huì)持續(xù)更新干貨，速速收藏，謝謝！

說起 CSS 單位，我們最常用的可能就是像素單位（px），它是一個(gè)絕對(duì)單位，也就是說一個(gè)10px的文字，放在哪里都是一樣大的。單位可以影響顏色、距離、尺寸等一系列的屬性。CSS中單位的形式有很多種，下面就來學(xué)習(xí)一下 CSS 中單位！

1. 相對(duì)單位

相對(duì)單位就是相對(duì)于另一個(gè)長(zhǎng)度的長(zhǎng)度。CSS中的相對(duì)單位主要分為兩大類：

字體相對(duì)單位，他們都是根據(jù)font-size來進(jìn)行計(jì)算的。常見的字體相對(duì)單位有：em、rem、ex、ch；
視窗相對(duì)單位，他們都是根據(jù)視窗大小來決定的。常見的視窗相對(duì)單位有vw、vh、vmax、vmin。

下面就來看看這些常見的CSS單位。

（1）em 和 rem

em是最常見的相對(duì)長(zhǎng)度單位，適合基于特定的字號(hào)進(jìn)行排版。根據(jù)CSS的規(guī)定，1em 等于元素的font-size屬性的值。

em 是相對(duì)于父元素的字體大小進(jìn)行計(jì)算的。如果當(dāng)前對(duì)行內(nèi)文本的字體尺寸未進(jìn)行顯示設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。當(dāng)DOM元素嵌套加深時(shí)，并且同時(shí)給很多層級(jí)顯式的設(shè)置了font-size的值的單位是em，那么就需要層層計(jì)算，復(fù)雜度會(huì)很高。

當(dāng)然，上面的這個(gè)說法是不嚴(yán)謹(jǐn) 的。來看一個(gè)例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .parent {
            width: 300px;
            height: 300px;
            font-size: 20px;
        }
        .child {
            border: 1em solid ;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
           子元素
        </div>
    </div>
</body>
</html>

這里給父元素設(shè)置了字體大小為20px，然后給子元素的border寬度設(shè)置為1em，這時(shí)，子元素的border值為20px，確實(shí)是相對(duì)于父元素的字體大小設(shè)置的：

那如果我們給子元素的字體設(shè)置為30px：

.child {
  font-size: 30px;
  border: 1em solid ;
}

這時(shí)可以看到，子元素的邊框?qū)挾染褪?0px，它是相對(duì)自己大小進(jìn)行計(jì)算的：

所以，可以得出結(jié)論：如果自身元素是沒有設(shè)置字體大小的，那么就會(huì)根據(jù)其父元素的字體大小作為參照去計(jì)算，如果元素本身已經(jīng)設(shè)置了字體，那么就會(huì)基于自身的字體大小進(jìn)行計(jì)算。

em單位除了可以作用于 font-size之外，還可以運(yùn)用于其他使用長(zhǎng)度的屬性，比如border-width、width、height、margin、padding、text-shadow等。

所以，em的使用還是比較復(fù)雜的，它可能會(huì)繼承任意一級(jí)父元素的字體大小。需要謹(jǐn)慎使用。

rem相對(duì)于em就簡(jiǎn)單了很多，它是根據(jù)頁面的根元素（根元素）的字體大小來計(jì)算的。來對(duì)上面的例子進(jìn)行修改：

.child {
  font-size: 30px;
  border: 1rem solid ;
}

html {
 font-size: 25px;
}

效果如下，可以看到，邊框的長(zhǎng)度變成了25px，它是根據(jù)根元素html的字體大小計(jì)算的：

如果沒有對(duì)根元素設(shè)定字號(hào)的話，font-size: 1rem的作用與font-size: initial相同。

使用 em 和 rem 可以讓我們靈活的夠控制元素整體的放大和縮小，而不是固定大小。那何時(shí)應(yīng)使用 em，何時(shí)應(yīng)使用 rem 呢？可以根據(jù)兩者的差異來進(jìn)行選擇：

兩者在客戶端中計(jì)算出來的樣式都會(huì)以px的形式顯示；
rem是相對(duì)于根元素html的font-size計(jì)算，em 相對(duì)于元素的font-size計(jì)算；
當(dāng)需要根據(jù)瀏覽器的font-size設(shè)置縮放時(shí)，應(yīng)該使用 rem；
使用 em 應(yīng)該根據(jù)組件的font-size來定，而不是根元素的font-size來定；
rem 可以從瀏覽器字體設(shè)置中繼承 font-size 值， em 可能受任何繼承過來的父元素 font-size 的影響。

（2）ex 和 ch

ex 和 ch 都是排版用的單位，它們的大小取決于元素的font-size 和 font-family屬性。

ex 指的是所用字體中小寫字母 x 的高度。因此，如果兩個(gè)字體不一樣，那么 ex 的值是不一樣的。因?yàn)槊糠N字體的小寫 x 的高度是不一樣的。
ch 和 ex 類似，不過它是基于數(shù)字 0 的寬度計(jì)算的。會(huì)隨著字體的變化而變化。而0 的寬度通常是對(duì)字體的平均字符寬度，它是一個(gè)估計(jì)值。由于 ch 是一個(gè)近似等寬的單元，所以在設(shè)置容器的寬度時(shí)很有用，比如一個(gè)容器想要顯示指定個(gè)數(shù)的字符串時(shí)，就可以使用這個(gè)單位。

（3）vw、vh、vmax 和 vmin

這四個(gè)單位都是視窗單位，所謂的視窗，在web端指的就是可視區(qū)域，移動(dòng)端的視窗指的就是布局視窗。如果視窗大小發(fā)生了變化，那么這些值都會(huì)隨之變化。這四個(gè)單位指的是：

vw：視窗寬度的百分比；
vh：視窗高度的百分比；
vmax：較大的 vh 和 vw；
vmin：較小的 vh 和 vw。

假如一個(gè)瀏覽器的高度是800px，那么1vh的值就是8px。vh和vw的大小總是和視窗的高度和寬度有關(guān)。

vmin 和 vmax 與視窗寬度和高度的最大值和最小值有關(guān)。假如一個(gè)瀏覽器高度為500px，寬度為1200px，那么1vmin就是5px，1vmax就是12px。

這些單位都是長(zhǎng)度單位，所以可以在任何允許使用長(zhǎng)度單位的地方使用。這些單位比較適合用于創(chuàng)建全視區(qū)界面，例如移動(dòng)設(shè)備的界面，因?yàn)樵厥歉鶕?jù)視區(qū)的尺寸而變化的，與文檔樹中的任何元素都沒有關(guān)系。

2. 絕對(duì)單位

在 CSS 中，絕對(duì)單位包括：px 、pt 、pc、 cm 、 mm 、in 等。絕對(duì)單位是一個(gè)固定的值，它反應(yīng)了一個(gè)真實(shí)的物理尺寸。它不會(huì)受屏幕大小或者字體的影響。它們的大小取決于值以及屏幕的分辨率（DPI，每英寸的點(diǎn)數(shù)）。px就是我們最常用的絕對(duì)單位之一。這些絕對(duì)單位的換算關(guān)系如下：

1in = 25.4mm = 2.54cm = 6pc = 72pt =96px

（1）px

px 全稱為 Pixels，表示像素，它并不嚴(yán)格等于顯示器的像素，尤其在高清屏下。盡管CSS單位會(huì)根據(jù)瀏覽器、操作系統(tǒng)或者硬件適當(dāng)縮放，在某些設(shè)備或者用戶的分辨率設(shè)置下也會(huì)發(fā)生變化，但是96px通常等于一個(gè)物理英寸的大小。

CSS 將光柵圖像(如照片等)的顯示方式定義為默認(rèn)每一個(gè)圖像大小為1px。一個(gè)“600x400”解析度的照片的長(zhǎng)寬分別為“600px”和“400px”，所以照片本身的像素并不會(huì)與顯示裝置像素一致，而是與 px 單位一致。如此就可以將圖像完整的與網(wǎng)頁的其它元素排列起來。

很多時(shí)候， px 也常被稱為 CSS 像素。它是一個(gè)絕對(duì)單位，但也可以被視為相對(duì)單位，因?yàn)橄袼貑挝幌鄬?duì)的是設(shè)備像素。在同一個(gè)設(shè)備上，每 1 個(gè) CSS 像素所代表的物理像素是可以變化的；在不同的設(shè)備之間，每 1 個(gè) CSS 像素所代表的物理像素是可以變化的。

.box {
    width: 100px;
    height: 100px;
}

（2）pt

pt 全稱為 Point，表示點(diǎn)。常用于軟件設(shè)計(jì)和排版印刷行業(yè)（筆者做的前端系統(tǒng)，最終的產(chǎn)物就是一個(gè)需要拿去印刷的PDF，所以會(huì)經(jīng)常用到這個(gè)單位）。當(dāng)使用這個(gè)單位時(shí)，無論顯示器的分辨率是多少，打印在紙上的結(jié)果都是一樣的。

如果單純?yōu)榱司W(wǎng)頁的顯示，建議就使用px像素單位，如果需要輸出印刷產(chǎn)品，就可以考慮使用pt。

（3）pc

pc 全程為 Picas，表示派卡。相當(dāng)于我國(guó)新四號(hào)鉛字的尺寸。派卡也是印刷的術(shù)語，1派卡等于12點(diǎn)。它和 px 的換算關(guān)系如下：

1pc = 16px

（4）cm

cm 全稱為 Centimeters，表示厘米。它和 px 的換算關(guān)系如下：

1cm = 37.8px

（5）mm

mm 全稱為 Millimeters，表示毫米。它和 px 的換算關(guān)系如下：

1mm = 3.78px

（6）in

in 全稱為 Inches，表示英寸。它和 px 的換算關(guān)系如下：

1in = 96px

3. 頻率單位

CSS中的頻率單位有兩個(gè)：赫茲（Hz）和千赫茲（kHz）。它們的換算關(guān)系如下：

1kHz = 1000Hz

通常情況下，頻率單位使用在聽或說級(jí)聯(lián)樣式表中。頻率可以被用來改變一個(gè)語音閱讀文本的音調(diào)。低頻率就是低音，高頻率就是高音。

.low { 
  pitch: 105Hz; 
} 

.squeal { 
  pitch: 135Hz; 
}

需要注意，當(dāng)數(shù)值為0時(shí)，單位對(duì)值沒有影響，但是單位是不能省略的。也就是說0、0Hz、0kHz是不一樣的。所以，在使用頻率單位時(shí)，不要直接寫0。另外，這兩個(gè)單位是不區(qū)分大小寫的。

4. 時(shí)間單位

CSS中的時(shí)間單位有兩個(gè)：秒（s）和毫秒（ms）。這兩個(gè)時(shí)間單位都是CSS新增的單位。這兩個(gè)單位的換算關(guān)系如下：

1s = 1000ms

時(shí)間單位主要用于過度和動(dòng)畫中，用于定義持續(xù)時(shí)間或延遲時(shí)間。下面兩種定義是等效的：

a[href] {
 transition-duration: 2.5s;
}

a[href] {
 transition-duration: 2500s;
}

5. 分辨率單位

CSS中的分辨率單位有三個(gè)：dpi、dpcm、dppx。這三個(gè)單位都是CSS3中華新增的單位。他們都是正值，不允許為負(fù)值。這三個(gè)單位的換算關(guān)系如下：

1dppx = 96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi

分辨率單位主要用于媒體查詢等操作。

（1）dpi

dpi 全稱為 dots per inch，表示每英寸包含的點(diǎn)的數(shù)量。普通屏幕通常包含 72或96個(gè)點(diǎn)，大于 192dpi 的屏幕被稱為高分屏。


@media screen and (min-resolution: 96dpi) { ... }
@media print and (min-resolution: 300dpi) { ... }

（2）dpcm

dpcm 全稱為 dots per centimeter，表示每厘米包含的點(diǎn)的數(shù)量。

@media screen and (min-resolution: 28dpcm) { ... }
@media print and (min-resolution: 118dpcm) { ... }

（3）dppx

dppx 全稱為 dots per pixel，表示每像素（px）包含點(diǎn)的數(shù)量。由于CSS px的固定比率為1:96，因此1dppx相當(dāng)于96dpi。它對(duì)應(yīng)于由圖像分辨率定義的CSS中顯示的圖像的默認(rèn)分辨率。

@media screen and (min-resolution: 2dppx) { ... }
@media screen and (min-resolution: 1dppx) and (max-resolution: 1.9dppx) { ... }

6. 角度單位

CSS中的角度單位有四個(gè)：deg、grad、rad、turn。這些角度單位都是CSS3中新增的單位。它們的換算關(guān)系如下：

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

一般這些角度單位用于元素的旋轉(zhuǎn)操作，包括2D旋轉(zhuǎn)、3D旋轉(zhuǎn)等。

當(dāng)旋轉(zhuǎn)值為正值時(shí)，元素會(huì)順時(shí)針旋轉(zhuǎn)；
當(dāng)旋轉(zhuǎn)值為負(fù)值時(shí)，元素會(huì)逆時(shí)針旋轉(zhuǎn)。

通常情況下，一個(gè)完整的旋轉(zhuǎn)就是360度。所以，所有的角度都在0-360度之間。但是，超出這個(gè)范圍的值也是允許的，只不過都會(huì)歸到0-360度之間。比如，順時(shí)針旋轉(zhuǎn)420度（450deg）、逆時(shí)針旋轉(zhuǎn)270度（-270deg）、順時(shí)針旋轉(zhuǎn)90度（90deg）都是一樣的效果，都會(huì)歸為90deg。但是當(dāng)使用動(dòng)畫時(shí)，這些角度值就非常重要了。

CSS的旋轉(zhuǎn)主要依賴于 transform 屬性中的 rotate() 、rotate3d、 skew() 等方法。只需給它們傳遞旋轉(zhuǎn)的角度即可。

除了旋轉(zhuǎn)會(huì)使用角度之外，線性漸變也會(huì)經(jīng)常使用角度值：

background: linear-gradient(45deg, #000, #fff);

（1）deg

deg 全稱為 Degress，表示度，一個(gè)圓總共360度。

transform: rotate(2deg);

（2）grad

grad 全稱為 Gradians，表示梯度，一個(gè)圓總共400梯度。

transform: rotate(2grad);

（4）rad

rad 全稱為 Radians，表示弧度，一個(gè)圓總共2π弧度。

transform: rotate(2rad);

（4）turn

turn 全稱為 Turns，表示圈（轉(zhuǎn)），一個(gè)圓總共一圈（轉(zhuǎn)）。

transform:rotate(.5turn);

7. 百分比單位

百分比（%）也是我們比較常用的單位之一，所有接受長(zhǎng)度值的屬性都可以使用百分比單位。但是不同屬性使用該單位的效果可能并不一樣。但是都需要有一個(gè)參照值，也就是說百分比值是一個(gè)相對(duì)的值。

下面來看看常見場(chǎng)景中的百分比單位的使用。

（1）盒模型中的百分比

在CSS中的盒模型包含的屬性有：width、max-width、min-width、height、max-height、min-height、padding、margin等。這些屬性在使用百分比時(shí)，參照物不盡相同：

width、max-width、min-width：值為百分比時(shí)，其相對(duì)于包含塊的 width 進(jìn)行計(jì)算；
height、max-height、min-height：值為百分比時(shí)，其相對(duì)于包含塊的 height 進(jìn)行計(jì)算；
padding、margin：值為百分比時(shí)，如果是水平的值，就是相對(duì)于包含塊的 width 進(jìn)行計(jì)算；如果是垂直的值，就是相對(duì)于包含塊的 height 進(jìn)行計(jì)算。

（2）文本中的百分比

在CSS中文本控制的屬性有font-size、line-height 、vertical-align、 text-indent等。這些屬性在使用百分比時(shí)，參照物不盡相同：

font-size：根據(jù)父元素的font-size 進(jìn)行計(jì)算；
line-height：根據(jù)font-size進(jìn)行計(jì)算；
vertical-align：根據(jù)line-height進(jìn)行計(jì)算；
text-indent：如果是水平的，則根據(jù)width進(jìn)行計(jì)算，如果是垂直的，則根據(jù) height 進(jìn)行計(jì)算。

（3）定位中的百分比

在CSS中用控制 position 位置的top、right、bottom、left都可以使用百分比作為單位。其參照物就是包含塊的同方向的width和height。不同定位的包含塊不盡相同：

如果元素為靜態(tài)（ static ）或相對(duì)定位（ relative ），包含塊一般是其父容器；
如果元素為絕對(duì)定位（ absolute ），包含塊應(yīng)該是離它最近的 position 為 absolute 、 relative 或 fixed 的祖先元素；
如果元素為固定定位（ fixed ），包含塊就是視窗（ viewport ）。

（4）變換中的百分比

CSS 中的 transform 屬性中的 translate 和 transform-origin 值也可以設(shè)置百分比。

translateX() 根據(jù)容器的 width 計(jì)算
translateY() 根據(jù)容器的 height 計(jì)算
transform-origin 中橫坐標(biāo)（ x ）相對(duì)于容器的 width 計(jì)算；縱坐標(biāo)（ y ）相對(duì)于容器的 height 計(jì)算

注意，在 translate 還有一個(gè) z 軸的函數(shù) translateZ() 。它是不接受百分比為單位的值。

用方案

1、設(shè)置根 font-size：625%（或其它自定的值，但換算規(guī)則 1rem 不能小于 12px）

2、通過媒體查詢分別設(shè)置每個(gè)屏幕的根 font-size

3、CSS 直接除以 2 再除以 100 即可換算為 rem

優(yōu)：有一定適用性，換算也較為簡(jiǎn)單。

劣：有兼容性的坑，對(duì)不同手機(jī)適配不是非常精準(zhǔn)；需要設(shè)置多個(gè)媒體查詢來適應(yīng)不同手機(jī)，單某款手機(jī)尺寸不在設(shè)置范圍之內(nèi)，會(huì)導(dǎo)致無法適配。

網(wǎng)易方案

1、拿到設(shè)計(jì)稿除以 100，得到寬度 rem 值

2、通過給 html 的 style 設(shè)置 font-size，把 1 里面得到的寬度 rem 值代入x document.documentElement.style.fontSize =document.documentElement.clientWidth / x + ‘px‘;

3、設(shè)計(jì)稿 px/100 即可換算為 rem

優(yōu)：通過動(dòng)態(tài)根 font-size 來做適配，基本無兼容性問題，適配較為精準(zhǔn)，換算簡(jiǎn)便。

劣：無 viewport 縮放，且針對(duì) iPhone 的 Retina 屏沒有做適配，導(dǎo)致對(duì)一些手機(jī)的適配不是很到位。

手淘方案

1、拿到設(shè)計(jì)稿除以 10，得到 font-size 基準(zhǔn)值

2、引入 flexible

3、不要設(shè)置 meta 的 viewport 縮放值

4、設(shè)計(jì)稿 px/ font-size 基準(zhǔn)值，即可換算為 rem

優(yōu)：通過動(dòng)態(tài)根 font-size、viewpor、dpr 來做適配，無兼容性問題，適配精準(zhǔn)。

劣：需要根據(jù)設(shè)計(jì)稿進(jìn)行基準(zhǔn)值換算，在不使用 sublime text 編輯器插件開發(fā)時(shí)，單位計(jì)算復(fù)雜。

在線咨詢

上一篇：前端開發(fā)之CSS實(shí)現(xiàn)input上傳按鈕美化（兼容各瀏覽器）
下一篇：HTML中的標(biāo)簽

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商