1、區塊層級元素
<div> <h1> <hr /> <p> <pre> <ol> <ul> <li> <dl> <dt> <dd> <table> <tr> <td> <colgroup> <col> <form>等
會換行，想在同一行顯示需浮動或者display: inline
2、行內元素
<span> <var> <a> <em> <img> <b> <i> <sub> <textarea> <select> <strong> <br />等
多個可以並排顯示，預設設定寬度是不起作用的，需設定 display: inline-block或者block才行，或者加padding-left和padding-right。
3、常用符號
雙引號"(") &(&) >(>) <(<) 空格( ) 著作權 (©) 註冊商標 (®) 乘號 (×)除號 (÷)
4、選取器
類別選取器：<div class="a"></div> css中: .a{…;}
ID選取器：<div id="a"></div> css中: #a{…;}
後代選取器：<div class="a">
<div class="b"></div>
</div> css中： .a空格.b{…;}
群組選取器：<div class="a"></div>
<div class="b"></div> css中： .a,.b{…;}
標籤選取器：<a>sds</a> css中： a{…;}
5、css樣式寫法及優先順序
外部樣式表:
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
內部樣式表:
<head><style type="text/css"> hr {color: sienna;} </style></head>
內聯樣式:
<p style="color: sienna; margin-left: 20px"> This is a paragraph</p>
樣式的繼承:
子標記會繼承父標記的樣式
樣式的優先順序:
內聯樣式>內部樣式>外部樣式
瀏覽器內部也有一個預設的樣式
6、font字型
font-style:{normal|italic}預設值、斜體
font-variant{normal|small-caps}預設值、小型大寫字母
font-weight{normal|bold|bolder|lighter|100-900}預設值、粗體、更粗、更細、400等於normal
font-size/line-height{X%|Xpx}
font-family
縮寫格式：font:font-style font-variant font-weight font-size line-height font-family
程式碼範例：p {font:italic normal bold 12px/18px 宋體;}
注意，縮寫字型定義，至少要定義font-size和font-family兩個值。
7、文字屬性
text-align:{left (預設值)|right|center|justify(左右對齊)}
text-decoration:{none (無，預設值)underline (底線) overline (上劃線)
line-through (當中劃線)}
text-indent:{文本縮排屬性}
line-height:{行高屬性 normal (預設值)}
letter-spacing:{字間距屬性 normal (預設值)}
color 前景顏色，一般用子文本
8、背景
背景：格式: background: {屬性值}
background-color：{顏色值|transparent(預設值）} 屬性設定元素的背景顏色。
background-image：{URL（url）} 把映像設定為背景。
background-repeat:{repeat|no-repeat|repeat-X|repeat-Y}
background-attachment:{fixed|scroll} 背景映像是否固定或者隨著頁面的其餘部分滾動
background-position:{top left|top center|top right…} 屬性設定背景映像的起始位置。
程式碼範例：body{background: #ff0000 url('i/eg_bg_03.gif') no-repeat fixed center; }
9、margin與padding邊距
margin:margin-top margin-right margin-bottom margin-left
padding:padding-top padding-right padding-bottom padding-left
padding:10px 20px 30px 40px;
上 右 下 左
p {margin:20px 10px;}
上下 左右
p {margin:20px 10px 100px;}
上20px 左右10px 下100px
10、border邊框
border-width
border-style:{none|dotted|dashed|solid}無邊框、點狀邊框、虛線、實線
border-color
文法格式：
border:border-width border-style border-color
程式碼範例：
p {border:1px solid blue;}
border-width:1px 2px 3px 4px;
上 右 下 左
11、list列表
list-style-type:{none|disc|circle|square|…}無標記、預設實心圓、空心圓、實心方塊
list-style-position:{inside|outside}清單項目標記放置在文本以內、預設值保持標記位於文本的左側
list-style-image:{URL|none}
文法格式：
list-style:list-style-type list-style-position list-style-image
程式碼範例：
ul {list-style:none outside url("/i/arrow.gif");}
12、a標籤
使用文本作為連結：
<a href="www.baidu.com" target="_blank">baidu</a>
target:連結中的內容在哪兒開啟
_blank:在新的視窗中開啟
_self:在當前視窗開啟（預設）
a:link { color: red} 沒有訪問時
a:visited { color: blue} 訪問後
a:active { color: lime} 滑鼠點擊但還沒有放開時
a:hover { color: aqua} 滑鼠指向時
使用映像作為連結：
<a href="www.baidu.com"><img src="images/baidu.gif" border="0" /></a>
郵件連結:
<a href="mailto:chengzh@tarena.com.cn">mail to me</a>
錨點:
(一個頁面內容的跳轉)
命名一個錨點
<a name="top">top</a>
跳轉到錨點
<a href="#top">to top</a>
(跳轉到其它"www.sine.com.cn"頁面內容)
跳轉目標頁面命名一個錨點
<a name="top">top</a>
起始版面設定跳轉到錨點
<a href="http://www.sina.com.cn/#top">to top</a>
13.使用熱點
將一個圖片劃分成多個地區，每一個地區表示一個
連結。
<img src="index04.jpg" width="500" height="500" border="0" usemap="#m1" />
<map name="m1" id="m1">
<area shape="rect" coords="…" href="#" />
<area shape="circle" coords="…" href="#" />
<area shape="poly" coords="…" href="#" />
</map>
當shape="rect"（矩形）時，coords的值為左上方和右下角的座標值; 當shape="poly"（多邊形）時，
為各頂點值; 當shape="circle"（圓形）時，為圓心坐 標值和半徑值。 coords值依照圖片大小的不同
和所希望連結地區的不同而有所不同
14、display屬性
none:不顯示
block:以塊元素的方式來顯示
inline:以行內元素的方式來顯示
15、position屬性
static://預設擺放,從左至右，從上到下。
absolute://產生絕對位置的元素，相對於 static 定位以外的第一個父元素進行定位。
relative://產生相對定位的元素，相對於其正常位置進行定位。
16、<input/>：type屬性
text文本
Email: <input type="text" name="email" />
button按鈕
<input type="button" value="Click me" onclick="msg()" />
checkbox複選框
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike
<input type="checkbox" name="vehicle" value="Car" /> I have a car
hidden隱藏
<input type="hidden" name="country" value="Norway" />
image映像按鈕
<form method="post" action="index.html">
<input name="submit" type="image" value=" " src="12.jpg" />
</form>
這樣子直接寫在html頁面上就能直接看到按鈕是圖片的！
password密碼欄位
<input type="password" name="pwd" />
radio選項按鈕
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female
reset重設按鈕
<input type="reset" />
submit提交按鈕
<form method="post" action="index.html">
<input type="submit" name="button" id="button" value="提交" />
</form>
這樣提交按鈕是標籤 <input type="submit">，如果想換成圖片加上樣式，把value="提交" 改成value=" "（這樣“提交”兩個字就不會顯示在這張背景圖片的上面）：
css代碼：
#button{
background:url(12.jpg) no-repeat;
width:100px;
height:50px;
border:0px;
cursor:pointer;
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
