1.font字體

1.1 font-size:大小

• 作用：

  font-size屬性用于設置字號

p {  
    font-size:20px; 
}

• 單位：

  • 可以使用相對長度單位，也可以使用絕對長度單位。

  • 相對長度單位比較常用，推薦使用像素單位px，絕對長度單位使用較少。

單位

注意：

• 我們文字大小以后，基本就用px了，其他單位很少使用

• 谷歌瀏覽器默認的文字大小為16px

• 但是不同瀏覽器可能默認顯示的字號大小不一致，我們盡量給一個明確值大小，不要默認大小。一般給body指定整個頁面文字的大小。

1.2 font-family:字體

• 作用：

  font-family屬性用于設置哪一種字體。

p { 
    font-family:"微軟雅黑";
}

• 網(wǎng)頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網(wǎng)頁中所有段落文本的字體設置為微軟雅黑

• 可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體， 如果都沒有，則以我們電腦默認的字體為準。

p {
    font-family: Arial,"Microsoft Yahei", "微軟雅黑";
}

常用技巧：

1. 各種字體之間必須使用英文狀態(tài)下的逗號隔開。
2. 中文字體需要加英文狀態(tài)下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位于中文字體名之前。
3. 如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態(tài)下的單引號或雙引號，例如font-family: "Times New Roman";。
4. 盡量使用系統(tǒng)默認字體，保證在任何用戶的瀏覽器中都能正確顯示。</pre>

CSS Unicode字體

Unicode字體

• 為什么使用 Unicode字體

  • 在 CSS 中設置字體名稱，直接寫中文是可以的。但是在文件編碼（GB2312、UTF-8 等）不匹配時會產(chǎn)生亂碼的錯誤。

  • xp 系統(tǒng)不支持 類似微軟雅黑的中文。

• 解決：

  • 方案一： 你可以使用英文來替代。 比如font-family:"Microsoft Yahei"。

  • 方案二： 在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤。使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的解析的。

font-family: "\5FAE\8F6F\96C5\9ED1";   //表示設置字體為“微軟雅黑”。

為了照顧不同電腦的字體安裝問題，我們盡量只使用宋體和微軟雅黑中文字體

1.3 font-weight:字體粗細

• 在html中如何將字體加粗我們可以用標簽來實現(xiàn)

  • 使用 b 和 strong 標簽是文本加粗。

• 可以使用CSS 來實現(xiàn)，但是CSS 是沒有語義的。

提倡：

我們平時更喜歡用數(shù)字來表示加粗和不加粗。

1.4 font-style:字體風格

• 在html中如何將字體傾斜我們可以用標簽來實現(xiàn)

  • 字體傾斜除了用 i 和 em 標簽，

• 可以使用CSS 來實現(xiàn)，但是CSS 是沒有語義的

font-style屬性用于定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值如下：

小技巧：

平時我們很少給文字加斜體，反而喜歡給斜體標簽（em，i）改為普通模式。

1.5 font:綜合設置字體樣式

font屬性用于對字體樣式進行綜合設置

• 基本語法格式如下：

選擇器 { 
    font: font-style  font-weight  font-size/line-height  font-family;
}

• 注意：

  • 使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。

  • 其中不需要設置的屬性可以省略（取默認值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。

1.6 font總結

2. CSS外觀屬性

2.1 color:文本顏色

• 作用：

  color屬性用于定義文本的顏色，

• 其取值方式有如下3種：

• 注意

  我們實際工作中， 用 16進制的寫法是最多的，而且我們更喜歡簡寫方式比如 #f00 代表紅色

2.2 text-align:文本水平對齊方式

• 作用：

  text-align屬性用于設置文本內(nèi)容的水平對齊，相當于html中的align對齊屬性

• 其可用屬性值如下：

• 注意：

  是讓盒子里面的內(nèi)容水平居中， 而不是讓盒子居中對齊

2.3 line-height:行間距

• 作用：

  line-height屬性用于設置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高。

• 單位：

  • line-height常用的屬性值單位有三種，分別為像素px，相對值em和百分比%，實際工作中使用最多的是像素px

• 技巧：

一般情況下，行距比字號大7.8像素左右就可以了。
line-height: 24px;

2.4 text-indent:首行縮進

• 作用：

  text-indent屬性用于設置首行文本的縮進，

• 屬性值

  • 其屬性值可為不同單位的數(shù)值、em字符寬度的倍數(shù)、或相對于瀏覽器窗口寬度的百分比%，允許使用負值,

  • 建議使用em作為設置單位。

1em 就是一個字的寬度 如果是漢字的段落， 1em 就是一個漢字的寬度

p {
     /*行間距*/
     line-height: 25px;
     /*首行縮進2個字  em  1個em 就是1個字的大小*/
     text-indent: 2em;
 }

2.5 text-decoration 文本的裝飾

text-decoration 通常我們用于給鏈接修改裝飾效果

2.6 CSS外觀屬性總結

@emmet語法

Emmet的前身是Zen coding,它使用縮寫,來提高html/css的編寫速度。

1. 生成標簽 直接輸入標簽名 按tab鍵即可 比如 div 然后tab 鍵， 就可以生成 <div></div>

2. 如果想要生成多個相同標簽 加上 * 就可以了 比如 div*3 就可以快速生成3個div

3. 如果有父子級關系的標簽，可以用 > 比如 ul > li就可以了

4. 如果有兄弟關系的標簽，用 + 就可以了 比如 div+p

5. 如果生成帶有類名或者id名字的， 直接寫 .demo 或者 #two tab 鍵就可以了

6. 如果生成的div 類名是有順序的， 可以用 自增符號 $

.demo$*3        
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div></pre>

@ 拓展閱讀

emment語法