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