今天把看《CSS基礎(chǔ)教程》的下半部分筆記貼出來，嘿嘿，希望也對大家有點好處。
      

一．             文本

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）有趣的替代字體

現(xiàn)在又出現(xiàn)了一些新的有趣的字體。如下所示：Lucida Grande、Lucida SansUnicode、Futura、Helvetica Neue、Gill Sans和Palatino。

3.       應(yīng)用樣式

對于一個全新的網(wǎng)站，首先要考慮的是在body選擇器中聲明一般的規(guī)則。除非特別說明，則body中的所有元素都將繼承這些值。Eg：

body {

margin: 10px;

border: 1px solid #000;

padding: 10px;

font: 12px Verdana, Arial, Sans-serif;

}

4.       請務(wù)必使用line-height屬性

調(diào)整文本行與行之間的間距將使文本看起來大不一樣，可以增強文本的可讀性。因此，務(wù)必使用這一屬性。

1）用百分比設(shè)置line-height

如果line-height設(shè)置為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：用于設(shè)定專家稱為的“行之間合理的間距”；

數(shù)字：用數(shù)字設(shè)定間距時，行距將等于數(shù)字乘以當前的font-size值。Eg. line-height: 2;

長度：將行距設(shè)定為固定值。這種方法精度很高。注意：在這種情況下，如果重新設(shè)置文本的大小，行距不會以文本中相同的比率增加或減小。Eg. line-height: 8px;為保證重新設(shè)置文本大小時，行距仍能正常調(diào)整，建議采用em和百分比。

5.       letter-spacing屬性

使用該屬性使得設(shè)計者能夠依此實現(xiàn)對文本的緊性控制，eg：

h1, h2 {

letter-spacing: 3px;

}

6.       其他的關(guān)鍵字體屬性

1）font-weight

設(shè)置文本中字符顯示的粗細程度。通常聲明為正?；虼煮w。

2）font-style

字體的樣式，normal（默認）、Italic（斜體）、oblique。

3）font-variant

用于將文本顯示為小型大寫字母字體，也就是所有的小寫字母都將轉(zhuǎn)換為大寫字母。

4）text-transform

它是font-variant的補充。它可以將所有的字符顯示為大寫字母但是不縮寫字號。text-transform: uppercase聲明非常適用于標題。

5）段落縮進

Eg:

p {

text-indent: 15px;

}

二．             顏色、背景與圖像

1．顏色簡史

設(shè)定顏色的方法有很多種，以下的幾種方法都是正確的：

#f00 /* #rgb*/

#ff0000 /* #rrggbb*/

red /* 常用英文名*/

rgb(255, 0, 0) /* 顏色范圍：0-255*/

rgb(100%, 0%, 0%) /* 浮點范圍：0.0%-100.0%*/

十六進制三元組是在(X)HTML和CSS中用來表示顏色的十六進制數(shù)，由3個字節(jié)6個數(shù)字組成，這3個字節(jié)分別表示：紅色、綠色和藍色的值。

CSS語言和HTML4規(guī)范一樣都定義了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屬性來設(shè)定(X)HTML元素的背景色。如果你希望網(wǎng)站具有單色背景，那么請選擇一種Web安全顏色。這將保證即使網(wǎng)頁在其它平臺上顯示，顏色也不會給你帶來麻煩。

下面來看一個為文本添加背景色的例子：

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的元素設(shè)定背景色，例如給id為container的div元素設(shè)定背景色。代碼如下：

       #container {

padding: 10px;

border: 1px solid #000;

background-color: #FFF;

}

4．背景的圖像格式

在Web設(shè)計中，三種主要圖像格式廣為接受，即GIF、JPEG和PNG。最后一種與前兩種相比，使用相對較少。

GIF(大多數(shù)人念為“whiff”，也有人念為“jif”)格式無疑是北京圖像最理想的圖像格式。它通過使用特定的壓縮模式使得文件大小達到最小。

GIF的最大優(yōu)點就是它擁有一定的透明度。

JPEG(發(fā)音為“jay-peg”)圖像非常靈活，但是JPEG圖像分析顏色的方法與GIF不同，它一般采用照片的有損壓縮的標準方法。在反復(fù)地編輯和保存過程中。JPEG文件將逐漸退化。這一點和對照片副本進行再復(fù)制有點像。照片圖像最好是以無損失的非JPEG格式保存，如TIFF。這樣在將來需要重新編輯時可以避免圖像不清晰。

JPEG不適用于素描，也不適用于包括文本的圖像（GIF非常適合這種情況）。但是如果需要為網(wǎng)頁保存照片的話，這種格式就非常合適了。

PNG格式（讀為“ping”）的開發(fā)主要是為了改善GIF格式中的一些不足，利用它，能夠顯示百萬顏色的機器就不會再局限于256色了。大部分人都會選擇PNG來提供一些更復(fù)雜的透明圖像。但有個問題：IE不支持透明的PNG。

5．背景圖像

對于采用大圖片作為背景圖像的網(wǎng)頁，用戶瀏覽網(wǎng)頁時的速度會大大降低。在任何情況下，在背景圖像無法顯示或者用戶手動關(guān)閉背景時，如果沒有可替換的手段來表示背景圖像所表達的信息的話，就不要用背景來表達一些重要信息。

