CSS屬性

一. 文本屬性

text-decoration: 設(shè)置文字的裝飾線

• none：無任何裝飾線
  • 可以去除a元素默 認(rèn)的下劃線
• underline：下劃線
  • u灿椅、ins元素默認(rèn)(user agent stylesheet)就是設(shè)置了text-decoration為underline
• overline：上劃線
• line-through：中劃線（刪除線）

letter-word-spacing: 設(shè)置字母、單詞之間的間距

• letter-spacing与境、word-spacing分別用于設(shè)置字母、單詞之間的間距
• 默認(rèn)是0猖吴，可以設(shè)置為負(fù)數(shù)

text-transform: 文字的大小寫轉(zhuǎn)換

• capitalize：將每個(gè)單詞的首字符變?yōu)榇髮?/p>

• uppercase：將每個(gè)單詞的所有字符變?yōu)榇髮?/p>

• lowercase：將每個(gè)單詞的所有字符變?yōu)樾?/p>

• none：沒有任何影響

• my name is coderwhy 方法大師傅打發(fā)到

  MY NAME IS CODERWHY

  My Name is Coderwhy

  my name is coderwhy

text-indent: 第一行內(nèi)容的縮進(jìn)

• text-indent: 2em;剛好是縮進(jìn)2個(gè)文字

• 注意：【em】
  • text-indent中的em是相對(duì)于自己本身元素的font-size

text-align: 元素內(nèi)容在元素中的水平對(duì)齊方式

• left：左對(duì)齊
• right：右對(duì)齊
• center：正中間顯示
• justify：兩端對(duì)齊
  • text-align: justify對(duì)最后一行沒有效果摔刁，如果要加上最后一行，用text-align-last: justify

• 注意：【div->div的情況】
  • 由于div是block的緣故海蔽，占一整行共屈，text-align對(duì)其無用
  • 如果強(qiáng)行要用text-align，可以display: inline-block党窜，設(shè)置為行內(nèi)元素即可居中

二. 字體屬性

font-size: 文字的大小

• 具體數(shù)值+單位
  • 比如：Chrome默認(rèn)font-size為16px拗引，最小font-size 為12px
  • 也可以使用em單位：1em代表100%，2em代表200%幌衣，0.5em代表50%
• 百分比
  • 基于父元素的font-size計(jì)算矾削，比如50%表示等于父元素font-size的一半

• 注意：【什么屬性會(huì)繼承】
  • 與文字相關(guān)的屬性會(huì)繼承下去，length豁护、width是不繼承的
• 注意：【em相對(duì)于自身還是父元素】
  • font-size中的em是相對(duì)于父元素的size
  • text-indent中的em是相對(duì)于自身的size
  • em的使用沒有rem廣泛

font-family: 文字的字體名稱

• 可以設(shè)置1個(gè)或者多個(gè)字體名稱（從左到右按順序選擇字體哼凯，直到找到可用的字體為止）

textarea {
    font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
}
/* 這里類似"\5B8B\4F53"都可以加上單雙引號(hào)，表示為一個(gè)字符串整體楚里，更正確穩(wěn)妥断部，但各大網(wǎng)站都沒加 */

• 一般情況下，英文字體只適用于英文班缎，中文字體同時(shí)適用于英文和中文
• 如果在開發(fā)中, 中英文使用不同的字體:
  • 建議: 將英文字體寫到前面, 中文字體寫到后面
  • 英文字體 中文字體
  • 中文字體 英文字體（已經(jīng)有字體了蝴光，就不會(huì)繼續(xù)往后找字體了）
• 網(wǎng)絡(luò)字體（待補(bǔ)充）

font-weight: 文字的粗細(xì)（重量）

• 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900：每一個(gè)數(shù)字表示一個(gè)重量
• normal：等于400
• bold：等于700
• strong她渴、b、h1~h6等標(biāo)簽的font-weight默認(rèn)就是bold

font-style: 文字的常規(guī)虱疏、斜體顯示

• normal：常規(guī)顯示
• italic：用字體的斜體顯示(前提, 是font-family這種字體本身是支持斜體)
  • em惹骂、i、cite做瞪、address对粪、var、dfn等元素的font-style默認(rèn)就是italic
  • i比較常用（用偽類i:: after做小圖標(biāo)装蓬，例如小箭頭）著拭，其他的標(biāo)簽用得少
• oblique：文本傾斜顯示(讓文字傾斜)

font-varient: 小寫字母的顯示形式（在中文里極少用到）

