在上一篇文章中我們介紹了一些常用標(biāo)簽黍衙，但是還有一個(gè)非常重要的標(biāo)簽沒(méi)有介紹蛤售，那就是與用瀏覽者交互的表單標(biāo)簽烘豹。
表單標(biāo)簽
用途：用于瀏覽者與瀏覽器交互誓焦。
語(yǔ)法：
//method:指?jìng)鬏敂?shù)據(jù)的方式,例如get,post
//action:被傳送到的地方胆敞。比如某個(gè)php頁(yè)面。
<form method="傳送方式" action="服務(wù)器文件">
//提交按鈕
//type：只有當(dāng)type值設(shè)置為submit時(shí)，按鈕才有提交作用
//value：按鈕上顯示的文字
<input type="submit" value="提交">
//重置按鈕
<input type="reset" value="重置">
//輸入框
<input type="text" name="username" />
//密碼框
<input type="password" name="pass" />
//單選框
//value:提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序PHP使用）
//name:為控件命名移层，以備后臺(tái)程序 ASP仍翰、PHP 使用
//checked:當(dāng)設(shè)置 checked="checked" 時(shí)，該選項(xiàng)被默認(rèn)選中
<input type="radio" value="值" name="名稱(chēng)" checked="checked"/>
//復(fù)選框
//參數(shù)同radio
<input type="checkbox" value="值" name="名稱(chēng)" checked="checked"/>
//文本域 cols:列書(shū) rows:行數(shù)
<textarea cols="50" rows="10" >在這里輸入內(nèi)容.
//下拉列表框
<select>
<option value="看書(shū)">看書(shū)</option>
<option value="旅游" selected="selected">旅游</option>
<option value="運(yùn)動(dòng)">運(yùn)動(dòng)</option>
<option value="購(gòu)物">購(gòu)物</option>
</select>
</textarea>
</form>
顯示效果：
Snip20161215_1.png
CSS:層疊樣式表 (Cascading Style Sheets)
作用:主要是用來(lái)定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式观话。比如字體顏色予借，大小，以及邊框線(xiàn)粗細(xì)等频蛔。
插入形式：
1.內(nèi)聯(lián)式
內(nèi)聯(lián)式是指直接將CSS代碼寫(xiě)在HTML標(biāo)簽中灵迫，如：
<p style="color:red">這里文字是紅色。</p>
2.嵌入式
嵌入式是將CSS代碼<style type="text/css"></style>標(biāo)簽之間的方式
<style type="text/css">
span{
color:red;
}
</style>
3.外部式
外部式是指將CSS寫(xiě)在HTML文件以外的地方文件中晦溪，并用<link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)瀑粥。
<link href="**base.css**" rel="stylesheet" type="text/css" />
CSS選擇器
介紹選擇器是為了更準(zhǔn)確的選擇指定的標(biāo)簽，從而對(duì)指定標(biāo)簽中的內(nèi)容做樣式的修改尼变。
1.標(biāo)簽選擇器
花括號(hào)外是標(biāo)簽名利凑，可修改HTML文件中所有p標(biāo)簽下的內(nèi)容樣式
p{font-size:12px;line-height:1.6em;}
2.類(lèi)選擇器
為每一個(gè)標(biāo)簽規(guī)定類(lèi)名，就可以根據(jù)類(lèi)名來(lái)選擇指定標(biāo)簽了嫌术。多個(gè)標(biāo)簽可以使用同一個(gè)類(lèi)名哀澈。
//以?xún)?nèi)聯(lián)式寫(xiě)法為例
<style type="text/css">
.stress{
color:red;
}
</style>
<p class="stress">類(lèi)選擇器內(nèi)容</p>
3.id選擇器
為每一個(gè)標(biāo)簽規(guī)定id，就可以根據(jù)id來(lái)選擇指定標(biāo)簽了度气。id名唯一割按。
//以?xún)?nèi)聯(lián)式為例
<style type="text/css">
#setGreen{
color:red;
}
</style>
<p id="setGreen">id選擇器</p>
4.子選擇器
子選擇器用于選擇指定標(biāo)簽元素的第一代子元素
<style type="text/css">
.food>li{
color:red;
}
</style>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋(píng)果</li>
<li>梨</li>
</ul>
</li>
</ul>
5.包含選擇器
選擇該標(biāo)簽下所有的后輩元素
<style type="text/css">
#setGreen p{color:red;}
</style>
<p id="setGreen">id選擇<span>器</span></p>
6.通用選擇器
選擇所有的html標(biāo)簽元素
<style type="text/css">
*{
color:red;
}
</style>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋(píng)果</li>
<li>梨</li>
</ul>
</li>
</ul>
CSS格式化排版
1.字體 字號(hào) 顏色
*{
font-family:"宋體";
font-size:12px;
color:#666
}
3.粗體 斜體
*{
//粗體
font-weight:bold;
//斜體
font-style:italic;
}
4.下劃線(xiàn) 刪除線(xiàn)
*{
//underline:下劃線(xiàn) 刪除線(xiàn):line-through
text-decoration:underline;
}
5.行間距 字間距
*{
//行間距
line-height:1.5em;】
//字間距
letter-spacing:50px;
}
6.對(duì)齊 縮進(jìn)
*{
//left:左對(duì)齊 right:右對(duì)齊 center:居中
text-align:center;
//縮進(jìn) 2em就是文字的兩倍大小
text-indent:2em;
}
