CSS選擇器、字體/文本、背景

CSS的基本使用

• 直接寫在標簽內

<p style="color: red; font-size: 40px;">段落</p>

• 寫在 style 標簽內

<style>
    span{
        color: aquamarine;
    }
</style>

• 使用外部 .css 文件
  • @import （不建議使用此方式）

  <style>
    @import "font_css.css";
  </style>

  • link

  <link rel="stylesheet" href="font_css.css">

  
  

CSS選擇器

• 優先順序：id選擇器 > class 選擇器 > 標簽選擇器
• 標簽選擇器：標簽名{}
• class選擇器（“.”符號）：.class名{}
• id選擇器（“#”符號，id 選擇器唯一）：#id名{}
• 群組 選擇器（“，”逗號分開）：
  • 群組選擇器可以同時選擇多個標簽
  • p,div{...}
• 層次選擇器
  • 子代 （符號“>”）：div>p{...}
  • 後代 (空格)：div p {...}
  • 相鄰 （符號“+”）：#p_id~span {...}
  • 兄弟 （符號“~”）：#p_id~p {...}
• 偽類選擇器（符號“:”）
  • link：未訪問過的樣式
    • a:link {...}
  • visited：訪問過後的樣式
    • a:visited {...}
  • hover：划過的樣式
    • a:hover {...}
  • active：激活的樣式
    • a:active {...}

字體

• 字體：font-family
• 字體大小：font-size
• 字體樣式：font-style
• 字體粗細：font-weight
• 字體小大寫：font-variant (將小寫字母改為小型字體的大寫字母)
• 複合樣式：font (預設順序：style variant weight size/height family)
  
  

文本

• 對齊方式：text-align
• 首行縮進：text-indent
• 文本線：text-decoration
• 字距：letter-spacing
• 詞距：word-spacing
• 行高：line-height
  
  

背景

• 背景顏色：background-color
• 背景圖片：background-image
• 背景鋪蓋：background-repeat
• 背景大小：background-size
• 背景定位：background-position
• 複合樣式：background
  • backgroud：red url(" ") no-repeat center;
    
    

常用樣式

1. font-family:字體，eg: Microsoft-Yahei
2. font-size/color:字型大小/顏色
3. font-weight:bold 粗體
4. font-style:italic 斜體
5. text-decoration:underline 下劃線
6. text-decoration:line-through 刪除線
7. text-indent:2em 縮進文字的2倍大小
8. line-height:1.5em 行間距: 1.5倍文字大小
9. letter-spacing:50px 字間距，字母間距
10.word-spacing:50px 單詞與單詞間距
11.text-align:center/left/right 居中/居左/居右
12.color：rgb(255,255,255); 參數是0-255的數，可自調顏色
13.backgroud-image:url("1.png"); 背景圖
14.backgroud-repeat:repeat-y/repeat-x/no-repeat; 圖片按列/行/角排
15.backgroud-position:right center/center center; 圖片位置靠右居中
16.以上可縮寫為: backgroud: red url("1.png") no-repeat center;
17.border:solid 1px red;邊框屬性
18.ul, ol{list-style: 。。。。}列表屬性
19.display:block/inline/none; 內聯和塊級切換/隱藏