10分鐘梳理css知識點

css 選擇器

• h1 {color:red; font-size:14px;} 元素選擇器
• h1,h2,h3,h4,h5,h6 {color: green;} 選擇器分組
• li strong {font-style: italic;font-weight: normal;} //派生選擇器
• #idStr {color:red;} //id選擇器
• .className {text-align: center} //類選擇器
• [title=W3School] { border:5px solid blue; }// 屬性選擇器

css 樣式建立

• <link rel="stylesheet" type="text/css" href="mystyle.css" /> //外部樣式

• 內部樣式

  <style type="text/css">
      hr {color: sienna;}
      p {margin-left: 20px;}
      body {background-image: url("images/back40.gif");}
    </style>

• 內聯樣式

  <p style="color: sienna; margin-left: 20px">
    	This is a paragraph
    </p>

• 結合使用時，就近原則！！

css 樣式

• background-color 背景色
• background-image 背景圖片
• text-indent 首行縮進
• word-spacing
• ... 太多了平時積累吧

盒模型

• 懶的說，理解了就OK
• border-style 頗有趣

css 定位

• Positioning

  • static
  • relative 相對定位
  • absolute 相對於包含元素絕對定位（父級元素）
  • fixed 相對於window絕對定位
  • float 浮動
    • left 元素向左浮動。
    • right 元素向右浮動。
    • none 默認值。元素不浮動，並會顯示在其在文本中出現的位置。
    • inherit 規定應該從父元素繼承 float 屬性的值。

• display

  • none 邊框無
  • block 塊框
  • inline 行內框
  • ...