標籤:dss red 標籤 utf-8 har name add round set
樣式表主要分為三類:內聯式、內嵌式和外部樣式表。
內聯式樣式表是跟html聯合顯示,寫在body標籤裡邊,屬於控制精確,但是可用性差。在三種樣式中會優先顯示作用。
內嵌式是作為獨立地區寫在head標籤裡邊。body標籤中有對應的標籤:<div id/name/class=" "></div>。
外部樣式表是建立一個css檔案,用來放樣式表,在html中用link連結。
<link type="text/css" rel="stylesheet" href="../../css/new_file.css"/>
<html> <head> <meta charset="UTF-8"> <title></title> <style> /*網頁內容邊距*/ *{ margin: 10px; padding:10px ; } /*id選取器*/ #div1{ width: 100px; height: 100px; background-color: red; } /*class選取器*/ .div-class{width: 200px; height: 200px; background-color: black; } /*標籤選取器*/ div{ border: 5px; solid salmon; } /*屬性選取器 名稱可以自訂*/ [name=n]{ width: 300px; height: 300px; background-color: blueviolet; } /*複合選取器*/ /*並欄選取器*/ .c,.c2{ width: 200px; height: 200px; background-color: brown; } /*子代選取器*/ .cc span{ color: red; } /*其他*/ .x1{ width: 500px; } .x2{height: 500px; background-color: cadetblue; } </style> <link type="text/css" rel="stylesheet" href="../../css/new_file.css"/> </head> <body> <!--第一種直接引用(優先)--> <div style="width: 100px; height: 100px; background-color: darkblue;">ssddd</div> <!--第二種--> <div id="div1"></div> <!--第三種--> <div id="div2"></div> <div class="div-class"></div> <!-- id 不可重複 class 可以重複 name 可以重複 --> <div sb=n></div> <div class="c"></div> <div class="c2"></div> <div class="cc"> <span>ffddsssssssd</span> </div> <span>ffddsssssssd</span> <div class="x1 x2"></div> </body></html>
在樣式表中表示大小要有px。網頁編輯過程中可將內嵌式樣式表與對應的標籤寫在一起,完成後統一排版寫在head裡,或者移到外部樣式表css檔案中。在css檔案中樣式表不帶style標籤。
css樣式表