HTML-CSS

1.CSS格式:
  1）行內式：直接在標籤中寫屬性(最經常使用)
  <hl style="color:red"></hl>
  2）內嵌式：
  <style type="text/css">
    hl{
       color:blue;
    }
  <style>
  3）導入式：導入外部的css文件
  <style type="text/css">
    @import"css文件的存放路徑（xxx.css）";
  <style>
  4）連接式：引入外部(最經常使用) ，最多引用31個css
  <link herf="mystyle.css" rel="stylesheet" type="text/css" />
2.CSS選擇器：
  1）標記選擇器
  css:
  h1{color:blue;}
  h1表示選擇器，color是屬性,blue是值.表示頁面全部hl都應用這個樣式
  2）類別選擇器：
  <h1 class="a"></h1>
  css:  
  .a{color:red;}
  表示全部class等於a的標籤都應用這個樣式
  3）ID選擇器：id在頁面中惟一，優先級高於類別選擇器
  <h1 id="abc" class="a"></h1>
  css:
  #abc{color：yellow} 
  4）交集選擇器
  div.special{.....}
  div#special{.....}
  css:
  p.a{color:red}    同時爲p標籤和class="a"的標籤爲red  
  p#abc{color:red}  同時爲p標籤和id="abc"的標籤爲red
  5）並集選擇器
  div h1.first,p.special{....}
  css:
  p,h1{color:red}  爲p標籤和h1標籤爲都red
  6）後代選擇器
  div h1.first空格span.firstLetter{....}
  <p class="a">今天<font>天氣</font>真好。</p>
  <font>今天真很差</font>
  css:
  p空格font{color:red}  表示p標籤裏面的標籤變紅
  7）*選擇器：表明頁面全部標籤都變化，至關於body,傳說中的通配符
3.css優先級：
  行內>ID樣式>類別樣式>標記樣式
4.css文字樣式：
  文本縮進：text-indent:px %cm
  文本對齊：text-align:center/left/right
  色彩：clor:#FFFFFF,grb(255,255,255)
  字體：font-familly：arial,黑體，宋體
  字體大小：font-size
  字體粗細：font-weight:normal bold light
  字體修飾：text-decoration:underline line-through overline none
  大小寫：text-transform
  行高：line-height
5.css背景處理：
  背景固定：background-attachment:scroll/fixed
  背景顏色：background-color:red/....
  背景定位：background-position:top/center/bottom/left/right
  背景圖像：background-image:url
  背景重複：background-repeat:no-repeat/repeat-x/repeat-y

6.盒子模型
  <div></div>
 1)content:內容
   width:50px
   heiht:50px
  2)padding:邊框與內容間距
   border-top/left/right/bottom:或
   padding:10px;                4個距離都爲10px
   padding:10px,20px;           上下距離都爲10px，左右距離都爲20px
   padding:10px,20px,30px;      上距離都爲10px，下距離都爲20px，左右距離都爲30px
   padding:10px,20px,30px,40px;  上距離都爲10px，下距離都爲20px，左距離都爲30px，右距離都爲40px
  3）margin:外邊距，與padding相似
  4）border：邊框

  border-top/left/right/bottom:
  border-color:red
  border-width:1px
  border-style:dotted/dashed/solid/double
  簡寫：
  border:1px red dotted
  5）塊級元素：佔100%的空間
  <div></div>
  6）內聯元素：不佔100%的空間,寬度與長度由內容長度決定
  <span></span>
  7）浮動屬性：
  float:right/left
  8）清除浮動屬性：
  clear：left/right/both
  9）css僞類：（連接顏色變化）
   a:link     連接顏色
   a:visited  訪問事後的顏色
   a:hover    滑過期的顏色
   a:active   點擊時的顏色

7.列表樣式：
  1）list-style-type：
  無序：
  disc:
  circle:
  square:
  none:
  有序：
  decimal:
  lower-roman:
  upper-roman:
  lower-alpha:
  upper-alpha:
  2）list-style-image:url
  3）list-style-position:outside/inside
8.css溢出：
  overflow:
  hidden:
  scroll:
  auto:
  visible:
  overflow-x:
  overflow-y:
9.css兼容：
  <!--|if!IE|><!-->除IE外均可識別<!--<!|endif|-->
  <!--|if IE|>全部的IE均可識別<!|endif|-->
  <!--|if IE 6|>僅IE6可識別<!|endif|-->
  <!--|if gte IE 6|>IE6及IE6以上均可識別<!|endif|-->
  <!--|if it IE6|>IE6及IE6如下的均可識別<!|endif|-->