注：本教程轉自jorux.com，版權歸作者和譯者所有。
我想把本篇作為css基礎教程的序曲，從今天開始翻譯和整理我從設計網頁以來所學到的css基礎知識。本教程會分成N個部分，單獨發表，其間可能會插入幾篇與教程無關的文章。沒有具體的教程發表進度,推薦關注本教程的朋友訂閱本站Feed。教程內容的30%-50%為Jorux原創，其余翻譯部分均為意譯,可能來源於多個國外站點，並在教程結束時公布參考原文地址。
曾翻譯過一篇css教程:十步學會用css建站，文章聲稱能在十步學會建站，雖說誇張點，但確實能學到一些東西，就像現代社會流行速成一樣，它只是一個css快餐，要達到自由運用css，沒個百八十步恐怕有點懸。
需要什麼軟件學習css?
一個文本編輯器和Firefox
1.文本編輯器：這裡所指的是諸如windows自帶的記事本以及Editplus等改進版記事本軟件。不推薦Dreamweaver, Frontpage等具有圖形化可視操作，不直接編輯css源代碼的軟件。這類軟件確實能在學習css的初期幫助你迅速達成你的願望，但是不久你就會發現這些被Dreamweaver所自動生成的css代碼冗長繁瑣，css文件體積增大。一旦離開這些軟件你的頭腦就會像一張白紙，基本的css語法都想不起來。本人曾走過彎路，望初學css的朋友借鑒。
本人使用Editplus編寫網頁代碼，其屬於加強版的記事本，具有多步撤銷，語法加亮，全部替換等功能，安裝後無需設置，推薦把屏幕字體改為14號Verdana，方便閱讀編寫。
2.Firefox：本人絕非Firefox的Fan，它也不是盞省油的燈(占用內存多)。但作為一個免費軟件，再配上適當的插件，是網頁設計者的必備工具，如何使用和選擇插件體現設計者專業素質的水平。推薦安裝以下插件：
必裝插件:
IE Tab ：調試網頁在IE內核浏覽器表現的優秀插件，不管你喜不喜歡，請安裝！
強烈推薦安裝的插件：
Web Developer：其功能之強大，以至於我還沒用全它的功能，但是其直接查看網頁css代碼功能，頁面信息的顯示，以及驗證css和Html的功能非常實用。
ColorZilla：方便提取網頁中任何元素的顏色。
Html Validator：安裝這個插件後會在浏覽器右下角生成一個圖標，綠色對號表示當前網頁的Html通過驗證，紅色叉號表示Html有錯誤，黃色歎號表示Html存在無法通過驗證的警告語句。雙擊圖標就會高亮顯示該網頁存在的不能通過驗證的語句數目、位置以及修改建議。作為設計者，最好養成隨時觀察這個圖標的習慣，你就會發現網上聲稱能通過驗證的網頁，幾乎都是錯誤或是警告。本網站除極個別網頁外均通過驗證。
FireBug：安裝這個插件後也會在浏覽器右下角生成一個圖標，綠色對號表示當前網頁的Javascript通過驗證，並能對錯誤的Javascript代碼debug。我們暫時並不需要這個功能。需要用到的功能是其Inspector，你需要通過定制工具欄，把Inspector的"眼鏡"圖標拖入工具欄。點擊Inspector圖標後，將鼠標移到網頁任意位置，你就能在靠下的窗口看到網頁Html文件的相應源代碼，在網頁調試時非常有用。
裝這麼多插件是不是有點累，我光寫都有點吃不消，所以休息一下，在下一篇文章進入css教程的正文部分。
注:由於這段時間被一些瑣碎的事攪得不得安寧,直到今天才發布《If you love css…》的第一篇正文,再次向關注本站的朋友以及訪客表示歉意,如在閱讀過程中發現錯誤,請留言, Jorux會及時更正.
版權聲明:由於在編輯和整理本教程中發現自己原創的東西更能激發我的寫作興趣,在此聲明本教程不再是譯文,而是主要以Jorux.com為素材的原創文章,所使用圖片也均為Jorux原創,如有意轉載,請留言(正確填寫您的Email地址)或者直接電郵Joe7419@gmail.com.
本教程主要介紹css的基礎知識,將逐個講解css的各個屬性,過程可能比較枯燥,但會盡力多舉例說明.
css語法:例:用Web Developer的css查看功能查看Jorux.com首頁的css文件,可以看到以下代碼:
body {
font: normal 12px/1.5 Georgia, sans-serif;
text-align:left;
background:#444 url(images/bodybg.jpg) repeat-y;
}
是不是有點復雜,現在我們沒有必要細究以上代碼,先簡化以上代碼為:
body {text-align:left;}
這便是基本css語法結構:
引用css:css文件的作用就在於控制Html文件的表現,而從Html文件中引用css文件的方法大致有三種:外聯(external),嵌入(in-line)和內聯(internal),這裡限於篇幅以及應用頻度,只介紹外聯方法.
例:同樣打開Jorux.com的主頁,點擊Firefox工具欄–>查看–>頁面源代碼,在<head></head>可以看到以下代碼:
<link rel="stylesheet" href="http://jorux.com/wp-content/themes/j_notebook/style.css" type="text/css" media="screen" />
herf後的地址即為本網站css的地址,這裡應用的地址為絕對地址,而在本地調試時一般用相對地址,將在後文說明.
建立本地調試的文件結構:如下圖所示建立名為local的文件夾,以及其子文件夾style和image,分別用於存放css文件和圖片文件,在local文件夾的根目錄下創建Html文件index.htm,在style文件夾的根目錄下創建css文件style.css:
用文本編輯器打開index.htm,寫入以下代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My first homepage</title>
<link rel="stylesheet" href="style/style.css" media="screen" /></head>
<body>
<h1>My first homepage</h1>
</body>
</html>
然後打開style.css,輸入以下代碼:
body {
background-color: #333;
}
h1 {
color: #F00;
background-color: #FFF;
}
用Firefox打開index.htm,如果你看到Example1的效果,那麼恭喜你,一個基本的本地調試環境建立了.
下面開始逐個介紹css屬性:
顏色(color):css能夠控制的顏色主要包括文本顏色,邊框顏色等,對於背景顏色和邊框顏色會在以後說明,在這主要解釋文本顏色的表現.
在如上所示style.css的選擇器h1中,文本顏色的屬性是用color表示的,h1的顏色的屬性值為#FF0000(一個#加上十六進制值),簡寫為#F00. 我們甚至可以用英文單詞red表示屬性值: color: red; 效果是一樣的. 顏色的其他屬性值還有RGB值,在css中不太常用,這裡就不再敘述.
例:查看Jorux.com首頁的css文件,可以看到以下代碼:
a {
color: #545454;
text-decoration:none;
}
a:hover {
color: #919191;
}
在選擇器a中,文本顏色的屬性值為#545454, 即存在超級鏈接的文本顏色為#545454; 而a:hover為偽類選擇器(表現依賴於浏覽器的狀態), 它的屬性值為#919191, 即鼠標在超級鏈接上懸停時文本的顏色. 你可以用ColorZilla驗證本站首頁的標題文字顏色.
文本(text):css控制的文本屬性主要包括以下四個: text-indent, text-align, text-decoration, text-transform;
1. text-align:屬性text-align指文本的對齊方式,其有向左,向右,居中對齊以及自動適應四種對齊方式:
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
例
>:查看Jorux.com首頁的css文件,可以看到以下代碼:
body {
font: normal 12px/1.5 Georgia, sans-serif;
text-align:left;
background:#444 url(images/bodybg.jpg) repeat-y;
}
在選擇器body中聲明屬性text-align為left,可以避免在其他需要文本左對齊的選擇器中重復聲明.
2. text-indent:屬性text-indent指段落首行的縮進, 既然是段落的屬性,一般用於選擇器p(段落)中,代碼如下:
p {
text-indent: 26px;
}
本站的段落縮進為0, 所以在css文件中能找到text-indent: 0;,不聲明即此屬性,即默認為0.
3. text-decoration:屬性text-decoration為文本修飾, 其包括下劃線, 上劃線, 中劃線和無四種修飾方式, 代碼如下:
text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
在這就不例舉具體的下劃線, 上劃線, 中劃線的例子, 相信大家很容易想像的到它的效果. 需要強調的是屬性值none, 如果你查看本站css的話, 可以看到所有屬性text-decoration的值均為none. 這是因為目前的浏覽器對於選擇器a(即超級鏈接), 默認text-decoration屬性值為underline. 這就會使很多你不希望出現的下劃線大量湧現, 而且由於無法約束下劃線的粗細, 以及浏覽器之間的差異, 甚至會出現各種粗細, 不同浏覽器顯示不同的下劃線.
例:你可以看到本站文章內的超級鏈接的文本修飾是點劃線, 這個效果不是屬性text-decoration所能實現的, 其需要下邊框屬性的支持, 將會在邊框屬性時說明. 實現方法如下(請查看本站css代碼):
1.在全局聲明中將選擇器a的text-decoration屬性值設為none, 代碼如下:
a {
color: #545454;
text-decoration:none;
}
2.為使文章正文部分的超級鏈接顯示藍色點劃線的效果,代碼如下(讀者目前只需了解,目前暫不說明):
.post_body a{
color:#0061CA;
padding:0;
border-bottom:1px dotted #0061CA;
}
4. text-transform: 這個屬性可能大家不太熟悉, 因為這個屬性是只為英文服務的, 用於轉換字母大小寫之用. 其包括首字母大寫, 大寫, 小寫和無變化四種屬性值, 代碼如下:
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
例:如果你再本站留過言, 而且用的是英文名的話, 你就會發現無論你輸入的姓名是有沒有將首字母大寫, 顯示評論者姓名時首字母均被轉化為大寫, 查看本站css代碼如下:
.comment_author {
text-transform:capitalize;
}
1 2 3 4 下一頁
上次主要說明了css對於顏色和文本屬性的控制, 這次介紹css對於字體, 背景等屬性的控制.
字體(Font):css控制的字體屬性包括font-family, font-style, font-variant, font-weight, font-size.
1.font-family: 由字體名(family-names)和字組名(generic families)兩個部分組成.首先來看個實例,例:查看Jorux.com首頁的css文件,可以看到以下代碼:
body {
font: normal 12px/1.5 Georgia, sans-serif;
text-align:left;
background:#444 url(images/bodybg.jpg) repeat-y;
}
藍色加亮部分就是font的屬性值, 這種寫法為簡寫, 可將其還原為:
font-weight: normal;
font-size: 12px;
line-height: 1.5;
font-family: Georgia, sans-serif;
行高(line-height)其實並不屬於font屬性, 但可以在簡寫時歸入font屬性值內. 現在我們先只看最後一行font-family的部分. “Georgia“即為字體名(有simhei, arial, verdana等), “sans-serif“即為字組名(包括襯線字體(Serif), 非襯線字體(Sans-Serif) 和等寬字體(MonoSpace)三種).
由於Windows自帶的漢字字體極為有限. 但一般中文Windows系統都支持宋體(默認, SimSun)和黑體(SimHei)和楷體(kaiti_gb2312). 我們來看看這幾種漢字字體(要注意這幾種字體名, 楷體的英文字體名為kaiti_gb2312, Firefox對漢字字體支持不良):
宋體 楷體 黑體 默認
中國人看到西方字體名可能會比較迷惑, 但就如同學習英文時所遇到的英文名一樣, 一些常用的字體名的表現和拼寫必須要掌握, 對於中文學習者, 目前只推薦掌握以下幾種英文字體:
Arial Verdana Georgia Courier
這幾種字體的一般用法如下:
1. Arial: 是目前最為流行的正文字體, 幾乎所有的web2.0站點(如Google, Flickr, Wikipedia等)都使用arial字體作為正文甚至是標題的字體. 特點是親和力比較強, 閱讀起來不易疲勞;
2. Verdana: 是1996年微軟邀請頂級字體設計師花了兩年時間出品的字體, 免費提供給windows用戶. 和arial用法比較相似, 是目前使用最為廣泛的字體, 幾乎能在任何地方看到;
3. Georgia: 這個後起之秀, 由於其花哨的襯線(後說明), 被很多網頁設計師所青睐, 逐漸取代了Times New Roman在serif字組中的核心地位. 本網站的標題也使用的是Georgia字體.
4. Courier: 隸屬於Monospace字組, 由於其字母的寬度均一, 一般用於對單詞長度控制比較嚴格的地方, 比如網頁導航條和報紙(印刷品).
英文有那麼多字體, 但都隸屬於serif, sans-serif和monospace三種字組. 由於英文本身的特點, 不同於方塊字(漢字), 英文字母的寬度是不相等的, 這就給出版業如報紙的排版工作增加了難度, 於是發明了等寬字體(monospace).
字組及字體關系圖如下:
現在有必要解釋一下serif和sans-serif的區別. “sans”來源於古法語, 意為”without”, 即”非”. 而”serif”來源於荷蘭語, 譯為襯線, 指字母的拐角或端點位置的修飾線, 如圖所示:
所以非等寬字組又分為有襯線(serif)和無襯線(sans-serif)兩組. verdana和arial均屬於無襯線組.
對於字組和字體的選擇, 其實是很個性化的, 讀者可以根據自己的喜好, 靈活搭配, 但總的原則是不要選取一些罕見的字體, 如果訪問者沒有這種字體的話,就會和你的設計意圖相悖.
例:如font-family的屬性值如下:
font-family: verdana,arial,sans-serif;
浏覽器首先在字體庫中尋找verdana字體, 如果沒找到則尋找arial字體, 如果還沒找到就在sans-serif字組中的選擇其他字體顯示.
2. font-style: 包括normal, italic和oblique三個屬性值. css代碼如下:
font-s
tye:normal;
font-stye:italic;
font-stye:oblique;
表現如下:
normal italic oblique
可以看到italic和oblique都是向右傾斜的文字, 但區別在於Italic是指斜體字，而Oblique是傾斜的文字，對於沒有斜體的字體應該使用Oblique屬性值來實現傾斜的文字效果。主要用於一些需要區別於正文的備注說明文字.
3. font-variant: 包括normal和small-caps兩種屬性值. 非英文用戶可能很少用到這個屬性. small-caps是指小型大寫字母, 是介於大寫字母和小寫字母之間的一種字母表現形式, css代碼如下:
font-variant: normal;
font-variant: small-caps;
表現如下:
NORMAL small-caps
可以看到小型大寫字母比正常的大寫字母要矮一截, 需要注意的是, 要實現此效果, html中的中必須使用小寫字母, 在css中用font-variant:small-caps;就能自動轉化為小型大寫, 否則就會顯示為正常的大寫字母.
4. font-weight: 包括normal和bold兩種屬性值. blod屬性值即指粗體. css代碼如下:
font-weight: normal;
font-weight: bold;
表現如下:
normal bold
5. font-size: 用於控制字體大小的屬性, 屬性值的單位主要有px, pt, cm, mm, %, em, 其中pt, cm, mm為字體絕對大小單位,px, %, em為相對大小單位. 這兩種單位各有裨益, 絕對大小單位的優勢在於, 不管用戶的浏覽器設置如何, 均能保持原有的設計樣式, 但對於一些有閱讀障礙, 習慣於大字體的用戶就顯得有點死板. 而相對大小單位雖然在可讀性上有優勢, 但網頁界面容易被增大的字體所沖散.
在這裡, 限於篇幅就不再解釋每個單位的區別和用法. 可以參考Length units.
這裡只是強調一點, 如果你的網頁主要是在電腦屏幕上顯示, 首推px作為你的首選單位, 因為px能夠精確地表示元素在屏幕中的位置和大小. 如果你的網頁主要用於打印, 則推薦使用絕對單位pt(1pt=1/72英寸)來作為首選單位, 這是因為不管屏幕的分辨率是多少, 打印出來的大小都是一樣的.
Summary: 現在總結一下font的屬性, 如果想讓”Font Property”表現為32px, 行高為150%, 粗體, 斜體, 字體為Georgia, 字組為serif, 代碼如下:
font-size: 32px;
line-height: 1.5;
font-style: italic;
font-weight: bold;
font-family: Georgia, serif;
簡寫為:
font: italic bold 32px/1.5 Georgia,serif;
表現如下:
Font Property
背景(background): 包括background-color, background-image, background-repeat, background-attachment, background-position五種屬性.
1. background-color: 指背景顏色, 其屬性值有三種形式, 十六進制, 顏色名稱, rgb值. 目前最為常用的是”#+十六進制數”. 例: 本站顯示代碼的段落背景為#EEEEEE的灰色, 代碼及示例如下:
background-color: #EEEEEE;
2. background-image: 指背景圖片, 其屬性值為背景圖片的地址, 代碼和格式如下:
background-image: url(http://jorux.com/back.png);
例: 本站首頁的第一篇文章標題前有個”NEW”圖標, 查看css可見如下代碼:
#homeheadline a{
color:#444;
padding: 30px 68px 0 40px;
margin:0;
background:url(images/new.png) no-repeat 0 16px ;
}
3. background-repeat: 指背景圖片的重復與否以及重復方式, 有no-repeat, repeat, repeat-x, repeat-y四種屬性值.
no-repeat: 即無論背景圖片的大小, 只顯示單個背景圖片, 如首頁的第一篇文章標題前的”NEW”圖標, 代碼如上所示;
repeat: 指背景圖片橫向和縱向重復連續顯示;
repeat-x: 指背景圖片橫向重復連續顯示;
repeat-y 指背景圖片縱向重復連續顯示;例: 查看本站css文件,可以看到以下代碼:
body {
font: normal 12px/1.5 Georgia, sans-serif;
text-align:left;
background:#444 url(images/bodybg.jpg) repeat-y;
}
可以看到背景圖片bodybg.jpg是縱向重復顯示的, 並隨頁面的長度的增加而增加.
4. background-attachment: 指背景圖片的附著方式, 有scroll(默認屬性)和fixed兩種屬性值. scroll指背景圖片隨頁面的滾動而滾動, 而fixed屬性值則可使背景圖片固定於浏覽器的某個位置, 不隨頁面滾動而滾動. 如下例所示, 您可以試著滾動本頁面來看看兩圖的差別, 左邊為scroll, 右邊為fixed(請用IE觀看以下演示):
X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X XX X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X
5.background-position: 指背景圖片的位置屬性. 屬性值可以有百分比, 位置名稱和具體數值三種形式, 如下圖所示(藍色部分表示距離左邊框的數據, 黑色部分表示距離上邊框的數據):
可以看到, 要使背景圖片位於左上角有三種方法, 代碼如下:
background-position: 0% 0%;
background-position: top left;
background-position: 0 0;
實際上, 不聲明此屬性, 即默認背景圖片為左上角顯示. 值得注意的是, 當用屬性值為位置名稱時, 先寫距離上邊框的數據(top), 後寫距離左邊框的數據(left). 而當用百分比或是具體數值表示時, 則反過來寫.請讀者仔細看看上圖的藍色和黑色部分的順序.
不要小看這個屬性, 在導航條的制作中, 這個屬性將是實現一些動態變化的關鍵手段(將在以後的實例篇中說明).
Summary: 現在總結一下background的屬性, 如果想讓某背景圖片表現為固定, 位於右上角, 不重復, 背景顏色為#CCC, 代碼如下:
background-image: url(http://static.flickr.com/86/240223091_dc1dce25a5_m.jpg);
background-color: #CCC;
background-attachment: fixed;
background-position: top right;
background-repeat: no-repeat;
簡寫為:
background: url(http://static.flickr.com/86/240223091_dc1dce25a5_m.jpg) #CCC fixed no-repeat top right;
表現如下(請用IE觀看以下演示):
X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X
上一頁 1 2 3 4 下一頁
本篇主要介紹css對邊框(border)的屬性控制和鏈接(link)的偽類選擇器.
邊框(border): css控制的邊框屬性包括border-width, border-color, border-style.
Border之所以讓人很困惑主要源於IE5錯綜復雜的BUG, 由於IE5是一個”will soon be dead“ 的浏覽器, 這裡只例舉一個最為知名的關於border-width的BUG, 讓大家更好的理解border的含義, 先看下圖:
如上圖所示, 對象A(白色矩形)周圍有藍色邊框B, 可以看出A的實際寬度為ef, 而IE5不這麼認為, 它把cd的長度定義為對象A的寬度, 這個bug在邊框的寬度小時幾乎察覺不到, 但在邊框與對象寬度相差不大時顯得尤為明顯.
現在, 結合以上說明, 可以看出border是獨立於對象之外, 位於magin與padding之間(後說明), 具有固定寬度, 顏色和樣式的區域.
1. border-width: 其可有具體數值(如1px, 2px等)或是描述性(thin, medium, thick)的屬性值. 由於浏覽器及個人設置的不同導致thin, medium, thick這些屬性值的表現不一, 不推薦使用. css代碼如下:
border-width: 1px;
border-width: 2px;
border-width: thin;
border-width: medium;
border-width: thick;
寬度效果如下(注意不同浏覽器下的區別):
1px 2px thin medium thick
2. border-style: 邊框樣式包括solid, dashed, dotted, double, groove, ridge, inset, outset等, 代碼如下:
border-style: solid;
border-style: dashed;
border-style: dotted;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
樣式效果如下(你可能需要Firefox或是Opera才能看到後四種效果):
solid
dashed
dotted
double
groove
ridge
inset
outset
3. border-color: 邊框顏色屬性和一般顏色屬性是一樣的, 可以參看屬性篇(1).
Summary: 以上例舉的都是四邊相同樣式的情況, 其實可以分別設置border-top, border-right, border-bottom, border-left四邊的屬性, 比方說想要表現一個寬2px, 藍色(blue), 樣式為solid的上下邊框, 代碼如下:
border-top-width: 2px;
border-top-color: blue;
border-top-style: solid;
border-bottom-width: 2px;
border-bottom-color: blue;
border-bottom-style: solid;
簡寫為:
border-top: blue 2px solid;
border-bottom: blue 2px solid;
表現如下:
寬2px, 藍色, 樣式為solid的上下邊框
以下內容不再屬於css屬性, 但暫時歸入屬性篇中.
鏈接(link): 在html裡用<a></a>標明鏈接, 在css裡用a作為鏈接的選擇器名.
css的缺點和它的優點一樣明顯, 其最大的缺陷就在於網頁的動態表現不足, 在這一點上和Flash差距尤為突出.
好在css還是留了一手, 那就是鏈接的偽類選擇器, 所謂偽類就是指依賴於浏覽器或是用戶的狀態. 對於鏈接來講, 存在link, hover, visited, active四種狀態, 即四種偽類選擇器: a:link(存在鏈接, 但無鼠標動作), a:visited(被點擊或訪問過), a:hover(鼠標懸停於鏈接上時的狀態), a:active(鼠標點擊與釋放之間的狀態).
css便是以這幾個偽類選擇器實現了其為數不多的動態效果. 目前最為常用的就是導航條和按鈕的動態顯示. 以下用一個動態按鈕的實例來說明這四個偽類選擇器.
1. 首先准備一副圖片(button.png), 如下圖(160px*240px), 其由四幅160px*60px的小圖自上而下排列而成.
2. 接著需要往你的本地調試文件夾(調試環境的建立方法參考屬性(1)中的說明)的index.htm中寫入html代碼, 如下:
<div id=”button”><a href=”#”></a></div>
3. 在style.css中寫入以下代碼:
body {background-color: #FFF;}
#button a{
width:160px;
height:60px;
display:block;
background:url(../image/button.png) no-repeat 0 0;
}
#button a:link { background-position:0 0;}
#button a:hover { background-position:0 -60px;}
#button a:active { background-position:0 -120px;}
#button a:visited { background-position:0 -180px;}
可以看到如Example2的效果.
4. 代碼解釋:
<div id=”button”><a href=”#”></a></div>
在index.htm寫入如上代碼, 目的在於插入一個id名為”button”的盒子(div),且其內含有一個鏈接<a href=”#”></a>.
#button a{
width:160px;
height:60px;
display:block;
background:url(../image/button.png) no-repeat 0 0;
}
在css文件中寫入以上代碼, 目的在於控制盒子中鏈接的表現, 通過名為”#button a”的選擇器來實現. 鏈接的寬高為160px*60px, 背景為圖片button.png.
在這強調一下display:block的作用.
由於在html文件中,鏈接<a href=”#”> </a>中沒有任何的內容(content)填充, 如果沒有聲明”display:block”, 那麼即使聲明了選擇器”#button a”的寬高, 浏覽器也會因為html文件中沒有內容而無法顯示鏈接. 所以”display:block”在這裡的作用就在於強制浏覽器顯示沒有內容填充的鏈接.
#button a:link { background-position:0 0;}
用偽類選擇器a:link聲明鏈接的背景圖片在左上角顯示, 即距離左邊和頂邊分別0, 0. 但由於已經在選擇器 “#button a”中聲明了圖片位置, 此代碼可有可無.
#button a:hover { background-position:0 -60px;}
#button a:active { background-position:0 -120px;}
#button a:visited { background-position:0 -180px;}
用偽類選擇器a:hover聲明鼠標懸停時, 背景圖片上移60px, 而使排在第二位的綠色小圖片顯示出來;
用偽類選擇器a:active聲明在鼠標點擊與釋放之間的狀態時, 背景圖片上移120px, 而使排在第三位的紅色小圖片顯示;
用偽類選擇器a:visited聲明在鏈接被點擊或訪問過時, 背景圖片上移180px, 而使排在第四位的灰色小圖片顯示;
現在你基本了解了css動態按鈕的制作過程, 但以上css代碼還存在一個嚴重的缺陷, 相信你會很快發現問題所在——這個按鈕居然是一個”一次性按鈕“, 也就是說這個按鈕在點擊第一次後, 就一直顯示那個灰色小圖片, 你能想出解決方法嗎? 請在留言中指出.
答案會在下一篇文章中說明! 下篇將會涉及css的核心內容——盒子模型, margin和padding屬性.
上一頁 1 2 3 4 下一頁
本文作為屬性篇的最後一篇文章, 將講述HTML和CSS的關鍵—盒子模型(Box model). 理解Box model的關鍵便是margin和padding屬性, 而正確理解這兩個屬性也是學習用css布局的關鍵.
注: 為什麼不翻譯margin和padding? 原因一, 在漢語中並沒有與之相對應的詞語; 原因二: 即使有這樣的詞語, 由於在編寫css代碼時, 必須使用margin和padding, 如果我們總用漢語詞語代替其來解釋的話, 到了實際應用時容易混淆margin和padding的概念.
如果有一點Html基礎的話, 就應該了解一些基本元素(Element), 如p, h1~h6, br, div, li, ul, img等. 如果將這些元素細分, 又可以分別歸為頂級(top-level)元素,塊級(block-level)元素和內聯(inline)元素.
1. Block-level element: 指能夠獨立存在, 一般的塊級元素之間以換行(如一個段落結束後另起一行)分隔. 常用的塊級元素包括: p, h1~h6, div, ul等;
2. Inline element: 指依附其他塊級元素存在, 緊接於被聯元素之間顯示, 而不換行. 常用的內聯元素包括: img, span, li, br等;
3. Top-level element: 包括html, body, frameset, 表現如Block-level element, 屬於高級塊級元素.
塊級元素是構成一個html的主要和關鍵元素, 而任意一個塊級元素均可以用Box model來解釋說明.
Box Model: 任意一個塊級元素均由content(內容), padding, background(包括背景顏色和圖片), border(邊框), margin五個部分組成. 立體圖如下(Fig. 1):
該立體圖引自:http://www.hicksdesign.co.uk/ (Under the Creative Commons License)
平面圖如下(Fig. 2):
根據以上兩圖, 相信大家對於Box model會有個直觀的認識.
以下說明margin和padding屬性:
1. Margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制塊級元素之間的距離, 它們是透明不可見的, 對於Fig. 2所示的上右下左margin值均為40px, 因此代碼為:
margin-top: 40px;
margin-right: 40px;
margin-bottom: 40px;
margin-left: 40px;
根據上, 右, 下, 左的順時針規則, 簡寫為
margin: 40px 40px 40px 40px;
為便於記憶, 請參考下圖:
當上下, 左右margin值分別一致, 可簡寫為:
margin: 40px 40px;
前一個40px代表上下margin值, 後一個40px代表左右margin值.
當上下左右margin值均一致, 可簡寫為:
margin: 40px;
2. Padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制塊級元素內部, content與border之間的距離, 其代碼, 簡寫請參考margin屬性的寫法.
至此, 我們已經基本了解margin和padding屬性的基本用法. 但是, 在實際應用中, 卻總是發生一些讓你琢磨不透的事, 而它們又或多或少的與margin有關.
注: 當你想讓兩個元素的content在垂直方向(vertically)分隔時, 既可以選擇padding-top/bottom, 也可以選擇margin-top/bottom, 再此Jorux建議你盡量使用padding-top/bottom來達到你的目的, 這是因為css中存在Collapsing margins(折疊的margins)的現象.
Collapsing margins: margins折疊現象只存在於臨近或有從屬關系的元素, 垂直方向的margin中. 文字說明可能讓人費解, 下面用一個例子說明margin-collapsing現象.
例: 在html文件的<body></body>之間寫入如下代碼:
<div id=”ID1″>
<h1 id=”ID2″>Margins of ID1 and ID2 collapse vertically.<br/>元素ID1與ID2的margins在垂直方向折疊.</h1>
</div>
在與其外聯的css文件中寫入:
* {
padding:0;
margin:0;
}
#ID1 {
background-color: #333;
color: #FFF;
margin-top: 10px;
margin-bottom: 10px;
}
#ID2 {
font: normal 14px/1.5 Verdana, sans-serif;
margin-top: 30px;
margin-bottom: 30px;
border: 1px solid #F00;
}
代碼解釋:
1. 在html寫入的代碼表示, 在html中插入id分別為ID1和ID2的兩個塊級元素div, h1;
2. *{padding:0; margin:0;}: 使浏覽器默認的元素padding和margin值均歸零;
3. #ID1{…}: 使id為ID1的元素div的背景顏色為#333, 字體顏色為#FFF, margin-top/bottom為10px;
4. #ID2{…}: 使id為ID2的元素h1的字體大小為14px, verdana字體, 行高為字體高的150%, 正常粗細. margin-top/bottom為30px, 邊框為1px寬, 紅色實線.
依據以上解釋, 我們應該得到如下效果(Fig. 3):
即ID1的margin-top/bottom=ab=ef=10px;
ID2的margin-top/bottom=bc=de=30px;
但用浏覽器打開html文件, 卻得到Example4的效果, 如下圖(Fig. 4):
即ab=cd=30px, ID1的margin-top/bottom=10px被折疊了, 而且ID1應有的margin黑色背景也一同被折疊消失了.
為什麼會折疊: 造成以上現象的原因是, 我們在css中並沒有聲明id為ID1的元素div的height(高), 因此它的高便被設為auto(自動)了. 一旦其值被設為auto, 那麼浏覽器就會認為它的高為子元素ID2的border-top到border-bottom之間的距離, 即Fig. 4中bc的長度, 所以子元素ID2的margin-top/bottom(30px)就伸出到了父元素ID1之外, 出現了Fig. 4中ab與cd之間的空白區域. 因此父元素ID1的margin-top/bottom因子元素的”紅杏出牆”而被折疊消失了.
如何解決折疊問題: 可能大家最初想到的辦法就是根據折疊發生的原因—auto, 來解決問題. 但是, 在實際操作中, 某些元素如div, h1, p等, 我們是不可能預先知道它的高是多少的, 因此在css文件中是不能常規通過聲明元素的高來解決折疊問題.
我們需要在css文件中加入如下代碼(紅色部分):
#ID1 {
background-color: #333;
color: #FFF;
margin-top: 10px;
margin-bottom: 10px;
padding-top:1px;
padding-bottom:1px;
}
或是：
#ID1 {
background-color: #333;
color: #FFF;
margin-top: 10px;
margin-bottom: 10px;
border-top:1px solid #333;
border-bottom:1px solid #333;
}
通過增加以上代碼, 便可使浏覽器重新計算ID1的高, 使其為子元素ID2的margin-top/bottom外緣(outer top/bottom)之間的距離, 即Fig. 3中be的距離.
看得是不是有點迷糊, 折疊問題難度比較大, 它也曾是困擾我多時的難題, 加之本人的敘述說明能力不足, 更加大了大家學習的難度, 在此Jorux深表歉意.
為檢驗大家學習折疊問題的效果, 給讀者留下一個問題:
html文件代碼為(請將css地址改為你的css文件存放地址):
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>My first homepage</title>
<link rel=”stylesheet” href=”….css” type=”text/css” media=”screen” />
</head>
<body>
<h1 id=”title”>
A title</h1>
<div id=”content”>
Some text here </div>
</body>
</html>
外聯css文件代碼為:
*{
padding:0;
margin:0;
}
body {
font: 14px/1.5 Georgia, serif;
}
h1#title {
float: right;
width: 50%;
font: 14px/1.5 Georgia, serif;
margin-top: 0;
background-color: #F00;
color: #fff;
}
div#content {
background-color: #333;
color: #FFF;
margin-top: 30px;
border: 1px solid #333;
}
請將此代碼存為css文件, 並與以上html文件關聯, 得到如Example5的效果, 請分別用IE與Firefox浏覽, 效果不盡相同, IE下的效果是我們想要的, 但用Firefox浏覽卻發現元素h1嵌入到元素div中, 你能解決這個Firefox不能正常顯示的問題嗎? 如果可以, 能和剛剛學過的折疊現象聯系起來嗎? 請在留言給出你的答案!
- 上一頁:css網頁設計技巧
- 下一頁:div中class與id的區別及應用