今天把看《CSS基礎(chǔ)教程》的下半部分筆記貼出來，嘿嘿，希望也對大家有點(diǎn)好處。
一． 文本
1. 基本字體屬性
下面看看字體的幾個(gè)屬性：
1）font-family
該屬性是針對某個(gè)元素的字體名稱和字體系列名稱的一個(gè)列表，該列表按有限順序排列。Eg：
Body {
Font-family: “Lucida Grande”, Arial, Sans-serif;
}
2）font-size
用于定義字體的大小，eg：
body {
font-size: 12px;
}
可以對字體聲明進(jìn)行如下縮寫，如：
body {
font: 12px “Lucida Grande”, Arial, Sans-serif;
}
2. 可用字體
1）web安全字體
當(dāng)選定某種自體時(shí)，必須保證選定的字體不但要在所選定的平臺上看起來不錯(cuò)，而且還要保證在其他的平臺上也能顯示。
已有如下的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)用樣式
對于一個(gè)全新的網(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)整文本行與行之間的間距將使文本看起來大不一樣，可以增強(qiáng)文本的可讀性。因此，務(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í)，行距將等于數(shù)字乘以當(dāng)前的font-size值。Eg. line-height: 2;
長度：將行距設(shè)定為固定值。這種方法精度很高。注意：在這種情況下，如果重新設(shè)置文本的大小，行距不會以文本中相同的比率增加或減小。Eg. line-height: 8px;為保證重新設(shè)置文本大小時(shí)，行距仍能正常調(diào)整，建議采用em和百分比。
5. letter-spacing屬性
使用該屬性使得設(shè)計(jì)者能夠依此實(shí)現(xiàn)對文本的緊性控制，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ǔ)充。它可以將所有的字符顯示為大寫字母但是不縮寫字號。text-transform: uppercase聲明非常適用于標(biāo)題。
5）段落縮進(jìn)
Eg:
p {
text-indent: 15px;
}
二． 顏色、背景與圖像
1．顏色簡史
設(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中用來表示顏色的十六進(jìn)制數(shù)，由3個(gè)字節(jié)6個(gè)數(shù)字組成，這3個(gè)字節(jié)分別表示：紅色、綠色和藍(lán)色的值。
CSS語言和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;
}
針對文本，需要使用Web安全顏色。這樣顏色將可以正確的映射到不同平臺上，從而即使在顏色有限的顯示器上也不會被打亂，依然便于閱讀。
3．背景色
我們用background-color屬性來設(shè)定(X)HTML元素的背景色。如果你希望網(wǎng)站具有單色背景，那么請選擇一種Web安全顏色。這將保證即使網(wǎng)頁在其它平臺上顯示，顏色也不會給你帶來麻煩。
下面來看一個(gè)為文本添加背景色的例子：
p {
color: #000;
background-color: #FF0;
line-height:150%;
}
接著來看一個(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。最后一種與前兩種相比，使用相對較少。
GIF(大多數(shù)人念為“whiff”，也有人念為“jif”)格式無疑是北京圖像最理想的圖像格式。它通過使用特定的壓縮模式使得文件大小達(dá)到最小。
GIF的最大優(yōu)點(diǎn)就是它擁有一定的透明度。
JPEG(發(fā)音為“jay-peg”)圖像非常靈活，但是JPEG圖像分析顏色的方法與GIF不同，它一般采用照片的有損壓縮的標(biāo)準(zhǔn)方法。在反復(fù)地編輯和保存過程中。JPEG文件將逐漸退化。這一點(diǎn)和對照片副本進(jìn)行再復(fù)制有點(diǎn)像。照片圖像最好是以無損失的非JPEG格式保存，如TIFF。這樣在將來需要重新編輯時(shí)可以避免圖像不清晰。
JPEG不適用于素描，也不適用于包括文本的圖像（GIF非常適合這種情況）。但是如果需要為網(wǎng)頁保存照片的話，這種格式就非常合適了。
PNG格式（讀為“ping”）的開發(fā)主要是為了改善GIF格式中的一些不足，利用它，能夠顯示百萬顏色的機(jī)器就不會再局限于256色了。大部分人都會選擇PNG來提供一些更復(fù)雜的透明圖像。但有個(gè)問題：IE不支持透明的PNG。
5．背景圖像
對于采用大圖片作為背景圖像的網(wǎng)頁，用戶瀏覽網(wǎng)頁時(shí)的速度會大大降低。在任何情況下，在背景圖像無法顯示或者用戶手動關(guān)閉背景時(shí)，如果沒有可替換的手段來表示背景圖像所表達(dá)的信息的話，就不要用背景來表達(dá)一些重要信息。
下面讓我們來看一個(gè)為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;
默認(rèn)情況下，background-image屬性將圖像放置（或者開始平鋪過程）在容器的左上角。幸運(yùn)的是，background-position屬性為此提供了更多的靈活性。該屬性允許你根據(jù)背景和容器的關(guān)系，精確地設(shè)定圖像放置的位置。例如：
background-position: 50px left;
background-position: 10% 50%;
background-attachment屬性使用相對較少，但非常有用，它用來實(shí)現(xiàn)粘連的效果，該屬性有兩個(gè)值：scroll（默認(rèn)）和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. 無序列表
下面來看一個(gè)無序列表的例子，代碼如下：
<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)目符號內(nèi)聯(lián)在文本中時(shí)，使用該屬性。Eg.
ul {
list-style-position: inside;
}
4）list-style-image
該屬性用來自定義圖片來代替實(shí)心圓、空心圓等。使用舉例如下：
ul {
list-style-image: url(images/list.gif);
}
5）list-style縮寫
列表屬性可以縮寫為一個(gè)聲明語句，即用list-style屬性。List-style-type、list-style-position和list-style-image可以任意排列，例如：
list-style: none inside url(images/list.gif);
下面讓我們來看一個(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．有序列表
有序列表是一種用來按順序標(biāo)記列表項(xiàng)的方便方法。見下例：
<ol>
<li>Beer</li>
<li>Tea</li>
<li>Coffee</li>
</ol>
四． 鏈接
1．鏈接標(biāo)記
不管你是用文本還是圖像來作為鏈接，鏈接都是代碼中我們必須對其進(jìn)行認(rèn)真處理的元素之一。下面看一個(gè)鏈接的例子：
<a href=”http://www.google.com” title=”訪問Google” alt=”Visit Google”>Google</a>
2．默認(rèn)鏈接樣式
默認(rèn)的瀏覽器樣式表是沒訪問過的鏈接呈現(xiàn)為深藍(lán)色，訪問過的鏈接呈現(xiàn)為紫色等等。
3．簡單CSS規(guī)則
下面來看一個(gè)改變鏈接顏色的例子：
a:link {
color: #F00;
}
接著來看一個(gè)改變訪問過的鏈接的顏色的例子：
a:visited {
color: #999;
}
還可以通過修改樣式來改變鼠標(biāo)放到鏈接上時(shí)將所有的鏈接文本設(shè)置成某顏色，如下：
a:active {
color: #000;
}
而:active偽類主要關(guān)注鼠標(biāo)真正點(diǎn)擊時(shí)鏈接樣式，該偽類可以提高網(wǎng)頁的可用性，如下：
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;
}
下面再來看一個(gè)為鏈接加上邊框的例子：
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．利用派生選擇器來影響鏈接
讓我們來看一個(gè)利用派生選擇器來影響鏈接的例子：
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ī)則將一個(gè)簡單的無序列表變成一個(gè)垂直的導(dǎo)航欄。下面來看一個(gè)對應(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;
}
最后一個(gè)訣竅是，當(dāng)你真正瀏覽某個(gè)頁面時(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．表格
表格生來就很復(fù)雜。數(shù)據(jù)按規(guī)則放置在行和列中，它們之間的特定的關(guān)系已直接地表示出來。本質(zhì)上，表格適用于列表數(shù)據(jù)并且只適用于列表數(shù)據(jù)。
1）基本表格
在(X)HTML中，<table>用來定義父元素，<tr>元素則用來定義表格中新的行，而大量的<td>元素則用來創(chuàng)建單元格。<th>元素表示行或列的標(biāo)題，默認(rèn)用粗體。下面來看一個(gè)基本表格的例子：
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>阿蜜果</td>
<td>24</td>
</tr>
</table>
2）過去如何使用樣式
使用celpadding和cellspacing這兩個(gè)我們熟知的屬性是件很有誘惑的事。將它們添加到表示起始標(biāo)簽中，從而得到<table cellpadding=”5” cellspacing=”5” border=”1”>。
然而，這些屬性是純表現(xiàn)性的，因此完全沒有使用的必要。理論上說，不要在表格元素中添加表現(xiàn)標(biāo)記，僅僅使用一些簡單的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屬性是一個(gè)功能強(qiáng)大的工具，可替代HTML中過時(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ǔ)基本列表和表格之間的鴻溝，以提供另外一種方法來展示一些簡單的數(shù)據(jù)對。但是，它既沒有無需列表的限制也不像表格那樣復(fù)雜。
所有的定義列表都包括兩個(gè)組成部分：項(xiàng)和描述。由三個(gè)基本元素組成，容器（<dl>）、定義項(xiàng)（<dt>）和定義描述（<dd>）。見下例：
<dl>
<dt>China</dt>
<dd>Guangzhou</dd>
<dt>England</dt>
<dd>Terrible soccer team</dd>
</dl>
定義列表具有靈活的繼承性，因此，在一個(gè)定義列表中可以使用多個(gè)<dt>和<dd>。
在列表的定義描述中還可以結(jié)合塊級元素使用，例如<p>和<ul>元素等，見例：
<dl>
<dt>England Soccer Team</dt>
<dd><p>Terrible soccer team…</p></dd>
</dl>
下面再來看一個(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樣式來修飾這個(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-
}
需要注意的是定義列表非常靈活。雖然它不是很常用，但這種方式對于將數(shù)據(jù)分解若干小塊而言，非常有用。
六． 表單
1．標(biāo)記回顧
表單的偉大之處在于，一個(gè)正確標(biāo)記的表單能夠提供大量元素來使用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è)計(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é)。不用說，由于<fieldset>但當(dāng)了主父元素，它需要承擔(dān)很多應(yīng)用到表單的樣式。
<legend>元素的功能與用于識別表格的<caption>元素作用很相似。它還是另外一個(gè)簡單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鍵）來導(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;
}
posted on 2007-09-13 08:55
阿蜜果 閱讀(2096)
評論(4) 編輯 收藏 所屬分類:
CSS