一. 文本屬性

1.1 text-decoration

text-decoration 用于給文本添加裝飾線,主要取值有:

• none:無(wú)裝飾線,主要清除a元素自帶的下劃線
• underline: 下劃線
• overline:上劃線
• line-through 中劃線,刪除線

注意: u,ins這類的標(biāo)簽就是瀏覽器默認(rèn)加了text-decoration: underline

1.2 letter-spacing和word-spacing

• letter-spacing,word-spacing分別設(shè)置字母,單詞之間的間距
• 默認(rèn)為0,也可以設(shè)置負(fù)數(shù)

1.3 text-transform

• text-transform用于文字的大小寫轉(zhuǎn)化
• 可以設(shè)置以下值:
  • none: 默認(rèn)值,沒(méi)有任何影響
  • capitalize: 將每個(gè)單詞的首字母大寫
  • uppercase:將每個(gè)單詞都轉(zhuǎn)化為大寫
  • lowercase: 將每個(gè)單詞都轉(zhuǎn)化為小寫

1.4 text-indent

• text-indent:用于設(shè)置文本首行縮進(jìn)
• text-indent:2em; 正好是首行縮進(jìn)2個(gè)文字

1.5text-align

• text-align用于設(shè)置 元素內(nèi)容 在元素中的水平對(duì)齊方式
• 可以設(shè)置以下的值:
  • left:文本居左對(duì)齊
  • right: 文本居右對(duì)齊
  • center: 文本居中對(duì)齊
  • justify: 兩端對(duì)齊(但是對(duì)最后一行文本無(wú)效,若想最后一行文本也生效,需要設(shè)置 text-align-last:justify才能生效)

二.字體屬性

2.1 font-size

• font-size用于設(shè)置文字的字體大小
• 常用的設(shè)置:
  • 具體的數(shù)值+單位
    • 比如100px:像素,絕對(duì)單位
    • 比如2em, 1em相當(dāng)于父元素的字體大小
    • 比如2rem 1rem相當(dāng)于html元素的字體大小
  • 百分比
    • 比如 100%,基于父元素的font-size計(jì)算

2.2 font-family

• 用于設(shè)置字體的字體名稱
• 可以設(shè)置一個(gè)或多個(gè)字體,中間由逗號(hào)隔開,瀏覽器會(huì)從左到右依次加載字體,直到找到可用的字體為止
• 一般來(lái)說(shuō),英文字體只適用于英文,中文字體通常適用于中文和英文'
  • 所以,如果希望中英文使用不同字體,建議英文字體寫在前面,中文字體寫在后面

2.3 font-weight

• 用于設(shè)置文字的粗細(xì)
• 可設(shè)置如下值:
  • 100|200|300|400|500|600|700|800|900 每個(gè)數(shù)字代表一個(gè)重量
  • normal 正常 ,默認(rèn) 400
  • bold 700
  • bolder
  • 常用的就是normal(400),bold(700)和bolder
• strong,h1-h6,b等標(biāo)簽font-weight值默認(rèn)就是bold

2.4 font-style

• 用于設(shè)置文本的常規(guī),斜體顯示
• 可以設(shè)置的值:
  • normal: 常規(guī)顯示,這是默認(rèn)值
  • italic：用字體的斜體顯示(前提, 是font-family這種字體本身是支持斜體)
  • oblique：文本傾斜顯示(讓文字傾斜,不管這種字體支不支持斜體)
• em,i,address,cite標(biāo)簽font-style默認(rèn)值就是itatic
• 設(shè)置font-style的值是italic的span元素等同于em元素

2.5 font-variant

• 可以影響小寫字母的顯示形式
• 可以設(shè)置的值有:
  • normal: 常規(guī)顯示,這是默認(rèn)值
  • small-caps: 將小寫字母轉(zhuǎn)化為大寫,但是以小寫的大小顯示

2.6 line-height

• 用于設(shè)置文本的最小高度
• 行高可以簡(jiǎn)單的理解為一行文本所占的高度
• 行高的嚴(yán)格定義是:兩行文本的基線之間的距離
• image.png

• 注意區(qū)分高度和行高的區(qū)別

  • 高度: 元素的整體高度

  • 行高: 元素的每一行文本所占據(jù)的高度

  • 總結(jié): 行高 = 文字高度 + 2*上下的行距

  • 應(yīng)用實(shí)例: 假設(shè)一個(gè)有具體高度的div里只有一行文本,如何讓文本垂直居中?

    • 讓行高等于div盒子的高度即可

  • 應(yīng)用實(shí)例: 假設(shè)一個(gè)有具體高度的div里有多行文本,如何讓文本垂直居中?

    • 添加以下代碼

    • div {
          display:table-cell;
          vertical-align:middle;
          overflow:hidden;
      }
      

2.7 font的縮寫屬性

• font是一個(gè)縮寫屬性: font-style font-variant fong-weight font-size/line-height font-family

• div {
      font:italic small-caps 700 20px/1.5 '微軟雅黑';
  }
  

• font縮寫時(shí)需要注意的點(diǎn):

  • font-style font variant fong-weight,這三個(gè)書寫順序可以任意,也可以省略
  • /line-height可以省略,但是如果不省略,就一定要放在font-size后面
  • font-size font-family 不可省略,而且順序必須是這樣

三. 更多CSS選擇器

3.1 屬性選擇器

• [attr]: 匹配擁有attr屬性的元素
• [attr=val]: 匹配擁有attr,且attr的值等于val的元素
• [attr*=val]: 匹配擁有attr屬性,且值包含val的元素
• [attr^=val]: 匹配擁有attr屬性且值以val開頭的元素
• [attr$=val]: 匹配擁有attr屬性且值以val結(jié)尾的元素
• [attr|=val]: 匹配擁有attr屬性并且屬性值恰好等于val 或者 以單詞val開頭且后面緊跟著連字符-的元素
• [attr~=val]: 匹配擁有attr屬性并且屬性值包含單詞one的元素（單詞val與其他單詞之間必須用空格隔開）

3.2 后代選擇器

• 形式是: div p : 匹配div后代所有的p元素(直接子元素和間后代元素)

3.3 子代選擇器

• 形式是: div > p : 匹配div的直接子元素的p元素(p元素必須是div的直接子元素才可以)

3.4 兄弟選擇器

• 相鄰兄弟選擇器: div+p : 匹配 div元素后面緊挨著的p元素（且div、p元素必須是兄弟關(guān)系）
• 全體兄弟選擇器 : div~p: 匹配 div元素后面的p元素（且div、p元素必須是兄弟關(guān)系）

3.5 選擇器組

• 交集選擇器: 匹配滿足所有規(guī)則的元素
• 并集選擇器: 匹配滿足任一規(guī)則的元素