學(xué)習(xí)目標(biāo)

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

1. font 字體

1.1 font-size 大小

• 作用：

  font-size 屬性用于設(shè)置字號

p {  
    font-size: 20px; 
}

• 單位：

  • 可以使用相對長度單位睬隶，也可以使用絕對長度單位。
  • 相對長度單位比較常用页徐，推薦使用像素單位 px苏潜，絕對長度單位使用較少。

注意：

• 我們文字大小以后变勇，基本就用 px 了恤左，其他單位很少使用
• 谷歌瀏覽器默認(rèn)的文字大小為 16px
• 但是不同瀏覽器可能默認(rèn)顯示的字號大小不一致，我們盡量給一個明確值大小搀绣，不要默認(rèn)大小飞袋。一般給 body 指定整個頁面文字的大小

1.2 font-family 字體

• 作用：

  font-family 屬性用于設(shè)置哪一種字體。

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

• 網(wǎng)頁中常用的字體有宋體链患、微軟雅黑巧鸭、黑體等，例如將網(wǎng)頁中所有段落文本的字體設(shè)置為微軟雅黑
• 可以同時指定多個字體锣险，中間以逗號隔開蹄皱，表示如果瀏覽器不支持第一個字體，則會嘗試下一個芯肤，直到找到合適的字體巷折， 如果都沒有，則以我們電腦默認(rèn)的字體為準(zhǔn)崖咨。

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

常用技巧：

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

CSS Unicode 字體

• 為什么使用 Unicode 字體

  • 在 CSS 中設(shè)置字體名稱区宇，直接寫中文是可以的娃殖。但是在文件編碼（GB2312、UTF-8 等）不匹配時會產(chǎn)生亂碼的錯誤议谷。
  • xp 系統(tǒng)不支持 類似微軟雅黑的中文炉爆。

• 解決：

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

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

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

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

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

• 在 html 中如何將字體加粗我們可以用標(biāo)簽來實(shí)現(xiàn)
  • 使用 b 和 strong 標(biāo)簽是文本加粗波附。
• 可以使用 CSS 來實(shí)現(xiàn)艺晴，但是 CSS 是沒有語義的。

提倡：

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

1.4 font-style 字體風(fēng)格

• 在 html 中如何將字體傾斜我們可以用標(biāo)簽來實(shí)現(xiàn)
  • 字體傾斜除了用 i 和 em 標(biāo)簽，
• 可以使用 CSS 來實(shí)現(xiàn)仅财，但是 CSS 是沒有語義的

font-style 屬性用于定義字體風(fēng)格狈究，如設(shè)置斜體、傾斜或正常字體盏求，其可用屬性值如下：

小技巧：

平時我們很少給文字加斜體碎罚，反而喜歡給斜體標(biāo)簽em磅废、i 改為普通模式。

1.5 font 綜合設(shè)置字體樣式 (重點(diǎn))

font 屬性用于對字體樣式進(jìn)行綜合設(shè)置

• 基本語法格式如下：

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

• 注意：
  • 使用 font 屬性時荆烈，必須按上面語法格式中的順序書寫拯勉，不能更換順序竟趾，各個屬性以 空格 隔開。
  • 其中不需要設(shè)置的屬性可以省略（取默認(rèn)值）宫峦，但必須保留 font-size 和 font-family 屬性岔帽，否則 font 屬性將不起作用。

1.6 font總結(jié)

2. CSS 外觀屬性

2.1 color 文本顏色

• 作用：

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

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

• 注意

  我們實(shí)際工作中， 用 16 進(jìn)制的寫法是最多的枕赵，而且我們更喜歡簡寫方式比如 #f00 代表紅色

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

• 作用：

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

• 其可用屬性值如下：

• 注意：

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

2.3 line-height 行間距

• 作用：

  line-height 屬性用于設(shè)置行間距怨规，就是行與行之間的距離陌宿，即字符的垂直間距，一般稱為行高波丰。

• 單位：

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

• 技巧：

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

2.4 text-indent 首行縮進(jìn)

• 作用：

  text-indent 屬性用于設(shè)置首行文本的縮進(jìn)

• 屬性值

  • 其屬性值可為不同單位的數(shù)值纫骑、em 字符寬度的倍數(shù)蝎亚、或相對于瀏覽器窗口寬度的百分比%，允許使用負(fù)值,
  • 建議使用 em 作為設(shè)置單位先馆。

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

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

2.5 text-decoration 文本的裝飾

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

2.6 CSS 外觀屬性總結(jié)

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

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

我們首先第一反應(yīng)就是：

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

開發(fā)人員工具

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

小技巧：

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

4. sublime 快捷操作 emmet 語法

Emmet 的前身是 Zen coding，它使用縮寫酿秸，來提高 html/css 的編寫速度灭翔。

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

2. 如果想要生成多個相同標(biāo)簽 辣苏，加上 * 就可以了肝箱，比如 div*3 就可以快速生成 3 個 div

3. 如果有父子級關(guān)系的標(biāo)簽，可以用 >稀蟋，比如 ul > li 就可以了

4. 如果有兄弟關(guān)系的標(biāo)簽煌张，用 + 就可以了，比如 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 語法]