下面讓我們來看一個為id為container的div元素來設(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;

       默認情況下，background-image屬性將圖像放置（或者開始平鋪過程）在容器的左上角。幸運的是，background-position屬性為此提供了更多的靈活性。該屬性允許你根據(jù)背景和容器的關(guān)系，精確地設(shè)定圖像放置的位置。例如：

       background-position: 50px left;

       background-position: 10% 50%;

       background-attachment屬性使用相對較少，但非常有用，它用來實現(xiàn)粘連的效果，該屬性有兩個值：scroll（默認）和fixed。

       有很多和北京相關(guān)的屬性，可以使用一些縮寫來將其合成一行CSS，例如，將圖像和顏色組合的縮寫：

       background: #FFF url(tile.gif);

       顏色、圖像以及位置的縮寫：

       background: #FFF url(tile.gif) right top;

       顏色、圖像、位置和重復(fù)的縮寫：

       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

該屬性可以從多個可能的列表項目符中為列表設(shè)定一個特定列表項目符，使得列表不采用默認的disc。下面5中項目符用得最多：

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

如果需要項目符號內(nèi)聯(lián)在文本中時，使用該屬性。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;

}

       有時我們還需要建立內(nèi)聯(lián)列表，如下例：

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．默認鏈接樣式

默認的瀏覽器樣式表是沒訪問過的鏈接呈現(xiàn)為深藍色，訪問過的鏈接呈現(xiàn)為紫色等等。

3．簡單CSS規(guī)則

下面來看一個改變鏈接顏色的例子：

a:link {

color: #F00;

}

       接著來看一個改變訪問過的鏈接的顏色的例子：

       a:visited {

color: #999;

}

       還可以通過修改樣式來改變鼠標放到鏈接上時將所有的鏈接文本設(shè)置成某顏色，如下：

       a:active {

color: #000;

}

       而:active偽類主要關(guān)注鼠標真正點擊時鏈接樣式，該偽類可以提高網(wǎng)頁的可用性，如下：

       a:active {

color: #000;

}

4．其他有用的鏈接屬性

使用text-decoration可以很容易的去除鏈接下劃線，該屬性的可能值有：none、underline（默認值）、overline、line-through和blink。該屬性可以用到4種鏈接狀態(tài)中的任何一種，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．利用鏈接來轉(zhuǎn)換導(dǎo)航欄

通過使用簡單的CSS規(guī)則將一個簡單的無序列表變成一個垂直的導(dǎo)航欄。下面來看一個對應(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>

       接著我們可以開始創(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;

}

       最后一個訣竅是，當你真正瀏覽某個頁面時，突出相應(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．表格

表格生來就很復(fù)雜。數(shù)據(jù)按規(guī)則放置在行和列中，它們之間的特定的關(guān)系已直接地表示出來。本質(zhì)上，表格適用于列表數(shù)據(jù)并且只適用于列表數(shù)據(jù)。

1）基本表格

在(X)HTML中，<table>用來定義父元素，<tr>元素則用來定義表格中新的行，而大量的<td>元素則用來創(chuàng)建單元格。<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”>。

然而，這些屬性是純表現(xiàn)性的，因此完全沒有使用的必要。理論上說，不要在表格元素中添加表現(xiàn)標記，僅僅使用一些簡單的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中添加如下內(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．定義列表

在某種意義上，列表主要是為了彌補基本列表和表格之間的鴻溝，以提供另外一種方法來展示一些簡單的數(shù)據(jù)對。但是，它既沒有無需列表的限制也不像表格那樣復(fù)雜。

所有的定義列表都包括兩個組成部分：項和描述。由三個基本元素組成，容器（<dl>）、定義項（<dt>）和定義描述（<dd>）。見下例：

<dl>

        <dt>China</dt>

               <dd>Guangzhou</dd>

        <dt>England</dt>

               <dd>Terrible soccer team</dd>

       </dl>

       定義列表具有靈活的繼承性，因此，在一個定義列表中可以使用多個<dt>和<dd>。

       在列表的定義描述中還可以結(jié)合塊級元素使用，例如<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-

}

       需要注意的是定義列表非常靈活。雖然它不是很常用，但這種方式對于將數(shù)據(jù)分解若干小塊而言，非常有用。

六．             表單

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設(shè)計者喜歡用<fieldset>，因為它也創(chuàng)建一個完美的容器。一般情況下，在CSS中容器的創(chuàng)建都需要一個額外的<div>。eg:

<fieldset>

       Form tags go here;

</fieldset>

在默認情況下，<fieldset>在內(nèi)容周圍畫一個簡單的邊框，以定義表單節(jié)。不用說，由于<fieldset>但當了主父元素，它需要承擔(dān)很多應(yīng)用到表單的樣式。

<legend>元素的功能與用于識別表格的<caption>元素作用很相似。它還是另外一個簡單CSS的連接點。使用舉例如下：

<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鍵）來導(dǎo)航表單的輸入焦點，通常按照數(shù)字順序，為每個屬性給定一個數(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屬性是另外一個保證靈活性較差的用戶能夠完成表單導(dǎo)航的好方法，eg:

<label for=”email” accesskey=”3”>Email</label><input type=”text” name=”email” id=”email” />

現(xiàn)在，如果按下Alt+3鍵，表單焦點直接切換到<input>域，并與label相聯(lián)系并指向email。

3） 使用ID

Eg:

<form action=”” method=”post” id=”enquiryform”>

定義如下CSS:

#enquiryform input {

width: 100%

}

2．表單樣式基礎(chǔ)

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;

}