CSS基礎三（css字型屬性，文本屬性，背景屬性，清單屬性）

目錄

1字型屬性

字型大小（em，rem，px差別）

字型加粗 font-weight

字型傾斜 font-style

字型類型 font-family

複合寫法 font

2文本屬性

顔色 color

文本水準對齊方式 text-align

行高 line-height

目錄

1字型屬性

字型大小（em，rem，px差別）

字型加粗 font-weight

字型傾斜 font-style

字型類型 font-family

複合寫法 font

2文本屬性

顔色 color

文本水準對齊方式 text-align

行高 line-height

文本修飾 text-decoration

文本縮進 text-indent

字元間距 letter-spacing

單詞之間的距離 word-spacing

大小寫轉換 text-transform

3背景屬性

背景顔色 background-color

背景圖 background-image:url()

背景圖是否重複 background-repeat

背景圖的位置 background-position: x軸 y軸;

背景附着background-attachment

背景透明(CSS3)background: rgba(0,0,0,0.3)

複合寫法 background: 背景顔色 背景圖 背景圖是否重複 背景圖的位置; 順序不固定

4清單屬性

文本修飾 text-decoration

文本縮進 text-indent

字元間距 letter-spacing

單詞之間的距離 word-spacing

大小寫轉換 text-transform

3背景屬性

背景顔色 background-color

背景圖 background-image:url()

背景圖是否重複 background-repeat

背景圖的位置 background-position: x軸 y軸;

背景附着background-attachment

背景透明(CSS3)background: rgba(0,0,0,0.3)

複合寫法 background: 背景顔色 背景圖 背景圖是否重複 背景圖的位置; 順序不固定

4清單屬性

1字型屬性

字型大小（em，rem，px差別）

• font-size 一般情況是偶數，并且一般不低于10px
• 數值+px
• 數值+em 預設值1em=16px 父元素有字型大小，參考的是父元素的字型大小
• 數值+rem 預設值 1rem=16px 根元素(html)有字型大小時，參考根元素的字型大小(移動端)

字型加粗 font-weight

• bold 加粗
• normal 去掉加粗樣式

字型傾斜 font-style

• italic 傾斜
• normal 去掉傾斜樣式

字型類型 font-family

• 中文，加引号
• 英文，一個單詞不用引号，多個單詞要加引号引起來
• 多個字型類型用逗号隔開，浏覽器會依次檢索，有該字型直接顯示，找到最後都沒有該字型時，顯示預設字型

複合寫法 font

• font: 字型加粗 字型傾斜 字型大小/行高 字型類型

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

• 字型加粗 字型傾斜為可選
• 字型大小/行高 字型類型 必選，并且必須是該格式

2文本屬性

顔色 color

• 顔色單詞
• 十六進制 #f1f1f1
• rgb(0-255,0-255,0-255) rgb(241, 241, 241);

文本水準對齊方式 text-align

• left 左對齊 預設值
• center 居中
• right 居右
• justify 兩端對齊 内容向兩邊，加大中間的間距

行高 line-height

• 數字：字型大小的倍數
• 數值+px
• 應用
  • 多行文本：加行高可以增大行和行之間的距離
  • 單行文本：将行高和元素的高度設定成一樣，實作垂直居中

文本修飾 text-decoration

• underline 下劃線
• overline 上劃線
• line-through 删除線
• none 去掉下劃線t:

文本縮進 text-indent

• 數值+px 隻對獨占一行的元素才生效
• 可以設定負數
• 縮進兩個詞：設定text-indent:2em; 參考目前元素的字型大小

字元間距 letter-spacing

• 數值+px
• 中文：加大字和字之間的距離 英文：加大字母之間的距離

單詞之間的距離 word-spacing

• 數值+px
• 隻對英文生效，加大單詞和單詞之間的距離

大小寫轉換 text-transform

• 首字母全部大寫 capitalize
• 全部小寫 lowercase
• 全部大寫 uppercase
• 預設值 none

3背景屬性

背景顔色 background-color

背景圖 background-image:url()

背景圖是否重複 background-repeat

• repeat 重複
• repeat-x 在x軸重複
• repeat-y 在y軸重複
• no-repeat 不重複

背景圖的位置 background-position: x軸 y軸;

• 數值+px 向右和向下為正數,反之,可以設定負數
• 關鍵字
  1. 水準方向:left/center/right
  2. 垂直方向:top/center/bottom
• 隻設定一個值的情況下,第二個值預設為居中

背景附着background-attachment

• 參數：
• scroll : 　背景圖像是随對象内容滾動
• fixed : 　背景圖像固定
• 說明：
• 設定或檢索背景圖像是随對象内容滾動還是固定的。

背景透明(CSS3)background: rgba(0,0,0,0.3)

• 最後一個參數是alpha 透明度 取值範圍 0~1之間
• 注意： 背景半透明是指盒子背景半透明， 盒子裡面的内容不收影響。

複合寫法 background: 背景顔色 背景圖 背景圖是否重複 背景圖的位置; 順序不固定

• 展開的寫法寫到複合寫法的後面,不然會被複合寫法覆寫掉

4清單屬性

• 清單符号 list-style-type
  • disc 實心圓
  • squre 方塊
  • circle 空心圓
  • none 去掉清單符号