css|技巧 <!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /><style type="text/css"><!--p { font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;line-height: 2.0;}.transform { text-transform: capitalize;}--></style></head><body><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Crasest magna, pretium sit amet, rhoncus nec, tristique molestie, leo.Aenean tortor sem, luctus at, luctus vel, consequat et, lectus. Proinid velit. Vestibulum ante ipsum primis in faucibus orci luctus etultrices posuere cubilia Curae; Cras ullamcorper. Donec nunc.</p><p class="transform">Lorem ipsum dolor sit amet, consectetueradipiscing elit. Cras est magna, pretium sit amet, rhoncus nec,tristique molestie, leo. Aenean tortor sem, luctus at, luctus vel,consequat et, lectus. Proin id velit. Vestibulum ante ipsum primis infaucibus orci luctus et ultrices posuere cubilia Curae; Crasullamcorper. Donec nunc.</p></body></html>
程式碼text-transform: capitalize;此樣式只在我們用於英文網站時才要用到，另外國外英文網站喜歡用的字型是Arial 11px,行高為1.8em
2.水平置中技巧（center）
HTML代碼<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /><style type="text/css"><!--p { font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;line-height: 2.0;}.centered { text-align: center;}--></style></head><body><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Crasest magna, pretium sit amet, rhoncus nec, tristique molestie, leo.Aenean tortor sem, luctus at, luctus vel, consequat et, lectus. Proinid velit. Vestibulum ante ipsum primis in faucibus orci luctus etultrices posuere cubilia Curae; Cras ullamcorper. Donec nunc.</p><p class="centered">Lorem ipsum dolor sit amet, consectetueradipiscing elit. Cras est magna, pretium sit amet, rhoncus nec,tristique molestie, leo. Aenean tortor sem, luctus at, luctus vel,consequat et, lectus. Proin id velit. Vestibulum ante ipsum primis infaucibus orci luctus et ultrices posuere cubilia Curae; Crasullamcorper. Donec nunc.</p></body></html>
程式碼置中也是我們在定義樣式中經常用到的：text-align: center;不但可以內嵌元素置中也同樣可以區塊層級元素置中，如我們在頁面配置中，所用到的對body定義置中然後對WRAP定義居左就是用的這個知識點，因為IE5對margin:AUTO;不支援，所以你在頁面中會看到這種相容IE5的這種方法。
3.有背景色的標題（headingcolor）
HTML代碼<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /><style type="text/css"><!--body { font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;}h1 { background-color: #ADD8E6; color: #256579; font: 18px Verdana,Geneva, Arial, Helvetica, sans-serif; padding: 2px;}--></style></head><body><h1>This is a level one heading</h1><p>These stuffed peppers are lovely as a starter, or as a sidedish for a Chinese meal. They also go down well as part of a buffet andeven children seem to like them.</p></body></html>
程式碼
我們都知道H1~H6都是用做標題的，所以在製作網頁中一定要多用有語義的元素，前幾天看到好象是Opera它的說明頁中頁尾的部局是用了< address>這個標籤，而我們平時定義樣式是這樣：<div class="address">text</div>,我們很少去想用<address>這樣有語義的標籤！還是說一下正題吧，為了美化標題我們為H1加上了背景色和字的顏色，這樣看上去就漂亮多了！關於標題在網上有相關的文章教程請在網上尋找，這裡不在重述。
4.標題間距（headingnospace）
HTML代碼<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /><style type="text/css"><!--body { font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;}h1 { font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;margin-bottom: -12px;}--></style></head><body><h1>This is a level one heading</h1><p>These stuffed peppers are lovely as a starter, or as a sidedish for a Chinese meal. They also go down well as part of a buffet andeven children seem to like them.</p></body></html>
程式碼
margin-bottom: -12px;注意此處用了負值，平時做網頁時很少想到用負值，沒有看到這個方法時以前是設一個H1上邊距或補白，下邊的P邊界補白設為0這樣P就離H1很近了，一回想起以前這種方法真的很不好，看來以後要改成負邊界的這種方法了！
5標題中的底線（headingunderline）
HTML代碼<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /><style type="text/css"><!--body { font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;}h1 { font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;text-decoration: underline;}--></style></head><body><h1>This is a level one heading</h1><p>These stuffed peppers are lovely as a starter, or as a sidedish for a Chinese meal. They also go down well as part of a buffet andeven children seem to like them.</p></body></html>
程式碼當看到效果圖我們通常會想到是在<H1>中加入<span>標籤然後定義SPAN的下邊框，可是作者並沒有按著這個思咱走下去，它定義的是文本修飾，同樣的效果用了最簡單的方法，這是我們寫代碼人要的最終要求！另外我們定義H1為內嵌元素在定義下邊框也能達到效果，但還是不如作者的代碼簡單！
6.標題中的底線2（headingunderline2）
HTML代碼<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /><style type="text/css"><!--body { font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;}h1 { font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif; padding:2px; border-bottom: 1px solid #aaaaaa;}--></style></head><body><h1>This is a level one heading</h1><p>These stuffed peppers are lovely as a starter, or as a sidedish for a Chinese meal. They also go down well as part of a buffet andeven children seem to like them.</p></body></html>
程式碼
代碼很簡單，就不多說了。在寫代碼時最複雜的代碼也是由最簡單的程式碼群組成的，所以一定掌握好最基礎的東西！
7.醒目的文字（hilite）
HTML代碼<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /><style type="text/css"><!--body { font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;}.hilite { background-color: #FFFFCC; color: #B22222;}--></style></head><body><p>These <span class="hilite">stuffed peppers</span>are lovely as a starter, or as a side dish for a Chinese meal. Theyalso go down well as part of a buffet and even children seem to likethem.</p></body></html>
程式碼
“醒目也就是引起瀏覽者的注意，在國外的這種利用背景色、文字顏色的差異的方法，隨處可見，而在國內的多以字型加粗，顏色突出為主流。”
8.整體文字縮排
HTML代碼<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /><style type="text/css"><!--p { font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;line-height: 2.0;}.indent { padding-left: 30px;}--></style></head><body><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Crasest magna, pretium sit amet, rhoncus nec, tristique molestie, leo.Aenean tortor sem, luctus at, luctus vel, consequat et, lectus. Proinid velit. Vestibulum ante ipsum primis in faucibus orci luctus etultrices posuere cubilia Curae; Cras ullamcorper. Donec nunc.</p><p class="indent">Lorem ipsum dolor sit amet, consectetueradipiscing elit. Cras est magna, pretium sit amet, rhoncus nec,tristique molestie, leo. Aenean tortor sem, luctus at, luctus vel,consequat et, lectus. Proin id velit. Vestibulum ante ipsum primis infaucibus orci luctus et ultrices posuere cubilia Curae; Crasullamcorper. Donec nunc.</p></body></html>
程式碼在中文網頁中單行縮排時使用樣式text-indent: 2em;也就是2個字型高，接中文書寫習慣就是空兩個格，而英文很少用到.在使用整體縮排時我們用padding-left: 30px;就是左補白30像素，別看這個樣式很簡單，但用處很大，舉個例子：我們在布局中很多人喜歡用HUCK技術，對於這種技術我研究的很少，所以也用的少，因為在以後升級後它們就可能會失效。所以我用變通的方法，在HTML中做文章，我們都知道IE5與IE6很大的不同就是對寬度的理解不同，有些人喜歡用voice-family: "\"}\""; voice-family:inherit;或者其它方法，這裡就不一一舉例了，我使用的方法，也就是應該提倡的方法是在父元素寫一個寬度不加入補白，而在子項目中加入這些屬性，如子項目中有P我們就加在P中左右補白為一個數值。這樣就閉免了IE5與IE6之間的寬度問題了！
9.文本左右對齊（justify）
HTML代碼<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /><style type="text/css"><!--p { text-align: justify; font: 11px Verdana, Geneva, Arial, Helvetica,sans-serif; line-height: 2.0;}--></style></head><body><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Crasest magna, pretium sit amet, rhoncus nec, tristique molestie, leo.Aenean tortor sem, luctus at, luctus vel, consequat et, lectus. Proinid velit. Vestibulum ante ipsum primis in faucibus orci luctus etultrices posuere cubilia Curae; Cras ullamcorper. Donec nunc.</p></body></html>
程式碼
左右對齊的樣式只對英文起作用，在為客戶做英文頁時客戶說右邊有很多空白，（因為一個英文單詞如在本行放不下一行。可能你會想到強制換行的問題上了，但強制換行，一個單詞可能就會拆分成兩個單詞，這樣會使使用者的的可讀性下降，另外一點是IE有換行的樣式，FF只能用 JAVASCRIPT去實現。），很不美觀，於是加入這個樣式後在視覺上就好看多了！
10.連結中的樣式（linktypes）
HTML代碼<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><style type="text/css"><!--a:link, a:visited {text-decoration: underline;color: #6A5ACD;background-color: transparent;}a:hover, a:active {text-decoration: underline overline;color: #191970;background-color: #C9C3ED;}.boxout {color: #FFFFFF;background-color: #6A5ACD;}.boxout a:link, .boxout a:visited {text-decoration: underline;color: #E4E2F6;background-color: transparent;}.boxout a:hover, .boxout a:active {background-color: #C9C3ED;color: #191970;}--></style></head><body><div class="boxout"><p>Visit out <a href="store.html">online store</a>, for all yourwidget needs.</p></div><ul><li><a href="#">This is a link</a></li><li><a href="#">Link Two</a></li><li><a href="#">Link Three</a></li><li><a href="#">Link Four</a></li></ul></body></html>
程式碼
看了這個標題，你一定會說一個連結有什麼好討論的呢？其實不然，學會CSS一方面學習知識，另一方面的整理自己以前錯誤的思路。還是接著說主題吧！連結的樣式一共有四種a:link, a:visited, a:hover, a:active它們在寫應用中是應該有順序的，於是為了便於記憶有人寫了LVHA這個“單詞”，但我記得在哪本書中好象看到過只有a:hover在a: active之前就是要以的。所以我記憶的只有“HA“這個”單詞“我們定了總的連結樣式後如是頁面中有不同的連結，我們就應用樣式表的特點：”重疊“文中加入了一個CLASS。樣式就可定義.boxout a，用我的話說就是CLASS下的A，之後就可以跟據我們的要求去定義樣式了。此處text-decoration: underline overline;這是我第一次看到，應該注意這種用法。
11.列表圖片（listimage）
HTML代碼<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" type="text/css" href="listimage.css" /><style type="text/css"><!--ul {list-style-image: url(/attachments/month_0611/t20061114134250.gif);}--></style></head><body><ul><li>list item one</li><li>list item two</li><li>list item three</li></ul></body></html>
程式碼list-style-image這種方法用的人很少，主要是因為它的靈活性不太強不容易控製圖片的位置，所以在實際當中多後背景圖片所代替。
12.列表排成一行（listinline）
HTML代碼<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><style type="text/css"><!--ul.horiz li {display: inline;}--></style></head><body><ul class="horiz"><li>list item one</li><li>list item two</li><li>list item three</li></ul></body></html>
程式碼display: inline;它的用處還是很大的，可以使一個元素成為內嵌元素，在去除IE邊距加倍問題上中我們也使用這個樣式。我們在做菜單中常用列表元素，對LI定義一種是使用FLOAT,另一種就是現在用的DISPLAY:INLINE;關於列表還有很多內容，以後在補充！
13.無列表符號的列表（listnomargin）
HTML代碼<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><style type="text/css"><!--ul {list-style-type: none;padding-left: 0;margin-left: 0;}--></style></head><body><ul><li>list item one</li><li>list item two</li><li>list item three</li></ul></body></html>
程式碼
你知道為什麼這裡用了padding-left: 0;margin-left: 0;嗎？就是因為IE，FF裡的預設的樣式不同，一個預設有邊界，一個預設有補白，所以為了顯示一樣，我們統一定義一個樣式，在很多頁面樣式中你也可以看到*{padding:0;margin:0;}這主要是為了避免不必要的麻煩而首先定義的一個樣式！list-style-type: 還有其它的屬性如：square;但實際應用中，例表符號的大小並不容易控制，它與字型、大小都有關係，所以很多情況下使用一個點的符號，網易上首頁就使用這種方法，還有就是利用背景圖片了。背景圖片可控制性強。
14.字母大寫問題（listnomargin）
HTML代碼<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /><style type="text/css"><!--p { font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;line-height: 2.0;}.transform { text-transform: uppercase;}--></style></head><body><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Crasest magna, pretium sit amet, rhoncus nec, tristique molestie, leo.Aenean tortor sem, luctus at, luctus vel, consequat et, lectus. Proinid velit. Vestibulum ante ipsum primis in faucibus orci luctus etultrices posuere cubilia Curae; Cras ullamcorper. Donec nunc.</p><p class="transform">Lorem ipsum dolor sit amet, consectetueradipiscing elit. Cras est magna, pretium sit amet, rhoncus nec,tristique molestie, leo. Aenean tortor sem, luctus at, luctus vel,consequat et, lectus. Proin id velit. Vestibulum ante ipsum primis infaucibus orci luctus et ultrices posuere cubilia Curae; Crasullamcorper. Donec nunc.</p></body></html>
程式碼
text-transform: uppercase;這種方法可以使我們不用在HTML中寫入大寫而用樣式就可以使小寫字母全部轉變為大寫字母了。
