theme: channing-cyan

CSS基礎

CSS簡介

CSS全稱：Cascading Style Sheets。主要用於用來定義頁面元素的樣式、設定字型和顏色、設定位置和大小、新增動畫效果。

在頁面使用CSS方法

• 外鏈（推薦採用，使得前後端功能分離、便於模組化）
• 嵌入（通過<style>嵌入）
• 內聯（應用於特殊場景，UI元件庫中額外新增樣式，一遍不推薦使用）

CSS工作原理

選擇器Selector

選擇器用於找出頁面中的元素，以便給他們設定樣式

使用多種方式選擇元素

• 按照標籤名、類名或id
• 按照屬性
• 按照DOM樹中的位置

e.g.萬用字元選擇器、標籤選擇器 、id選擇器、類選擇器、屬性選擇器、偽類選擇器

屬性選擇器

屬性選擇器常見格式: [^=]以開頭 [$=]以結尾 [=]滿足條件 []是否有該屬性

<label>名稱：</label>
<input value="jack" disabled>
<style>
  [disabled]{
  background:grey; 
  color:red;
  }
</style>

disabled="disabled"或者直接使用disabled會使標籤失效，被禁用的input元素既不可用，也不可點選。可以設定disabled

偽類選擇器

偽類選擇器不基於標籤和屬性定位元素，主要有狀態偽類與結構性偽類

狀態偽類，常見的如下：

• :link{}
• :visited{}
• :hover{}
• :active{}
• 對input，有:focus{}

結構性偽類：
根據DOM節點在DOM樹中的位置，例如：
:firstchild{}

組合

後代組合範圍大於親子組合，兄弟選擇器範圍大於相鄰選擇器

選擇器組：將選擇器之間用，分開

顏色

RGB模式

十六進位制標識：#ffffff 等價於
rgb(255,255,255)

HSL模式：

使用場景：例如，可以設定button點選前後的不同狀態

alpha:透明度:三種表示方法：#ff0000ff、rgba(255, 0, 0, 1) 、hsla(0, 100%, 50%, 1)

關鍵字模式

字型

為什麼設定預設字型？防止不同裝置渲染效果等原因導致顯示結果與期望值不同，設定多個字型，中間以逗號分隔。設定兜底的通用字型簇。

使用建議：

• 字型列表最後寫上通用字型族
• 英文字型放在中文字型前面

也可以通過Web Fonts來引用外部的字型庫，英文只有26個字母，包相對較小。中文字元較多，因此包相對較大，可能大小達到幾M，可能導致載入較慢

//Web Fonts引用外部字型
<style>
@font-face
{
font-family: ;//必需的。定義字型的名稱。
src: url()//必需的。定義該字型下載的網址。可以設定多個地址，中間以逗號分隔
}
</style>

font-size設定

• 關鍵字：small、medium、large
• 長度：px、em(em相對父元素font-size的大小，rem相對root元素的大小、常用於移動端）（em彈性佈局採用，px固定佈局採用）
• 百分數：相對於父元素字型大小

font-size：設定字型樣式

font-weight：設定字型粗細

line-height：設定行高。如果是小數，標識相對font-size的大小

font:style weight size/height family對應
/斜體 粗細 大小/行高 字型族/

text-align
文字對齊：left、center、right、justify（justify使得文字兩端對齊，不包括最後一行）

spacing
1etter-spacing:字母間距
word-spacing:單詞間距

text-indent:設定縮排

text-decoration
文字修飾：none、underline、line-through、overline

white-space空白格設定：
normal、nowrap（合併空格，不換行，自動設定水平滾動條）、pre（保留空白與換行）、pre-wrap（不合並空格，自動換行）、pre-line（合併空格，並且自動換行）

除錯CSS

·右鍵點選頁面，選擇[檢查]

使用快捷鍵
Ctr1+Shift+I（Windows）
cmd+opt+I（Mac）