1,css有幾種引入方式
-
使用HTML標簽的STYLE屬性
將STYLE屬性直接加在單個的HTML元素標簽上，控制HTML標簽的表現樣式。這種引入CSS的方式是分散靈活方便，但缺乏整體性和規划性，不利於后期的修改和維護，當需要修改網站的樣式時，一個相同的修改可能涉及多個地方，維護成本高。使用STYLE屬性的樣式效果最強，會覆蓋掉其它幾種引入方式的相同樣式效果。
1 <div style="color:red"></div>
-
將樣式代碼寫在頁面<STYLE>...</STYLE>標簽之中
<STYLE>...</STYLE>結構可以位於頁面<HTML>標簽中的任何位置，也可以多次出現。通常是將整個<STYLE>...</STYLE>結構寫在頁面的<HEAD>...</HEAD>部分中。這種引入CSS方式的特點是每個頁面的CSS代碼可能具有統一性和規划性，一個頁面內部便於復用和維護，但多個頁面之間的CSS代碼復用仍然不夠。
1 <style> 2 bdoy{font-size:14px;} 3 </style>
-
使用 LINK標簽，引入外部CSS文件
將css代碼寫在一個單獨的文件中，用link標簽直接引入該文件到頁面中。一個頁面可以多次使用LINK標簽引入多個外部css文件，注意這些CSS代碼的相互影響，通常是后引入的CSS文件會覆蓋前面引入的CSS文件的相同效果。這種引入CSS的方式是目前最為流行的，可以在站個網站范圍內進行CSS代碼的規划，方便復用和維護，但這樣將代碼高度集中，代碼量可能過大，維護不當的話又容易出現混亂。
1 <link rel="stylesheet" type="text/css" href="style.css">
-
使用@import引入CSS文件
使用@import引入CSS文件有兩種方式，一種可以放在頁面中的<STYLE>...</STYLE> 中,用法如下：
@import url(index2.css);
另外也可以放在CSS文件中使用，用法如下：
@import "sub.css";
使用用@import引入CSS可以很方便的引入外部文件的CSS代碼，方便維護和規划。但是每多引入一個CSS文件，就會對服務器增加一次連接請求，當訪問量較大時，需在維護性和性能上進行權衡。
2,div除了可以聲明id來控制，還可以聲明什么控制？
div除了用ID賦予它一個名稱外，
還可以用class來賦予它一個名稱。
還可以不用賦予它一個名字，直接用style來直接設定它的樣式。
唯一區別就是ID是唯一的，只能用一次。反而CLASS是可以反復使用的，可以多個div同時時候class來定義樣式。
一般JS中常用ID，因為JS是獲取div名字來進行判斷的，也是唯一判斷，如果用class會出錯，如果我們寫普通html，用class會好些。
3,如何讓2個div，並排顯示。1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 4 <head> 5 <title>div並排顯示</title> 6 </head> 7 <body> 8 <!--這是兩個div--> 9 <div style="width:300px;height:300px;background:blue;float:left">div1與div2並排 重點是float：left</div> 10 <div style="width:300px;height:300px;background:red;float:left">div2重點與div1並排 重點是float：left<div/> 11 </body> 12 </html>
效果圖是：
除了上面的 style="float:left"
還有 style="display:inline" 也是每個div中都要加
創建了浮動，阻斷與不阻斷的效果差別
不阻斷 無 clear：both 代碼中已經注銷
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>浮動布局</title> 6 7 <style> 8 #lside{ 9 width: 50px; 10 height:300px; 11 background: green; 12 float:left; 13 } 14 #rside{ 15 width: 50px; 16 height: 200px; 17 background: red; 18 float: right; 19 } 20 #comm{ 21 22 height:300px; 23 background: blue; 24 /*clear: both;*/ 25 26 } 27 28 </style> 29 </head> 30 <body> 31 <div> 32 <div id="lside">我是左</div> 33 <div id="rside">我是右</div> 34 <div id="comm">普通</div> 35 36 </div> 37 </body> 38 </html>
顯示效果：
如果把clear：both 解除注銷 顯示效果：
