學習目標

• 應用
  • 使用 css 字體樣式完成對字體的設置
  • 使用 css 外觀屬性給頁面元素添加樣式
  • 使用常用的 emment 語法
  • 能夠使用開發(fā)人員工具代碼調(diào)試

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)默認字體，保證在任何用戶的瀏覽器中都能正確顯示。

CSS 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 外觀屬性總結

3. 開發(fā)者工具（chrome）

此工具是我們的必備工具，以后代碼出了問題

我們首先第一反應就是：

• 按F12 或者是 shift+ctrl+i 打開 開發(fā)者工具。
• 菜單：右擊網(wǎng)頁空白出 ---> 檢查

開發(fā)人員工具

• 通過開發(fā)人員工具小指針工具，查找頁面元素
• 左側(cè)是 html 頁面結構，右側(cè)是 css 樣式

小技巧：

1. ctrl+滾輪 可以 放大開發(fā)者工具代碼大小。
2. 左邊是 HTML 元素結構 右邊是 CSS 樣式。
3. 右邊 CSS 樣式可以改動數(shù)值和顏色查看更改后效果。
4. ctrl + 0 復原瀏覽器大小

4. sublime 快捷操作 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>
   

5. 拓展閱讀

[emment 語法]