• normal：常規(guī)顯示
• small-caps：將小寫字母替換為縮小過的大寫字母

line-height: 文本的最小行高

• 行高可以先簡單理解為一行文字所占據(jù)的高度

• 行高的嚴(yán)格定義是：兩行文字基線（baseline）之間的間距

• 基線（baseline）：與小寫字母x最底部對(duì)齊的線

• line-height=文字高度font-size+行距（即上下兩個(gè)半行距）

行高 行距

• 注意區(qū)分height和line-height的區(qū)別：

  • height：元素的整體高度
  • line-height：元素中每一行文字所占據(jù)的高度

• 應(yīng)用實(shí)例：假設(shè)div中只有一行文字，如何讓這行文字在div內(nèi)部垂直居中

  • line-height=height

font: 一個(gè)縮寫屬性

• font-style font-variant font-weight font-size/line-height font-family

• font-style牍帚、font-variant儡遮、font-weight可以隨意調(diào)換順序，也可以省略

• /line-height可以省略暗赶，如果不省略鄙币，必須跟在font-size后面

• font-size、font-family不可以調(diào)換順序蹂随，不可以省略

  font: 12px/1.5 Microsoft YaHei,Heiti SC,arial,"\5B8B\4F53",sans-serif;
  

三. 更多選擇器

屬性選擇器（attribute selectors） - [att]

擁有title屬性的元素（每個(gè)元素都可以有title屬性十嘿，鼠標(biāo)懸停在上面會(huì)顯示）

• [attr]
  表示帶有以 attr 命名的屬性的元素。
• [attr=value]
  表示帶有以 attr 命名的屬性岳锁，且屬性值為 value 的元素绩衷。
• [attr*=value]
  表示帶有以 attr 命名的屬性，且屬性值包含有 value 的元素激率。
• [attr^=value]屬性值是以 value 開頭的元素
• [attr$=value]屬性值是以 value 結(jié)尾的元素
• [attr|=value]
  表示帶有以 attr 命名的屬性的元素咳燕，屬性值為“value”或是以“value-”為前綴（"-"為連字符，Unicode 編碼為 U+002D）開頭乒躺。
• 典型的應(yīng)用場景是用來匹配語言簡寫代碼（如 zh-CN招盲，zh-TW 可以用 zh 作為 value）。
• [attr~=value]
  表示帶有以 attr 命名的屬性的元素嘉冒，并且該屬性是一個(gè)以空格作為分隔的值列表宪肖，其中至少有一個(gè)值為 value。

  /* 存在title屬性的元素 */
  [title] {
    color: purple;
  }
  
  /* 存在href屬性并且屬性值匹配"https://example.org"的元素 */
  [] {
    color: green;
  }
  
  /* 存在href屬性并且屬性值包含"example"的元素 */
  [href*="example"] {
    font-size: 2em;
  }
  
  /* 存在href屬性并且屬性值結(jié)尾是".org"的<a> 元素 */
  a[href$=".org"] {
    font-style: italic;
  }
  
  /* <a> elements whose class attribute contains the word "logo" */
  /* 相當(dāng)于類選擇器.logo */
  a[class~="logo"] {
    padding: 2px;
  }

后代選擇器（包括直接健爬、間接子元素）（常用！）

• 使用 （空格） 選擇符

• 元素1 元素2 {樣式聲明 }

  div span { 
    background-color: DodgerBlue; 
  }
  .class1 span { 
    background-color: White; 
  }
  

注意<p>里不能嵌套<div>么介，結(jié)構(gòu)會(huì)亂掉

子代選擇器（不包括間接子元素）

• 使用 > 選擇符

• 元素1 > 元素2 {樣式聲明 }
  

  div > span {
    background-color: DodgerBlue;
  }
  

兄弟選擇器（較少使用）

• 相鄰兄弟選擇器

  • 使用 + 選擇符
  • 例：div元素后面緊挨著的p元素（且div娜遵、p元素必須是兄弟關(guān)系）

• 通用兄弟選擇器

  • 使用 ~ 選擇符
  • 位置無須緊鄰，只須同層級(jí)壤短，A~B 選擇A元素之后所有同層級(jí)B元素
  • 例：div元素后面的p元素（且div设拟、p元素必須是兄弟關(guān)系）

交集選擇器

• 連起來寫慨仿，沒有空格

并集選擇器（常用！）

• 使用 , 選擇符

• 之前的基礎(chǔ)選擇器
  • 類選擇器
  • id選擇器
  • 元素選擇器
  • 統(tǒng)配選擇器