假設修飾div的樣式表爲.short{}，
則修飾div其中的table 則 .short table{}
id選擇器>類選擇器>html選擇器>通配符選擇器
#>.>body>*
行內元素(inline element),又叫內聯元素:
內聯元素只能容納文本或者其他內聯元素,常見內聯元素<span> <a>
塊元素(block element):
塊元素一般都從新行開,可以容納文本,其它內聯元素和其它塊元素，
即使內容不能佔滿一行，塊元素也要把整行佔滿。常見塊元素<div></div>
<p></p>
塊元素和行內元素-區別
①行內元素只佔內容的寬度,塊元素內容不管內容多少要佔全行。
②行內元素只能容納文本和其它行內元素，塊元素可以容納文本，
行內元素和塊元素.(與瀏覽器類版本和類型有關)
③一些css屬性對行內元素不生效，比如margin,left,right,width,
height.建議儘可能使用塊元素定位。(與瀏覽器類版本和類型有關)
行內元素和塊元素可以相互轉換
display:inline -> 轉爲行內元素 (比如div)
display:block -> 轉爲塊元素 (比如a)
Padding:內邊距
Margin:邊框
內容(content)、填充(padding)、邊框
(border)、邊界(margin)
爲body 加上一個邊框，再爲div加上一個邊框，再設置div中的圖片大小內邊距等(margin),
img和table 一樣只要在原類選擇器下
.si img/.si table
.si a/.si li
常用超鏈接樣式：
a:link{ //設置對象在未被訪問前的樣式表屬性。
text-decoration: none;
}
a:hover{ //設置對象在其鼠標懸停時的樣式表屬性。
}
a:visted{
} //設置對象在其鏈接地址已被訪問過時的樣式表屬性。
浮動
可以這麼理解浮動:如果一個元素右/左浮動則:
①它本身會儘可能向右/左移動，直到碰到邊框或者
別的浮動元素,特別強調浮動對塊元素和行內元素都
生效!
②元素向右/左浮動，就相當於讓出自己的左/右邊,別
的元素就會在它的左/右邊排列。
如果不希望別的元素在某個元素的左邊或者右邊，可以使用清除浮動的方法 clear:right ; clear: left; clear:both
定位:relastive
<div class="s1">內容1</div>
<div id="special" class="s1">內容2</div>
<div class="s1">內容3</div>
<div class="s1">內容4</div>
#special{
/*position: relative;*//*這裏我們使用了相對定位*/
/*position:absolute;*//*絕對定位*/
left: 40px;/*原來的位置，向右移動大小(如果希望向左移動 則值就是負數)*/
top: 100px;/*在原來的位置，向下移動大小(如果希望向上移動,則值是負數)*/
}
相對定位，原來旁邊的元素位置不會改變
絕對定位，會補齊
序列：
<ul type=”circle”> // 無序 空心圓 、square方塊
<li></li>
</ul>
有序排列的類型有多種，例如：I 、A、a
Type=”a”
<ol start="10"> 從10開始
<li>ios</li>
<li>android</li>
<li>html5</li>
<li>swift</li>
</ol>
用css修飾字標籤：
<head>
<meta charset=”UTF-8”>
<link rel=”stylesheet” type=”text/css” href=”mycss.css”>
</head>
#divid p{ //中間空格 只對div內p有效，a標籤無效
Color:red;
}
<div id=”divid”>
<p>hellow</p>
<a>點擊我</a>
</div>
使某個div背景佔滿整個佈局：
Body{
Margin : 0px;
}
Div佈局實例：
<head>
<style type="text/css">
body{
margin:0px;
}
#container{
width:100%;
height:950px;
background-color:red;
}
#heading{
width:100%;
height:10%;
background-color:#FFB6FF;
}
#content_menu{
width:30%;
height:80%;
background-color:#F0F0F0;
float:left; /*左浮動，從左往右排序，讓出位置*/
}
#content_body{
width:70%;
height:80%;
background-color:#B1DBF4;
float:left; /*左浮動，從左往右排序，讓出位置*/
}
#footing{
width:100%;
height:10%;
background-color:#F4E37D;
clear:both; /*清除浮動*/
}
</style>
</head>
<body>
<div id="container">
<div id="heading">xx</div>
<div id="content_menu">xx</div>
<div id="content_body">xx</div>
<div id="footing">xxx</div>
</div>
</body>
table佈局實例：
<table width="100%" height="950px" style="background-color:darkgray">
<tr>
<td colspan="2" width="100%" height="10%" style="background-color:aqua">這是頭部</td>
</tr>
<tr>
<td width="30%" height="80%" style="background-color:blue">左菜單</td>
<td width="70%" height="80%" style="background-color:blueviolet">右菜單</td>
</tr>
<tr>
<td colspan="2" width="100%" height="10%" style="background-color:darkcyan">下部分</td>
</tr>
</table>
input type:
text / password / checkbox/
radio（單選，用name標誌爲一個組）
<select>
<option></option>
</select>
<textarea cols=”30” rows=”30”></textarea>
<input type=”button” value=””>
<inout type=”submit” value=””>
<!DOCTYPE html>
<html>
<frameset rows="20%,*">
<frame src="top.html"/>
<frameset cols="20%,*">
<frame src="left.php"/>
<frame name="myright" src="right3.php"/>
</frameset>
</frameset>
</html>
//內聯框架
<iframe sc=”” frameborde=””>
</iframe>
在頁面中顯示實體
html 關鍵字顯示不出來
html>
XHTML
用於規範語法
