99热婷婷-99热网-99热网址-99热亚洲-国产精品v欧美精品∨日韩-国产精品videosse

字體樣式一般具有以下特點(diǎn)：

字體類型（樣式）、字體粗細(xì)、字體大小、字體系列

(1) 字體類型(style) font-style

用于設(shè)置字體樣式，可以設(shè)置以下值：

①normal：普通字體

②斜體：斜體

③oblique：斜字體

(2)字體粗細(xì)font-weight

用于設(shè)置字體粗細(xì)，可以設(shè)置以下值：

①normal：正常厚度

②粗體：粗體

③bolder：字體加粗

④lighter：字體變細(xì)

⑤100~900：步長為100，

400相當(dāng)于正常，700相當(dāng)于粗體

(3)字體大小font-size

用于設(shè)置字體大小，可以設(shè)置任意正整數(shù)和浮點(diǎn)數(shù)

默認(rèn)情況下，幾乎所有瀏覽器的默認(rèn)字體大小都是16px。而Chrome等主流瀏覽器不支持12像素以下的字體。

(4)字體家族font-family

用于設(shè)置字體系列古典的英文，也就是我們通常所說的“使用的字體”。

設(shè)置字體有以下規(guī)則：

1、使用中文字體或帶空格的英文字體名稱時，需要將字體名稱用“引號”括起來

2. 單字字體名稱不需要用引號引起來。

3.“font-family”可以有多個值。多值設(shè)置的目的是當(dāng)瀏覽用戶的本地計算機(jī)沒有找到第一個設(shè)置值所代表的字體時，就會尋找第二個，以此類推。 ，如果沒有找到最后一個值的匹配字體，瀏覽器將使用自己的默認(rèn)字體。

4、考慮到網(wǎng)頁在不同設(shè)備上最終顯示效果的一致性，我們通常使用的中文字體只有：“宋體”、“微軟雅黑”、“黑體”、“凱體”、“優(yōu)源” ”等，而目前“微軟雅黑”是最常用的設(shè)計字體。

5、常用英文字體有：“Arial”、“Helvetica”、“Tahoma”、“Verdana”、“Lucida Grande”、“Times New Roman”、“Georgia”等。

2. 組合值的寫法

(1)賦予所有屬性

我們可以組合“font”的多個值來書寫，比如我們要設(shè)置一個

樣式為正常、粗體、20像素大小、“微軟雅黑”

和

樣式為斜體，正常粗細(xì)，字體大小為22像素，“宋體”

我們可以這樣寫：

CSS代碼

(2) 省略字體類型或字體樣式之一，或兩者

1、因此，在寫入“font”屬性的組合值時，可以省略兩者之一，用識別的值來設(shè)置。另一個自動為“正常”。

2.你甚至可以省略前兩個值，只保留“font-size”和“font-family”

即：style和weight可以給其中之一，也可以兩者都給，也可以都不給，順序也可以改變，但必須在前兩者。

喜歡：

CSS代碼

注意：

在“font”組合值的寫法中，只有“font-size”和“font-family”兩個值不能省略，兩者缺一不可。順序必須先是尺寸，然后是系列，不能更改，否則瀏覽服務(wù)器將無法識別該值，并會報告該組合值的錯誤。

(3) 設(shè)置字體中的文本行高

除了上面提到的“font”屬性組合值的寫法之外，還有一種不太常見但更實(shí)用的寫法，就是直接設(shè)置文本中的行高“l(fā)ine-height” “字體”屬性。 ，如下：

3.擴(kuò)展名：字體單位px、em、rem【必須掌握】

①px（像素，相對于顯示器屏幕分辨率）

②em（相對于當(dāng)前元素中文字的字體大小，會繼承父元素的大小）

③rem（相對于HTML根元素，最常用的單位）

PX

1. 像素px是相對于顯示器屏幕分辨率而言的。

2.PX特點(diǎn)

?1. IE無法調(diào)整以px為單位的字體大小；

?2.大多數(shù)國外網(wǎng)站之所以可以調(diào)整，是因?yàn)樗麄兪褂胑m或rem作為字體單位；

?3. Firefox 可以調(diào)整 px、em、rem。大多數(shù)中國網(wǎng)民使用IE瀏覽器（或內(nèi)核）。

3. 當(dāng)你放大一張圖片時，你會看到許多小矩形，這些就是像素。

EM

4.em是相對長度單位。相對于當(dāng)前標(biāo)簽中 font-size 的大小。

