Div+Css視頻學習筆記

1.段落裡面(p標籤)不能嵌套div.
2.Css:層疊式樣式檔，同一個標籤可以用多個樣式修飾。
3.css種類：內聯式，嵌入式，外部，輸入。

內聯：
<p style="font-size:50px;color:red;background-color:green;text-decoration:underline">aaaaaaaaaaa</p>
缺點：複用性差。

嵌入：
 <style type="text/css">
  <!--
  p {
   font-size:50px;
   color:red;
   background-color:green;
   text-decoration:underline;
  }
  //-->
 </style>
好處：可以控制整個網頁的某些標籤。

外部：
<link rel="stylesheet" type="text/css" href="test.css">

輸入：
在css檔案中或者style標籤中使用@import url(demo.css)；

4.樣式規則選取器：
html選取器，類別選取器，id選取器，關聯選取器，組合選取器，虛擬元素選取器。

html選取器：
  p {
   font-size:50px;
   color:red;
   background-color:green;
   text-decoration:underline;
  }

類別選取器：
  //only use for p label
  p.one {
   color:red;
   font-size:2cm;
   background:green;
  }
  
  //use for any label 
  .two {
   color:red;
   font-size:2cm;
   background:green;  
  }

 <p class="one">adfsdf</p>

id選取器：
  #one {
   color:red;
   font-size:2cm;
   background:green;
  }
 <p id="one">adfsdf</p>

關聯選取器:
  p em {
   color:red;
   font-size:2cm;
   background:green;   
  }

  .one .two em {
   color:red;
   font-size:2cm;
   background:green;  
  }

 <p>
  <em>dfdf</em>
 </p>

組合選取器：
  p,div,a,h1,.one,#two {
   color:red;
   font-size:2cm;
   background:green;
  }

 有其中之一使用即可

虛擬元素選取器：
  a:link {font-size:1cm;color:red}
  a:hover {font-size:5cm;color:green}
  a:visited{font-size:2cm;color:yellow}
  a.one:link {font-size:8cm;color:blue}
  div a.one:link{font-size:12cm;color:black}

 <a href="dfdf">dfdfdfdf</a>
 <a href="dfdfdf" class="one">ffffff</a>
 <div>
  <a href="dfdfdf" class="one">ffffff</a>
 </div>

5.div+css好處：表現和內容分離，縮短改版時間，減少頻寬成本。
段落用p，標題用hx
表格只需要用於顯示資料，不用於布局。

margin:外邊距
兩種方式：
   .bianju{
    margin-left:10cm;
    margin-top:40cm;
    margin-bottom:4cm;
    margin-right:40cm;
   }
   
   .bianju {
    margin: 10px 20px 30px 40px;
   }

值為auto表示自動。

內邊距：
   td {
    padding-left:4cm;
    padding-right:4cm;
    padding-top:4cm;
    padding-bottom:4cm;
   }

   p {
    float:right;//靠哪邊對齊，三種right,left,none
   }

   .one {
    clear:none;
    clear:left;
    clear:right;
    clear:both;
   }

可下載附件：Demo