CSS基础教程（下）
??????
一．?????????????文本
1.???????基本字體屬性
下面看看字體的幾個(gè)屬性：
1）font-family
該屬性是針對(duì)某個(gè)元素的字體名稱和字體系列名稱的一個(gè)列表，該列表按有限順序排列。Eg：
Body {
Font-family: “Lucida Grande”, Arial, Sans-serif;
}
2）font-size
用于定義字體的大小，eg：
body {
?????? font-size: 12px;
}
???????可以對(duì)字體聲明進(jìn)行如下縮寫，如：
?????? body {
font: 12px “Lucida Grande”, Arial, Sans-serif;
}
2.???????可用字體
1）web安全字體
當(dāng)選定某種自體時(shí)，必須保證選定的字體不但要在所選定的平臺(tái)上看起來(lái)不錯(cuò)，而且還要保證在其他的平臺(tái)上也能顯示。
已有如下的web安全字體：Verdana、Georgia、Times New Roman、Times、Arial、Helvetica、Tahoma、Comic Sans MS、Trebuchet和Courier。
2）有趣的替代字體
現(xiàn)在又出現(xiàn)了一些新的有趣的字體。如下所示：Lucida Grande、Lucida SansUnicode、Futura、Helvetica Neue、Gill Sans和Palatino。
3.???????應(yīng)用樣式
對(duì)于一個(gè)全新的網(wǎng)站，首先要考慮的是在body選擇器中聲明一般的規(guī)則。除非特別說(shuō)明，則body中的所有元素都將繼承這些值。Eg：
body {
margin: 10px;
border: 1px solid #000;
padding: 10px;
font: 12px Verdana, Arial, Sans-serif;
}
4.???????請(qǐng)務(wù)必使用line-height屬性
調(diào)整文本行與行之間的間距將使文本看起來(lái)大不一樣，可以增強(qiáng)文本的可讀性。因此，務(wù)必使用這一屬性。
1）用百分比設(shè)置line-height
如果line-height設(shè)置為100%，則間距沒(méi)有變化；如果為150%，則間距為字號(hào)的一半；如果為200%，則間距等于字號(hào)。Eg：
body {
margin: 10px;
border: 1px solid #000;
padding: 10px;
font: 12px Verdana, Arial, Sans-serif;
line-heightL 200%
}
2）其他line-height值
normal：用于設(shè)定專家稱為的“行之間合理的間距”；
數(shù)字：用數(shù)字設(shè)定間距時(shí)，行距將等于數(shù)字乘以當(dāng)前的font-size值。Eg. line-height: 2;
長(zhǎng)度：將行距設(shè)定為固定值。這種方法精度很高。注意：在這種情況下，如果重新設(shè)置文本的大小，行距不會(huì)以文本中相同的比率增加或減小。Eg. line-height: 8px;為保證重新設(shè)置文本大小時(shí)，行距仍能正常調(diào)整，建議采用em和百分比。
5.???????letter-spacing屬性
使用該屬性使得設(shè)計(jì)者能夠依此實(shí)現(xiàn)對(duì)文本的緊性控制，eg：
h1, h2 {
letter-spacing: 3px;
}
6.???????其他的關(guān)鍵字體屬性
1）font-weight
設(shè)置文本中字符顯示的粗細(xì)程度。通常聲明為正常或粗體。
2）font-style
字體的樣式，normal（默認(rèn)）、Italic（斜體）、oblique。
3）font-variant
用于將文本顯示為小型大寫字母字體，也就是所有的小寫字母都將轉(zhuǎn)換為大寫字母。
4）text-transform
它是font-variant的補(bǔ)充。它可以將所有的字符顯示為大寫字母但是不縮寫字號(hào)。text-transform: uppercase聲明非常適用于標(biāo)題。
5）段落縮進(jìn)
Eg:
p {
text-indent: 15px;
}
二．?????????????顏色、背景與圖像
1．顏色簡(jiǎn)史
設(shè)定顏色的方法有很多種，以下的幾種方法都是正確的：
#f00 /* #rgb*/
#ff0000 /* #rrggbb*/
red /*?常用英文名*/
rgb(255, 0, 0) /*?顏色范圍：0-255*/
rgb(100%, 0%, 0%) /*?浮點(diǎn)范圍：0.0%-100.0%*/
十六進(jìn)制三元組是在(X)HTML和CSS中用來(lái)表示顏色的十六進(jìn)制數(shù)，由3個(gè)字節(jié)6個(gè)數(shù)字組成，這3個(gè)字節(jié)分別表示：紅色、綠色和藍(lán)色的值。
CSS語(yǔ)言和HTML4規(guī)范一樣都定義了16種具名顏色，如下表所示：
| 顏色 | 十六進(jìn)制參考值 |
| 黑色（black） | #000000 |
| 藏藍(lán)色（navy） | #000080 |
| 綠色（green） | #008000 |
| 海藍(lán)色（teal） | #008080 |
| 銀色（silver） | #c0c0c0 |
| 藍(lán)色（blue） | #0000ff |
| 酸橙色（lime） | #00ff00 |
| 淺綠色（aqua） | #00fffff |
| 絳紫色（maroon） | #800000 |
| 紫色（purple） | #800080 |
| 橄欖色（olive） | #808000 |
| 灰色（gray） | #808080 |
| 紅色（red） | #ff0000 |
| 紫紅色（fuchsia） | #ff00ff |
| 黃色（yellow） | #ffff00 |
| 橙色（orange） | #ffa500 |
| 白色（white） | #ffffff |
2．文本顏色
例如要將某段落的文本變成紅色，代碼如下：
p {
??????? color: #F00;
}
或者寫成如下所示：
p {
color: red;
}
???????針對(duì)文本，需要使用Web安全顏色。這樣顏色將可以正確的映射到不同平臺(tái)上，從而即使在顏色有限的顯示器上也不會(huì)被打亂，依然便于閱讀。
3．背景色
我們用background-color屬性來(lái)設(shè)定(X)HTML元素的背景色。如果你希望網(wǎng)站具有單色背景，那么請(qǐng)選擇一種Web安全顏色。這將保證即使網(wǎng)頁(yè)在其它平臺(tái)上顯示，顏色也不會(huì)給你帶來(lái)麻煩。
下面來(lái)看一個(gè)為文本添加背景色的例子：
p {
color: #000;
background-color: #FF0;
line-height:150%;
}
???????接著來(lái)看一個(gè)為標(biāo)題添加背景色的例子：
?????? h2 {
????????????? color: #000;
????????????? background-color: #808080;
????????????? padding: 0.3em;
}
???????我們還可以為body元素添加背景色，代碼如下：
?????? body {
margin: 10px;
padding: 10px;
background-color: #CCC;
font: normal 12px Verdana, Arial, Sans-serif;
}
???????我們還可以為指定id的元素設(shè)定背景色，例如給id為container的div元素設(shè)定背景色。代碼如下：
?????? #container {
padding: 10px;
border: 1px solid #000;
background-color: #FFF;
}
4．背景的圖像格式
在Web設(shè)計(jì)中，三種主要圖像格式廣為接受，即GIF、JPEG和PNG。最后一種與前兩種相比，使用相對(duì)較少。
GIF(大多數(shù)人念為“whiff”，也有人念為“jif”)格式無(wú)疑是北京圖像最理想的圖像格式。它通過(guò)使用特定的壓縮模式使得文件大小達(dá)到最小。
GIF的最大優(yōu)點(diǎn)就是它擁有一定的透明度。
JPEG(發(fā)音為“jay-peg”)圖像非常靈活，但是JPEG圖像分析顏色的方法與GIF不同，它一般采用照片的有損壓縮的標(biāo)準(zhǔn)方法。在反復(fù)地編輯和保存過(guò)程中。JPEG文件將逐漸退化。這一點(diǎn)和對(duì)照片副本進(jìn)行再?gòu)?fù)制有點(diǎn)像。照片圖像最好是以無(wú)損失的非JPEG格式保存，如TIFF。這樣在將來(lái)需要重新編輯時(shí)可以避免圖像不清晰。
JPEG不適用于素描，也不適用于包括文本的圖像（GIF非常適合這種情況）。但是如果需要為網(wǎng)頁(yè)保存照片的話，這種格式就非常合適了。
PNG格式（讀為“ping”）的開(kāi)發(fā)主要是為了改善GIF格式中的一些不足，利用它，能夠顯示百萬(wàn)顏色的機(jī)器就不會(huì)再局限于256色了。大部分人都會(huì)選擇PNG來(lái)提供一些更復(fù)雜的透明圖像。但有個(gè)問(wèn)題：IE不支持透明的PNG。
5．背景圖像
對(duì)于采用大圖片作為背景圖像的網(wǎng)頁(yè)，用戶瀏覽網(wǎng)頁(yè)時(shí)的速度會(huì)大大降低。在任何情況下，在背景圖像無(wú)法顯示或者用戶手動(dòng)關(guān)閉背景時(shí)，如果沒(méi)有可替換的手段來(lái)表示背景圖像所表達(dá)的信息的話，就不要用背景來(lái)表達(dá)一些重要信息。
下面讓我們來(lái)看一個(gè)為id為container的div元素來(lái)設(shè)置背景圖像的例子，如下：
#container {
????????????? height: 200px;
????????????? border: 1px solid #000;
????????????? background-color: #FFF;
????????????? background-image: url(tile.gif);
}
???????如果需要關(guān)閉背景圖像的平鋪，需要使用no-repeat值。如下：
?????? #container {
height: 200px;
border: 1px solid #000;
background-color: #FFF;
background-image: url(tile.gif);
background-repeat: no-repeat;
}
???????如果想要圖片在水平或垂直方向平鋪，可使用background-repeat: repeat-x和background-repeat: repeat-y;
???????默認(rèn)情況下，background-image屬性將圖像放置（或者開(kāi)始平鋪過(guò)程）在容器的左上角。幸運(yùn)的是，background-position屬性為此提供了更多的靈活性。該屬性允許你根據(jù)背景和容器的關(guān)系，精確地設(shè)定圖像放置的位置。例如：
?????? background-position: 50px left;
?????? background-position: 10% 50%;
?????? background-attachment屬性使用相對(duì)較少，但非常有用，它用來(lái)實(shí)現(xiàn)粘連的效果，該屬性有兩個(gè)值：scroll（默認(rèn)）和fixed。
???????有很多和北京相關(guān)的屬性，可以使用一些縮寫來(lái)將其合成一行CSS，例如，將圖像和顏色組合的縮寫：
?????? background: #FFF url(tile.gif);
???????顏色、圖像以及位置的縮寫：
?????? background: #FFF url(tile.gif) right top;
???????顏色、圖像、位置和重復(fù)的縮寫：
?????? background: #FFF url(tile.gif) right no-repeat;
三．?????????????列表
1.???????無(wú)序列表
下面來(lái)看一個(gè)無(wú)序列表的例子，代碼如下：
<div id=”container”>
<ul>
??????? <li>Drinks Menu</li>
??????? <li>Beer</li>
??????? <li>Cola</li>
??????? <li>Tea</li>
??????? <li>Coffee</li>
?????? </ul>
?????? </div>
???????默認(rèn)情況下，列表以小實(shí)心圓作為列表項(xiàng)目符，以仿效Word中所用到的典型列表。
1）list-style-type
該屬性可以從多個(gè)可能的列表項(xiàng)目符中為列表設(shè)定一個(gè)特定列表項(xiàng)目符，使得列表不采用默認(rèn)的disc。下面5中項(xiàng)目符用得最多：
none、disc、circle、square、latin。
其它還有upper-alpha、lower-alpha、upper-roman。
使用舉例為：
ul {
list-style-type: circle;
}
2）外邊距和內(nèi)邊距
舉例如下：
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
3）list-style-position
如果需要項(xiàng)目符號(hào)內(nèi)聯(lián)在文本中時(shí)，使用該屬性。Eg.
ul {
list-style-position: inside;
}
4）list-style-image
該屬性用來(lái)自定義圖片來(lái)代替實(shí)心圓、空心圓等。使用舉例如下：
ul {
list-style-image: url(images/list.gif);
}
5）list-style縮寫
列表屬性可以縮寫為一個(gè)聲明語(yǔ)句，即用list-style屬性。List-style-type、list-style-position和list-style-image可以任意排列，例如：
list-style: none inside url(images/list.gif);
下面讓我們來(lái)看一個(gè)以背景圖像作為列表項(xiàng)目符的例子：
ul {
list-style: none;
}
?????? li {
background: transparent url(images/list.gif) no-repeat left center;
padding: 0 0 0 25px;
}
???????有時(shí)我們還需要建立內(nèi)聯(lián)列表，如下例：
ul {
list-style: disc;
}
?????? li {
display: inline;
}
2．有序列表
???????有序列表是一種用來(lái)按順序標(biāo)記列表項(xiàng)的方便方法。見(jiàn)下例：
?????? <ol>
????????????? <li>Beer</li>
????????????? <li>Tea</li>
????????????? <li>Coffee</li>
?????? </ol>
四．?????????????鏈接
1．鏈接標(biāo)記
不管你是用文本還是圖像來(lái)作為鏈接，鏈接都是代碼中我們必須對(duì)其進(jìn)行認(rèn)真處理的元素之一。下面看一個(gè)鏈接的例子：
<a href=”http://www.google.com” title=”訪問(wèn)Google” alt=”Visit Google”>Google</a>
2．默認(rèn)鏈接樣式
默認(rèn)的瀏覽器樣式表是沒(méi)訪問(wèn)過(guò)的鏈接呈現(xiàn)為深藍(lán)色，訪問(wèn)過(guò)的鏈接呈現(xiàn)為紫色等等。
3．簡(jiǎn)單CSS規(guī)則
下面來(lái)看一個(gè)改變鏈接顏色的例子：
a:link {
color: #F00;
}
???????接著來(lái)看一個(gè)改變?cè)L問(wèn)過(guò)的鏈接的顏色的例子：
?????? a:visited {
color: #999;
}
???????還可以通過(guò)修改樣式來(lái)改變鼠標(biāo)放到鏈接上時(shí)將所有的鏈接文本設(shè)置成某顏色，如下：
?????? a:active {
color: #000;
}
???????而:active偽類主要關(guān)注鼠標(biāo)真正點(diǎn)擊時(shí)鏈接樣式，該偽類可以提高網(wǎng)頁(yè)的可用性，如下：
?????? a:active {
color: #000;
}
4．其他有用的鏈接屬性
使用text-decoration可以很容易的去除鏈接下劃線，該屬性的可能值有：none、underline（默認(rèn)值）、overline、line-through和blink。該屬性可以用到4種鏈接狀態(tài)中的任何一種，eg：
a:hover {
color: #333;
text-decoration: none;
}
???????下面再來(lái)看一個(gè)為鏈接加上邊框的例子：
?????? a:link {
color: #F00;
text-decoration: none;
border-bottom: 1px dashed #333;
line-height: 150%;
}
???????為鏈接的背景圖像加上記號(hào)的例子如下：
?????? a:link {
color: #F00;
padding: 0 15px 0 0;
background: url(images/arrow.gif) no-repeat right center;
}
?????? a:visited {
color: #999;
padding: 0 15px 0 0;
background: url(images/checkmark.gif) no-repeat right center;
}
5．利用派生選擇器來(lái)影響鏈接
讓我們來(lái)看一個(gè)利用派生選擇器來(lái)影響鏈接的例子：
p a:link, p a:visited, p a:hover, p a:active {
color: #F00;
padding: 2px;
border: 1px dashed #999;
text-decoration: none;
}
6．利用鏈接來(lái)轉(zhuǎn)換導(dǎo)航欄
通過(guò)使用簡(jiǎn)單的CSS規(guī)則將一個(gè)簡(jiǎn)單的無(wú)序列表變成一個(gè)垂直的導(dǎo)航欄。下面來(lái)看一個(gè)對(duì)應(yīng)的例子。(X)HTML中相應(yīng)代碼如下：
<ul>
??????? <li><a href=”#”>Beer</a></li>
??????? <li><a href=”#”>Tea</a></li>
??????? <li><a href=”#”>Coffee</a></li>
?????? </ul>
???????接著我們可以開(kāi)始創(chuàng)建linkslist.css文件，其內(nèi)容如下：
?????? ul {
list-style-type: none;
margin: 5px;
padding: 2px;
border: 1px solid #333;
width: 160px;
font: bold 12px ‘Lucida Grande’, Verdana, sans-serif;
}
?????? li {
background: #DDDDDD;
margin: 0;
padding: 2px 10px;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #aaa;
border-bottom: 1px solid #666;
}
?????? ul a:link, ul a:visited, ul a:hover, ul a:active {
display: block;
padding: 2px 10px;
text-decoration: none;
}
?????? ul a:link {
color: #000;
}
?????? ul a:visited {
color: #666;
}
?????? ul a:hover {
color: #F00;
background: #FFF;
}
?????? ul a:active {
color: #333;
}
???????最后一個(gè)訣竅是，當(dāng)你真正瀏覽某個(gè)頁(yè)面時(shí)，突出相應(yīng)鏈接，修改如下：
<ul>
?????? <li><a href=”#”>Beer</a></li>
??????? <li id=”current”><a href=”#”>Tea</a></li>
??????? <li><a href=”#”>Coffee</a></li>
?????? </ul>
???????在CSS文件中增加如下內(nèi)容：
?????? #current a:link {
color: #FFF;
background: #333;
}
五．?????????????表格和定義列表
1．表格
表格生來(lái)就很復(fù)雜。數(shù)據(jù)按規(guī)則放置在行和列中，它們之間的特定的關(guān)系已直接地表示出來(lái)。本質(zhì)上，表格適用于列表數(shù)據(jù)并且只適用于列表數(shù)據(jù)。
1）基本表格
在(X)HTML中，<table>用來(lái)定義父元素，<tr>元素則用來(lái)定義表格中新的行，而大量的<td>元素則用來(lái)創(chuàng)建單元格。<th>元素表示行或列的標(biāo)題，默認(rèn)用粗體。下面來(lái)看一個(gè)基本表格的例子：
<table>
?????? <tr>
????????????? <th>Name</th>
????????????? <th>Age</th>
?????? </tr>
?????? <tr>
????????????? <td>阿蜜果</td>
?????? ?????? <td>24</td>
?????? </tr>
</table>
2）過(guò)去如何使用樣式
使用celpadding和cellspacing這兩個(gè)我們熟知的屬性是件很有誘惑的事。將它們添加到表示起始標(biāo)簽中，從而得到<table cellpadding=”5” cellspacing=”5” border=”1”>。
然而，這些屬性是純表現(xiàn)性的，因此完全沒(méi)有使用的必要。理論上說(shuō)，不要在表格元素中添加表現(xiàn)標(biāo)記，僅僅使用一些簡(jiǎn)單的CSS選擇器就可以輕松但更有效的控制表格的樣式。
3）用CSS來(lái)挽救
下面用CSS來(lái)為上面的簡(jiǎn)單表格加上樣式，CSS代碼如下所示：
table {
?????? border: 1px solid #333;
font: normal 12px ‘Lucida Grande’, Verdana, sans-serif;
}
?????? th, td {
border: 1px solid #333;
padding: 3px;
}
?????? th {
text-align: left;
color: #FFF;
background-color: #333;
boder-style: solid;
border-width: 1px;
border-color: #CCC #666 #000 #CCC;
}
?????? td {
background-color: #DDDDDD;
border-style: solid;
border-width: 1px;
border-color: #FFF #AAA #666 #FFF;
}
4）border-collapse
?????? border-collapse屬性是一個(gè)功能強(qiáng)大的工具，可替代HTML中過(guò)時(shí)的cellspacing屬性。這種屬性可以用于減少單元格之間的默認(rèn)間隔。
???????可在上面CSS代碼中的table中添加如下內(nèi)容：
?????? border-collapse: collapse;
5）自定義元素
可以為th元素設(shè)定北京圖像，修改后的th的CSS定義如下：
th {
text-align: left;
background: #FFF url(images/tablefade.gif) repeat-x;
border-bottom: 1px solid #000;
}
2．定義列表
在某種意義上，列表主要是為了彌補(bǔ)基本列表和表格之間的鴻溝，以提供另外一種方法來(lái)展示一些簡(jiǎn)單的數(shù)據(jù)對(duì)。但是，它既沒(méi)有無(wú)需列表的限制也不像表格那樣復(fù)雜。
所有的定義列表都包括兩個(gè)組成部分：項(xiàng)和描述。由三個(gè)基本元素組成，容器（<dl>）、定義項(xiàng)（<dt>）和定義描述（<dd>）。見(jiàn)下例：
<dl>
??????? <dt>China</dt>
?????????????? <dd>Guangzhou</dd>
??????? <dt>England</dt>
?????????????? <dd>Terrible soccer team</dd>
?????? </dl>
???????定義列表具有靈活的繼承性，因此，在一個(gè)定義列表中可以使用多個(gè)<dt>和<dd>。
???????在列表的定義描述中還可以結(jié)合塊級(jí)元素使用，例如<p>和<ul>元素等，見(jiàn)例：
?????? <dl>
????????????? <dt>England Soccer Team</dt>
????????????? <dd><p>Terrible soccer team…</p></dd>
?????? </dl>
???????下面再來(lái)看一個(gè)定義列表中的列表的例子：
?????? <dl>
????????????? <dt>England Soccer Team</dt>
????????????? <dd>
???????????????????? <ul>
??????????????????????????? <li>David Becknam</li>
??????????????????????????? <li>Wayne Rooney</li>
??????????????????????????? <li>Steven Gerrard</li>
???????????????????? </ul>
????????????? </dd>
?????? </dl>
???????下面我們使用一些CSS樣式來(lái)修飾這個(gè)列表，CSS代碼如下：
?????? ul {
list-style-type: none;
margin: 5px;
padding: 0;
}
?????? li {
background-color: #DDDDDD;
margin: 0;
padding: 0;
border-style: solid;
border-width: 1px;
border-color: #FFF #AAA #666 #FFF;
}
?????? dd {
margin: 0;
}
?????? dl {
width: 160px;
margin: 0;
padding: 2px;
border: 1px solid #333;
font: bold 12px ‘Lucida Grande’, Verdana, sans-serif;
}
?????? dt {
color: #FFF;
background-color: #333;
padding: 2px;
border-style: solid;
border-
}
???????需要注意的是定義列表非常靈活。雖然它不是很常用，但這種方式對(duì)于將數(shù)據(jù)分解若干小塊而言，非常有用。
六．?????????????表單
1．標(biāo)記回顧
表單的偉大之處在于，一個(gè)正確標(biāo)記的表單能夠提供大量元素來(lái)使用CSS。
1）表單元素
l?????????text
eg. <input type=”text” name=”email” id=”email” />
l?????????maxlength和size
eg. <input type=”text” name=”email” id=”email” maxlength=”50” size=”20” />
l?????????checkbox
eg. <input type=”checkbox” name=”checkbox” id=”checkbox” value=”n” />
l?????????radio
eg. <input type=”radio” name=”radio” id=”radio” value=”n” />
l?????????submit
eg. <input type=”submit” value=”submit” />
l?????????textarea
eg. <textarea name=”message” id=”message” rows=”11” cols=”30”></textarea>
l?????????select
eg. <select name=”subject” id=”subject”>
????????????? <option value=””>Select</option>
????????????? <option value=” Option1”>Option1</option>
?????? ?</select>
2）提高可訪問(wèn)性
CSS設(shè)計(jì)者喜歡用<fieldset>，因?yàn)樗矂?chuàng)建一個(gè)完美的容器。一般情況下，在CSS中容器的創(chuàng)建都需要一個(gè)額外的<div>。eg:
<fieldset>
?????? Form tags go here;
</fieldset>
在默認(rèn)情況下，<fieldset>在內(nèi)容周圍畫一個(gè)簡(jiǎn)單的邊框，以定義表單節(jié)。不用說(shuō)，由于<fieldset>但當(dāng)了主父元素，它需要承擔(dān)很多應(yīng)用到表單的樣式。
<legend>元素的功能與用于識(shí)別表格的<caption>元素作用很相似。它還是另外一個(gè)簡(jiǎn)單CSS的連接點(diǎn)。使用舉例如下：
<fieldset>
?????? <legend>Enquiry Form</legend>
?????? Form tags go here;
</fieldset>
如果你希望使用屏幕閱讀器的人能夠成功的導(dǎo)航你的表單，那么在<input>的<label>元素和相應(yīng)的ID之間創(chuàng)建關(guān)系很重要。Eg：
<label for=”email”>Email</label><input type=”text” name=”email” id=”email” />
tabindex屬性允許用戶只用鍵盤（通常是Tab鍵）來(lái)導(dǎo)航表單的輸入焦點(diǎn)，通常按照數(shù)字順序，為每個(gè)屬性給定一個(gè)數(shù)字值。Eg：
<label for=”firstname”>First Name</label><input type=”text” name=”firstname” id=” firstname” tabindex=”1” />
<label for=”surname”>Surname</label><input type=”text” name=” surname” id=”surname” tabindex=”2” />
accesskey屬性是另外一個(gè)保證靈活性較差的用戶能夠完成表單導(dǎo)航的好方法，eg:
<label for=”email” accesskey=”3”>Email</label><input type=”text” name=”email” id=”email” />
現(xiàn)在，如果按下Alt+3鍵，表單焦點(diǎn)直接切換到<input>域，并與label相聯(lián)系并指向email。
3）?使用ID
Eg:
<form action=”” method=”post” id=”enquiryform”>
定義如下CSS:
#enquiryform input {
width: 100%
}
2．表單樣式基礎(chǔ)
1）去除默認(rèn)的表單間隔
form {
margin: 0;
padding: 0l
}
2）為文本的<input>和<textarea>添加漂亮的邊框
input, textarea {
border: 3px double #333;
}
?????? 3）<input>和<textarea>的寬度
input, textarea {
?????? width: 100%;
border: 3px double #333;
}
?????? 4）<label>
?????? label {
font-weight: bold;
}
?????? 5）<fieldset>
?????? fieldset {
????????????? margin:0 0 10px 0;
????????????? padding:5px;
????????????? border:1px solid #333;
}
?????? 6）<legend>
?????? legend {
background-color:#DDDDDD;
margin:0;
padding:5px;
border-style:solid;
border-width:1px;
border-color:#FFF #AAA #666 #FFF;
}
本文轉(zhuǎn)自：?http://www.blogjava.net/amigoxie/archive/2007/09/13/144684.html
總結(jié)
以上是生活随笔為你收集整理的CSS基础教程（下）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： （六十二）基于logistic回归的信用
- 下一篇： mysql 是否支持Unix系统_在UN