5. 如果當(dāng)前標(biāo)簽的字體大小沒有手動設(shè)置，則當(dāng)前標(biāo)簽中的font-size將繼承父標(biāo)簽的字體大小。

[如果父標(biāo)簽沒有設(shè)置大小，那么會找到繼承的頂點(diǎn)->瀏覽器默認(rèn)的16px字體大小。因此，默認(rèn)是16px==1em]

6. 如果設(shè)置，則會根據(jù)設(shè)置的font-size。

7.在主流瀏覽器中，字體大小不能小于12px（寬度和高度可以小于12px）。如果字體大小小于12px，則會強(qiáng)制為12px。

你好啊
你好啊
你好啊
你好啊

8.EM特點(diǎn)

?em 的值不固定；

?em 將繼承父元素的字體大小。

快速眼動睡眠

Rem是CSS3中一個新的相對單位（root em，root em），引起了廣泛的關(guān)注。

9. rem為元素設(shè)置字體大小時，仍然是相對大小，但只是相對于HTML根元素。

這個單位可以說結(jié)合了相對尺寸和絕對尺寸的優(yōu)點(diǎn)。通過它，只需修改根元素就可以按比例調(diào)整所有字體大小，并且可以避免逐層復(fù)合字體大小的連鎖反應(yīng)。

10.rem單位兼容性問題

目前，除IE8及更早版本之外的所有瀏覽器都支持rem。

對于不支持的瀏覽器，解決辦法很簡單，就是額外寫一條絕對單位語句。這些瀏覽器忽略用 rem 設(shè)置的字體大小。這是一個例子：

p {字體大小：14px;字體大小：.875rem;}

注意：

選擇使用哪種字體單位主要由您的項(xiàng)目決定。如果您的用戶群使用最新版本的瀏覽器，建議使用 rem。如果要考慮兼容性，就使用px，或者同時使用兩者。

11.px和rem選擇？

① 對于只需要適配少量移動設(shè)備且分辨率對頁面影響不大的，使用px。

② 如果需要適配各種移動設(shè)備，使用rem。例如，只需適配iPhone、iPad等分辨率差異較大的設(shè)備即可。

4.擴(kuò)展：css3尺寸單位vw、vh、vmin、vmax【必須了解】

①基本概念

我們先來了解一個術(shù)語：窗口

視口是你的瀏覽器實(shí)際顯示內(nèi)容的區(qū)域，即網(wǎng)頁不包括工具欄和任務(wù)欄的可見區(qū)域的大小。

那么，vw、vh、vmin、vmax就是窗口單位，也是相對單位。它與頁面的父節(jié)點(diǎn)或根節(jié)點(diǎn)無關(guān)。它由視口的大小決定。該值為數(shù)字n，表示它占據(jù)視口大小的n%。

②詳細(xì)說明

vw：窗口寬度的百分比（1vw代表窗口寬度的1%）

vh：窗口高度的百分比（1vh代表窗口高度的1%）

vmin：當(dāng)前vw和vh中較小的一個

vmax：當(dāng)前vw和vh之間的較大值

③代碼示例

文檔

/* 每個div的大小為視覺高度的20% /

div {

邊框：1px 純紅色；

高度：20vh；

/ div為視圖寬度的40%，字體大小為視圖寬度的1% /

.演示{

寬度：40vw；

字體大小：1vw；

背景顏色：#50688B；

顏色：#FFF；

/ div為視圖寬度的50%，字體大小為視圖寬度的2% /

.demo1 {

寬度：50vw；

字體大小：2vw；

背景顏色: rgb(53, 108, 190);

顏色: RGB(170, 111, 111);

/ div為視圖寬度的60%貝語網(wǎng)校，字體大小為視圖寬度的3% /

.demo2 {

寬度：60vw；

字體大小：3vw；

背景顏色：#644bd3；

顏色：rgb(54,41,41)；

/ div為視圖寬度的70%，字體大小為視圖寬度的4% */

.demo3 {

寬度：70vw；

字體大小：4vw；

背景顏色：#ff006e；

顏色：#FFF；

所有div的高度為20vw，即視圖寬度的20%

div為40vw，即視覺寬度的40%，字體大小為1vw，即視覺寬度的1%。

div為50vw，即視覺寬度的50%，字體大小為2vw，即視覺寬度的2%。

div為60vw，即視覺寬度的60%，字體大小為3vw，即視覺寬度的3%。

div為60vw，即視覺寬度的70%，字體大小為4vw，即視覺寬度的4%。

````

④vw、vh和%百分比的區(qū)別

(1)%是相對于父元素大小設(shè)置的比例，vw和vh由窗口大小決定。

（2）vw和vh的優(yōu)點(diǎn)是可以直接獲取高度，而使用%在不設(shè)置body高度的情況下無法正確獲取可見區(qū)域的高度，所以這是一個很好的優(yōu)點(diǎn)。

⑤vmin和vmax的使用

開發(fā)移動頁面時，如果使用vw和wh設(shè)置字體大小（如5vw），則縱向和橫向模式顯示的字體大小會不同。

由于vmin和vmax是當(dāng)前較小的vw和vh以及當(dāng)前較大的vw和vh。這里可以使用vmin和vmax。使文本大小在水平和垂直屏幕上保持一致。

⑥瀏覽器兼容性

(1) 臺式電腦

Chrome：自版本 26（2013 年 2 月）起完全支持

Firefox：自版本 19（2013 年 1 月）起得到完美支持

Safari：自 6.1 版（2013 年 10 月）起完全支持

Opera：自版本 15（2013 年 7 月）起得到完美支持

IE：自IE10（包括Edge）起僅部分支持（不支持vmax，vm取代vmin）

(2) 移動設(shè)備

Android：自 4.4 版（2013 年 12 月）起完全支持

iOS：自iOS8（2014年9月）起完美支持

5.擴(kuò)展：解決復(fù)選框無法與旁邊文字對齊的問題

解決方案：

設(shè)置輸入垂直對齊：-6px；

.讀取輸入{

垂直對齊：-6px；

6、擴(kuò)展：兩個原本對齊的內(nèi)聯(lián)div，其中一個添加內(nèi)容后無法對齊。

解決方案：

方法一：設(shè)置div超出文字的內(nèi)容自動隱藏。

方法二：給div設(shè)置vertical-align：top； （有時也可以使用top）

5. CSS文字樣式設(shè)置

當(dāng)很多單詞組合在一起形成文本時，現(xiàn)在我們正在研究如何設(shè)計這些文本的樣式。

1.文字的顏色“顏色”

在當(dāng)前的瀏覽器標(biāo)準(zhǔn)中，更改瀏覽器默認(rèn)字體顏色（#000000）的唯一方法是通過CSS“color”屬性進(jìn)行設(shè)置。顏色。

color屬性可以設(shè)置4種值

①彩色英語單詞

可以通過color的英文單詞直接設(shè)置文本的顏色，如

“紅色”、“橙色”、“黃色”、“綠色”、“青色”、“藍(lán)色”、“紫色”、“粉色”、“灰色”、“黑色”和“白色”

ETC。

②HEX（三基色，十六進(jìn)制表示）

使用“#”+十六進(jìn)制表示顏色。

有“#”+“三位數(shù)”和“#”+“六位數(shù)”。

如果是“三位數(shù)”的形式，第一位數(shù)字代表“紅色”，第二位數(shù)字代表“綠色”，第三位數(shù)字代表“藍(lán)色”，通過取值范圍“0-9”，“af” (10-16)諸如“#26f”這樣的組合總共可以表達(dá)4,096種顏色。

如果是“六位數(shù)字”的形式，則可以表示的顏色數(shù)量更加詳細(xì)，第一、第二位數(shù)字代表“紅色”，第三、第四位數(shù)字代表“綠色”，第四、第五位數(shù)字代表“綠色”。代表“藍(lán)色”，也可以通過取值范圍“0-9”和“af”的組合，例如“#2369fd”，總共可以表達(dá)16,777,216種【超過1600萬】種顏色。

③RGBa（三基色，十進(jìn)制表示）

就像“HEX”代表三基色一樣，該模式也是使用三基色的值來表達(dá)顏色，但“RGBa”顏色模式使用十進(jìn)制值。

格式如“rgb(34, 102, 255)”，值之間用英文逗號“,”分隔。第一個值代表“紅色”，第二個值代表“綠色”，第三個值代表“藍(lán)色”，每個值的范圍是“0-255”（256個顏色級別），也可以代表16,777,216[更多超過 1600 萬種]顏色。

另外，該模式還支持不透明度的設(shè)置，即“RGBa”中的“a”（alpha），代表不透明度，取值范圍是“0到1”之間的浮點(diǎn)數(shù)（可以四舍五入為兩位小數(shù)），

“0”表示完全透明，“1”表示完全不透明，寫法如“rgba(34, 102, 255, 0.55)”、“rgba(34, 102, 255, .9)”或“rgb(34, 102, 255）”。

④HSLa（色調(diào)、飽和度、亮度、不透明度）

該模式由

“色調(diào)”，

“飽和”，

“亮度”

“不透明度”（阿爾法）

為了表達(dá)顏色，不透明度的表示與“RGBa”相同。我們主要看以下三個值的含義：

1) 色調(diào)

除去“黑”和“白”從純紅到純藍(lán)再到純紅的色軸范圍，總共有360種色調(diào)；

2）飽和度

從這個色相的純黑到這個色相的純色，越接近黑色，飽和度越低；越接近純色，飽和度越高；

3）亮度

表示從“純黑”到“純白”的過程，越接近黑色，亮度越低，越接近白色，亮度越高。

4) 示例

HSL(76, 35%, 45%)：這是一種色相為76、飽和度為35%、亮度為45%、不透明的顏色。

HSLa(316, 75%, 56%, 0.9)：這是色調(diào)為 316、飽和度為 75%、亮度為 56%、不透明度為 0.9 的顏色

⑤透明（透明）

只要設(shè)置了這個值，文本內(nèi)容就會變得完全透明，也就是說，無論背景是什么顏色或者圖片，設(shè)置的文本元素都完全不可見。除非選擇文本，否則它僅用作占位符，如下例所示：

div { 顏色：透明；}

需要補(bǔ)充的是，“IE 8”及以下版本瀏覽器不支持“RGBa”、“HSLa”模式和“Transparent”值，即不支持透明度部分的值，而常規(guī)的“RGB”和“HSL”模式仍然可以正常支持。

2. 文本居中方法“text-align”

該屬性用于控制“行內(nèi)元素”（文本元素）在“行內(nèi)塊元素”或“塊元素”內(nèi)的居中方式，包含三個值：

左（默認(rèn)）

文本左對齊

中心

將文本居中對齊

正確的

文本右對齊

3. 使用“text-indent”縮進(jìn)段落的第一行

該屬性用于設(shè)置每段首行的縮進(jìn)量。

如果用于中文布局，一般會用“2em”的值和單位來縮進(jìn)每段首行“兩個字符”。

p {

文本縮進(jìn)：2em；

4. 文字裝飾行“text-decoration”

此屬性向文本添加裝飾線。具有“href”屬性的標(biāo)簽?zāi)J(rèn)會有下劃線，這是由該屬性的值“underline”設(shè)置的。

“text-decoration”屬性具有以下值：

無（默認(rèn)）

不顯露任何裝飾線

強(qiáng)調(diào)

在文本下方顯示裝飾線

上劃線

在文本上方顯示裝飾線

直通

在文本中間顯示裝飾線，相當(dāng)于刪除線

p {

文本裝飾：無；

5. 使用“text-transform”將英文字母從大寫轉(zhuǎn)換為小寫

該屬性可以將“行內(nèi)元素”中的英文文本轉(zhuǎn)換為大寫和小寫，以滿足網(wǎng)站的規(guī)范要求。

尤其是在一些對項(xiàng)目產(chǎn)品細(xì)節(jié)有嚴(yán)格要求的跨國企業(yè)或合資企業(yè)，

他們對網(wǎng)站或應(yīng)用程序中的文本格式也有非常高的要求。

當(dāng)網(wǎng)站上的大部分英文文本都是從其他地方編譯粘貼過來的時候，如果需要對這些文本進(jìn)行一一修改，不僅時間成本會大大增加，而且很容易出現(xiàn)一些很難發(fā)現(xiàn)的遺漏。 。這時候，“text-transform”屬性就有了它的“用處”。

該屬性具有以下屬性值：

無（默認(rèn)）

保持文本中英文單詞的默認(rèn)大小寫

大寫

將每個英文單詞的第一個字母改為大寫字母（不管原來是大寫還是小寫），不管其他字母，哪怕是小寫。

大寫

將所有英文單詞轉(zhuǎn)換為大寫字母

小寫

將所有英文單詞轉(zhuǎn)換為小寫字母

p {

文本轉(zhuǎn)換：大寫；

6. 文本陰影“text-shadow”

該屬性的目的是為文本添加陰影效果。

該屬性最初在CSS2.0中定義，但在CSS 2.1中被刪除。不知道什么原因，但在CSS3.0中被重新寫入規(guī)范。

目前，除IE9及之前版本不支持該屬性外，其他主流瀏覽器均支持該屬性。

p {

文本陰影：0px 0px 2px 黑色；

該屬性有4個值，如下：

水平陰影偏移（h-shadow）

“0”表示保持原來位置，正數(shù)表示向右移動，負(fù)數(shù)表示向左移動。單位是像素“px”。

垂直陰影偏移（v-shadow）

“0”表示保持原位置，正數(shù)表示向上移動，負(fù)數(shù)表示向下移動。單位是像素“px”。

陰影模糊距離（模糊）

使用正數(shù)來表示陰影模糊的單位距離。距離越大，模糊程度越高。單位是像素“px”。

陰影的顏色（顏色）

支持Web技術(shù)中常用的顏色模式：“Color English Word”、“HEX”、“RGBa”、“HSLa”。

與“內(nèi)聯(lián)塊元素”和“塊元素”中使用的“box-shadow”（后面會學(xué)習(xí)）不同，文本陰影的屬性值沒有“inset”（設(shè)置為內(nèi)陰影）和“傳播”（陰影）。擴(kuò)展名古典的英文，單位像素“px”），以后使用時需要區(qū)分。

7.段落文本行高“l(fā)ine-height”

該屬性用于設(shè)置一行內(nèi)“行內(nèi)元素”中文本元素的高度（可以達(dá)到單行文本垂直居中的效果）

使用場景如：表格、導(dǎo)航按鈕、自定義樣式按鈕、標(biāo)題欄等。

數(shù)值描述

正常默認(rèn)。它會自動設(shè)置合理的行間距。

number 設(shè)置表示字體大小倍數(shù)的數(shù)字。

length 設(shè)置固定的行距。

% 基于當(dāng)前字體大小的百分比行距。默認(rèn)為 100%

繼承指定line-height屬性的值應(yīng)該從父元素繼承。

8. 字間距

該屬性用于設(shè)置英文單詞之間的間距。

注意

他在區(qū)分單詞時，會判斷單詞兩邊是否有空格。所以如果你的內(nèi)容是中文的

1. 當(dāng)文本之間沒有空格時，整個文本將被視為一個單詞。

2. 當(dāng)每個漢字兩邊有空格時，每個漢字將被視為一個詞。

3.它的值可以為負(fù)數(shù)，距離會減小。

p {

字間距：1em；

9. 字符間距“l(fā)etter-spacing”

與“word-spacing”不同，該屬性用于控制字符之間的間距。

一個字母、一個漢字、甚至一個空格都是一個字符。

注意：

1、html中，多個空格最終會變成一個空格。

2.它的值可以為負(fù)數(shù)，距離會減小。

10.空間包裹處理“空白”

該屬性設(shè)置如何處理元素內(nèi)的空格和換行符。主要有以下幾個值：

正常（默認(rèn)）

空格和換行符由瀏覽器處理

前

段落中的所有空格和換行符都將被保留（類似于

標(biāo)簽）

nowrap

段落內(nèi)的文本不會換行（類似于沒有設(shè)置過換行的“notepad”）

pre-wrap

段落里所有的空格符序列和換行符序列都會被保留，這點(diǎn)類似于pre

但是他不會去更改瀏覽器的默認(rèn)行為（當(dāng)內(nèi)容的寬度小于了窗體的寬度時會出現(xiàn)滾動條的行為）

pre-line

保留換行符，但是多個空格還是會按照瀏覽器的默認(rèn)行為處理（多個合并為一個）

注意：

如果你當(dāng)前的內(nèi)容是一系列沒有空格分隔的英文單詞，那么它會被瀏覽器視為一個單詞，并且不允許換行，只會出現(xiàn)水平滾動條來適應(yīng)它。

11.設(shè)置文字方向“direction”

該屬性用于控制文本的顯示方向，即從左到右，或者從右到左。

在一些國家，如“阿拉伯”、“伊朗”、“以色列”，以及古典的“中日韓”文本等，其文本顯示方向是從右到左。為了適應(yīng)這些文本的方向，如果手動設(shè)置要求，會太費(fèi)時間，而且容易出錯。這時，“方向”屬性就會幫助你克服這個問題。該屬性有兩個值：

左轉(zhuǎn)

默認(rèn)值，文本方向從左到右

回程

文字方向從右到左