字體屬性 1、font-family ×能：用於改變HTML標誌或元素的字體，你可設置一個可用字體清單。瀏覽器由前向後選用字體。 語×：{font-family:字體1,字體2, ... ,字體n} 2、font-style ×能：使文本顯示爲扁斜體或斜體等表示強調 。 數值： normal - 正常 italic - 斜體 oblique - 偏斜體 3、font-variant ×能：用於在正常與小型大寫字母字體間切換。 數值：normal - 如果該標誌繼承父元素的 small-caps 設置，則關鍵字 normal 將 font-variant 設置爲正常字體。 small-caps - 把小寫字母顯示爲字體較小的大寫字母。 4、font-weight ×能：用於設置字體灰度，生成字體的深，淺版本。 數值： 正常灰度 - normal 相對灰度 - bold, bolder, light, lighter 梯度灰度 - 取值如下：100, 200, 300, 400(相當於normal), 500, 600, 700(相當於bold), 800, 900。 5、font-size ×能：用各種度量單位控制文本字體大小。 數值：有四種數值方式 絕對尺寸- 用具體字號表定義字體大小，可以取下列數值之一：xx - small, x-small, small, medium, large, x-large, xx-large。不同字體有不同的數值。 相對尺寸 - larger, smaller，產生的尺寸是相對於父容器字號而言的。 長度 - 用毫米(mm)，釐米(cm)，英寸(in)，點數(pt)，象素(px)，pica(pc)，ex(小寫字母x的高度)或em(字體高度)作爲度量單位。 百分比 - 相對於其父元素字體大小的百分比。 6、font ×能：簡寫屬性，提供了對字體所有屬性進行設置的快捷方×。 語×：{font:字體屬性1 字體屬性2 ... 字體屬性n} 數值：字體屬性值爲前面已列出的值，此外還可以設置行間距屬性 line-height(見文本屬性)，內容的順序爲：font-style; font-variant; font-weight; font-size; line-height; font-family。可省略部分屬性，屬性值間用空格分開。 例子： 讓字體美起來 你可能正建立自己在網上的家-WEB頁，又或者它已經被你安置在網絡某一角里。無論出於什麼目的,你都希望有更多的指導,告訴你該如何更好的佈置家。 在目前許多的指導中，他們都在訴說，應該加一點聲音或者一個說話的場地。的確我們都需要它，但我希望關心更多WEB家裏底層的東西，比如如何把字體弄的漂亮些，或者讓頁面顏色變的活潑些，讓訪問者增加“看欲”，還有更多你曾經都沒有關注的細微之處。今天，我們首先來探討頁面的字體。 一、html中定義字體 字體的確是很好打交道的，一開始製作頁面，它就以默認的樣式顯示。隨着逐步的深入，你會改變一下默認的設置，增大或者減小字體。 一般字體默認的標籤格式：＜p＞田濤＜/p＞ 接下來，我們把字體設置爲黑體或者宋體字樣式，它的標籤如下： ＜p＞＜font face="黑體"＞田濤＜/font＞＜/p＞ 在以上格式裏，我們引出了字體的標籤元素＜font＞＜/font＞.該標籤具有下面三個屬性值： size="..." 設置字體的大小，一般從1到7，它的默認值是+3，每次改變字體都是+3或者-3。 color="..." 字體顏色的設置。定義顏色可以利用RGB的16進制值，比如： color=“#ffffff” 。也可以直接利用顏色英文來定義，比如： color=“white” face="..." 字體樣式的設置，比如：face=“黑體”。或者 face=“黑體，宋體”。後者的格式，每當瀏覽器訪問第一種字體失敗後，瀏覽器就會訪問第二種字體，依此類推。 下面是一個完整的字體格式： ＜font face="黑體" size="2" color="#FFFFFF"＞田濤＜/font＞ HTML還提供了以下字體樣式標籤： 1.六個標題樣式 從h1到h6，如：＜h1＞＜font face="黑體" size="2"＞田濤＜/font＞＜/h1＞ 2.字體風格 斜體字：＜em＞田濤＜/em＞ 粗體字：＜strong＞田濤＜/strong＞ 斜體+粗體字：＜strong＞＜em＞田濤＜/em＞＜/strong＞ 3.定義文本 定義大字體 ＜big＞田濤＜/big＞ 定義小字體 ＜small＞田濤＜/small＞或者＜small＞＜small＞＜small＞田濤＜/small＞＜/small＞＜/small＞ 如果你在字體標籤中設置了size="...",那麼＜big＞標籤將不起作用。 除了以上常用字體標籤元素外，HTML還包含很多其它標籤，但不我們不多用。 二.CSS(層疊樣式表)改變字體 在過去頁面上的字體是一成不變的，靜靜的呆在那。當DHTML(動態網頁)出現後，我們能有更多方式控制字體了。一般來說，動態字體的實現核心是CSS(層疊樣式表)加JavaScript。使用了以上兩項技術後，字體就能產生許多變化。 1.CSS定義字體的標籤元素 font-family: 設置字體字族。 ＜span style="font-family: 黑體, 宋體(GB)"＞田濤＜/span＞ font-sytle:設置字體類型。 ＜span style="font-style: normal"＞田濤＜/span＞ font-weight:設置字體的字重。 ＜span style="font-weight: bold"＞田濤＜/span＞ font-size:設置字體大小。 ＜span style="font-size: 14pt"＞田濤＜/span＞ font-decoration:修飾文本字體，比如帶下劃線“underline”。 ＜span style="text-decoration: underline"＞田濤＜/span＞ 對於以上的字體設置，我們可以採用一個方便的方×： ＜span style="font:normal bold 14pt 黑體"＞田濤＜/span＞ 在style定義的次序是：font-style,font-weight,font-size,font-family. 2.CSS定義字體和＜font＞定義字體的衝突 對於CSS定義字體和＜font＞定義字體，我們都要注意以下問題，比如有以下字體設置： ＜span style="font-family: 宋體(KSC); font-size: 200pt"＞＜font＞田濤＜/font＞＜/span＞ 這時侯字體大小將以font-size: 200pt的定義來設置。但如果你在＜font＞中加入size屬性，比如： ＜span style="font-family: 宋體(KSC); font-size: 200pt"＞＜font size="5"＞田濤＜/font＞＜/span＞ 這時侯，字體的大小以size的設置爲準，font-size: 200pt將不起作用。其它的屬性也是一樣。如果你無需動態字體，就利用HTML4.0的＜font＞來定義字體，需要動態字體時，就需要使用CSS和JavaScritp來定義字體及引發事件。 3.定義CSS字體屬性類 一般我們在製作動態字體時，我們會首先利用CSS定義出頁面字體的整個屬性，然後在頁面中引用，而不用對每段文本進行設置，這也是實現動態字體首先一步。 ＜html＞ ＜head＞ ＜style type="text/css"＞ .tt2 { font-family:"黑體"; font-size: 16px; font-style: normal; line-height: 17px } ＜/style＞ ＜/head＞ ＜body＞ ＜p class="tt2"＞田濤＜/p＞ ＜/body＞ ＜/html＞ 在以上代碼中，“田濤”兩個字引用了.main_2類定義的字體樣式。當然你可以在＜style＞＜/style＞中定義不同的字體樣式，以便頁面中根據不同字體加以引用。比如： ＜html＞ ＜head＞ ＜style type="text/css"＞ .tt1 { font-family:"宋體"; font-size: 15px; font-style: normal; } .tt2 { font-family:"黑體"; font-size: 16px; font-style: normal; } ＜/style＞ ＜/head＞ ＜body＞ ＜p class="tt1"＞田濤＜/p＞ ＜p class="tt2"＞田濤＜/p＞ ＜/body＞ ＜/html＞ 三.讓字體動起來 要讓字體動起來，我們可以利用本身CSS的事件或者讓JavaScript引發事件。 1.CSS引發事件 例一 ＜html＞ ＜head＞ ＜style type="text/css"＞ ＜!-- a:link { color: black; text-decoration: none} a:visited { color: white; text-decoration: none} a:hover { color: blue; text-decoration: underline} --＞ ＜/style＞ ＜/head＞ ＜body＞ ＜p＞＜a href="http://zgrtt.yeah.net/"＞田濤＜/a＞＜/p＞ ＜/body＞ ＜/html＞ link定義的是鏈接在頁面顯示的顏色(黑色)及鏈接沒有下劃線，visited定義的是單擊鏈接後的顏色(白色)，hover定義的是指向鏈接時的動態顏色。以上實例表示，當指向鏈接“田濤”後字體顏色從黑色變成藍色，並加下劃線，單擊鏈接後，鏈接顏色變成白色。 例二 ＜html＞ ＜head＞ ＜title＞＜/title＞ ＜/head＞ ＜body＞ ＜p οnmοuseοver="this.style.fontSize=200" οnmοuseοut="this.style.fontSize=100"＞田濤 ＜/p＞ ＜/body＞ ＜/html＞ 以上實例是利用內聯改變字體樣式，當鼠標指向“田濤”時字體因爲定義了this.style.fontSize=200，這兩個字放大至200pt,當鼠標移開“田濤”時，因定義了this.style.fontSize=100，這兩個字體縮小到100pt. 2.JavaScript引發事件 ＜html＞ ＜head＞ ＜style＞ H1.italic {font-style:italic} H1.bold {font-style:bold; } ＜/style＞ ＜/head＞ ＜body＞ ＜script language="JavaScript"＞ function changeHead() { if (H1_1.className=="bold") { H1_1.className="italic" } else { H1_1.className="bold";} } ＜/script＞ ＜h1 id="H1_1" class="bold" οnmοuseοver="changeHead()" οnmοuseοut="changeHead()"＞田濤 ＜/h1＞ ＜/body＞ ＜/html＞ 在上面的實例當中，我們首先定義了兩個CSS類H1.italic和H1.bold，然後利用JavaScript腳本定義函數 changeHead(),最後在需要的地方引發事件執行定義好的函數。這裏我們引發了兩個單擊事件onmouseover和onmouseout。在這裏我還要說一點，因爲你定義了H1兩個類H1.italic 和H1.bold，所以當你在引用時，要首先設置class="bold"，表示字體以bold樣式出現。然後，移動鼠標到“田濤”上，觸發了事件一，移開“田濤”時，觸發了事件二。 對於動態字體，我們還有很多方×來完善它。只是在考慮利用動態字體時，需要了解不同瀏覽器會產生不一樣的結果。這時侯，就需要不停測試，來找到一個兩全其美的方×。最後，希望你在看完這篇文章後，找一點CSS及JavaScript的資料來看，因爲它們纔是實現所有“夢想”的工具。 |
| CSS應用小技巧十四例 CSS是Cascading Style Sheets的簡稱，中文譯作“層疊樣式表單”，我把它叫作“層疊樣式表”，我感到這樣順口一點，沒別的意思。實際上它是一組樣式。你可能對CSS這個名詞比較陌生，實際上無論你用Internet Explorer還是Netscape Navigator在網上衝浪，幾乎隨時都在與CSS打交道，在網上沒有使用過CSS的網頁可能不好找。不管你用什麼工具軟件製作網頁，都有在有意無意地使用CSS。用好CSS能使你的網頁更加簡煉，爲什麼同樣內容的網頁，有的人做出來有幾十KB，而高手做出來只有十幾KB，CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小經驗以及一些網友來信提問的問題整理出來，供諸位參考。 1、CSS在網頁製作中一般有三種方式的用×，那麼具體在使用時該採用哪種用×？ 當有多個網頁要用到的CSS，採用外連CSS文件的方式，這樣網頁的代碼大大減少，修改起來非常方便；只在單個網頁中使用的CSS，採用文檔頭部方式；只有在一個網頁一、兩個地方纔用到的CSS，採用行內插入方式。 2、CSS的三種用×在一個網頁中要以混用嗎？ 三種用×可以混用，且不會造成混亂。這就是它爲什麼稱之爲“層疊樣式表”的原因，瀏覽器在顯示網頁時是這樣處理的：先檢查有沒有行內插入式CSS，有就執行了，針對本句的其它CSS就不去管它了；其次檢查頭部方式的CSS，有就執行了；在前兩者都沒有的情況下再檢查外連文件方式的CSS。因此可看出，三種CSS的執行優先級是：行內插入式、頭部方式、外連文件方式。 3、在Dreamweaver3中如何使外部文件式CSS？ 在Dreamweaver3中使用外連文件式CSS並沒有特殊要求，同樣是用記事本創建一個*.css文件，在網頁的〈head〉與〈/head〉之間加上一句這樣的代碼：〈link rel="stylesheet" href="在這裏填上你的CSS文件地址（相對路徑+文件名）" type="text/css"〉 就行了。 4、如何用Dreamweaver3快速創建CSS外連式文件？ 對於一個初接觸CSS的網頁設計人員來講，要用記?嗟謀嗉鰨ゴ脣ㄒ桓鯟SS外連式文件是相當困難的。由於Dreamweaver3對CSS支持的很好，用它來幫助就輕鬆多了。具體可以這樣*作： 1）先在紙上寫好在網站的網頁中可能要用到的格名稱，然後在Dreamweaver3的編輯窗中調出CSS面板，一個一個地定義，並在一個空白頁上適當地寫一點相關內容，邊定義邊試用，效果不滿意，立即修改； 2）全部定義好後，再用記事本創建一個空的CSS外連式文件，把在〈head〉與〈/head〉之間的那段定義好的CSS複製到CSS文件中去，就大×告成了。整個過程就是點鼠標，方便吧？ 5、在Dreamweaver3中採用行內插入式CSS要手動寫代碼嗎？ 不用！先用CSS面板定義好要用的CSS，然後，在要插入CSS的標記插入：style=""，再把你剛纔定義的CSS從〈head〉後面拖到這個雙引號中來，把花括號以外的部分刪去就行了。 6、在方檔頭部方式和外連文件方式的CSS中都有“〈!--”和“--〉”，好象沒什麼用，不要可以嗎？ 這一對東東的作用是爲了不引起低版本瀏覽器的錯誤。如果某個執行此頁面的瀏覽器不支持CSS，它將忽略其中的內容。雖然現在使用不支持CSS瀏覽器的人已很少了，由於互聯網上幾乎什麼可能都會發生，所以還是留着爲妙。 7、如何給一部分文字加背景色？ 給文字加上不同顏色，在DW3中只要在屬性面板上選取文字的顏色就行了，非常方便，但要給部分文字加不同的背景色卻沒有相應的×能，我們可以先做一個定義背景色的CSS（如：bgstyle），在DW3中點幾下鼠就完成了。如一個定義淡黃色背景的CSS是這樣的： 〈style type="text/css"〉 〈!-- .bgstyle { background: #FFFFCC} --〉 〈/style〉 在要用時選取那段文字，再在CSS面板上點一下“bgstyle”就行了。 8、如何給部分文字加背景圖像？ 與加背景色*作類似，中是在背景在選擇加載圖象就是了，一個定義好的加背景圖象的CSS例子的代碼是這樣的： 〈style type="text/css"〉 〈!-- .imgbgstyle { background-image: url(logo.gif)} --〉 〈/style〉 在要用時選取那段文字，再在CSS面板上點一下“imgbgstyle”就行了。 9、如何使頁面的背景在文字“滾動”時背景圖案靜止不動？ 要使背景圖案不隨文字“滾動”的CSS是這樣的： 〈style type="text/css"〉 〈!-- BODY { background: purple url(bg.jpg); background-repeat:repeat-y; background-attachment:fixed } --〉 〈/style〉 10、如何定義字間距？ 在DW3中CSS的屬性定義對話框（Style Definition for .style1)的“Block”上的“letter spaceing”屬性定義的就是字間距，它指的是每一個字符之間的額外間距，經長度爲單位，正負值均可，當取負值時產生字符擠在一起的效果。下面代碼是一個定義好的字間距CSS例子： 〈style type="text/css"〉 〈!-- .style1 { letter-spacing: 3px} --〉 〈/style〉 11、如何給文字加上劃線、下劃線、刪除線和閃爍？ 在DW3中CSS的屬性定義對話框(Style Definition for .style1)的“Type”上的“decoration”屬性定義的就是這些內容，要注意的是閃爍屬性有些版本的瀏覽器不支持，少用爲好。下面是一個定義好上述效果的CSS例子： 〈style type="text/css"〉 〈!-- .style1 { text-decoration: underline overline line-through blink} --〉 〈/style〉 其中： “underline”是定義下劃線；“overline ”是定義上劃線；“ line-through”定義的是刪除線；“blink”定義的是文字閃爍。 12、如何使網頁具有“首行縮進”×能？ 由於DW3輸入空格不方便，利用“首行縮進”將彌補這個不足。在DW3中CSS的屬性定義對話框（Style Definition for .style1)的“Block”上的“text-indent”屬性定義的就是“首行縮進”，所謂“首行”是指每段內容的第一行，也就是直接按回車鍵就形成了一個新的段落。縮進最好以“em”（字符）爲單位，比如：漢字編排要求每段開始縮進兩個漢字，設置好的CSS如下所示： 〈style type="text/css"〉 〈!-- .style1 { text-indent: 2em} --〉 〈/style〉 在DW3要注意：在DW3中CSS的屬性定義對話框（Style Definition for .style1)的“Block”上的“text-indent”右面的縮進單位選擇框中“ems”指的就是“em”。 13、在用表格進行排版時，能使某一方向上的內容離開表格線一點嗎？ 可以！在DW3中CSS的屬性定義對話框（Style Definition for .style1)的“Box”上的“margin”定義的就是內容離開邊緣的距離，分別可定義四個方向：“top”“bottom”“left”“right”。下面就是定義在左邊離開“10px”的CSS例子代碼： 〈style type="text/css"〉 〈!-- .style1 { margin: 0px 0px 0px 10px} --〉 〈/style〉 14、能給某部分內容加邊框嗎？ 用CSS可以給某部分內容加邊框，在DW3中CSS的屬性定義對話框（Style Definition for .style1)的“Border”定義的就是邊框線，“top”“bottom”“left”“right”四邊可分別定義線的粗細和顏色，這些定義好後不要忘記在下面的“Style”中定義線型，否則將看不邊框線，因爲默認的線型是“none”。下面是一個定義了上邊框爲：藍色細線；左邊框爲：綠色中粗線的CSS例子： 〈style type="text/css"〉 〈!-- .style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00} --〉 〈/style〉 |
| CSS2 快速參考 CSS2 快速參考 編譯/周曉陽 CSS2 快速參考之一 自W3C（The World Wide Web Consortium）制定了代號爲Cougar的HTML的4.0版本以來，存在在Web頁面中的動態效果首次被正式的承認了，W3C把動態超文本（Dynamic HTML）的實現分爲了三個部分：腳本、支持動態效果的瀏覽器和CSS。前兩者也許你經常用到，但CSS是什麼或許你並不清楚，如果有過製作Web頁面的經歷，你可能聽說過樣式單或風格單，如果對此你亦無耳聞，不要緊，只要你想製作出具有更多新特性的W eb頁，本文將同樣適合於你。 一、什麼是CSS？ CSS是Cascading Style Sheet的縮寫，有些書上把它譯爲“層疊樣式單”或“級聯樣式單”（下文簡稱“樣式單”），在1997年W3C頒佈HTML4標準的同時也公佈了有關樣式單的第一個標準CSS1。樣式單是對以前的HTML（3.2以前的H TML版本）語法的一次重大革新，以前的HTML版本中，各種功能的實現是通過標記元素實現的，這也造成了各個瀏覽器廠商爲了標新立意創建各種只有自家支持的標記，各種標記互相嵌套，就可以達到不同的效果，比如要在一段文字中把一部分文字變成紅色，H TML3.2中應該是這樣的： <p><font color=red>這裏顯示紅色字</font></p> 而在樣式單中，把某些標記（如上例中的“font”標記）屬性化，利用樣式單，上例可以變成： <p style="color:red">這裏顯示紅色字</p> 這就是樣式單的全部功能嗎？遠遠不是！前面說過樣式單是DHTML的一部分，建立樣式單的真正意義在於把對象真正引入了HTML，使得可以使用腳本程序（如Javascript、VBScript）調用對象屬性，並且可以改變對象屬性，達到動態的目的，這在以前的H TML中是無法實現的，如果你使用過如VB等面向對象的編程工具，你會更快的發現，用樣式單做DHTML是多麼容易。樣式單的另一項貢獻是簡化了HTML中各種繁瑣的標記，使得各個標記的屬性更具有一般性和通用性，並且樣式單擴展了原先的標記功能，能夠實現更多的效果，樣式單甚至超越了W eb頁面的本身顯示功能，而把樣式擴展到多種媒體上，顯示了難以抗拒的魅力。 樣式單自從CSS1的版本之後，又在1998年5月發佈了CSS2版本，樣式單得到了更多的充實。Internet Explorer4和Netscape Navigator4都宣傳支持樣式單，但從各方面來看IE4的效果都要超過NE4，這是因爲IE4和NE4的Javascript文檔模型（DOM）不同而造成的，從表面看，二者的模型區別不大，但實質上卻是大相徑庭，IE4的模型能夠更加容易的把動態效果引入W eb頁面，雖然現在IE4的模型只有微軟自己支持，但它卻已被清楚的寫入了W3C的DHTML標準；而NE4的樣式單並不能通過腳本調用對象的屬性，說的不好聽一點，它的樣式單只是徒有其表罷了。（Netscape公司自己開發了一種樣式單稱作J SSS，它利用Javascript來定義樣式，但是並沒有得到W3C的承認。） 二、進一步瞭解樣式單 Cascading Style Sheet中的Cascading是“層疊”的意思，也就是說在同一個Web文檔中可以有多個樣式單存在，這些樣式單根據所在的位置，擁有不同的優先級，優先級越高，就會被最後在顯示時採用。從樣式單插入的形式來看可以分爲三種： 內聯式樣式單：它利於現有的HTML標記，把特殊的樣式加入到那些由標記控制的信息中，比如剛纔的例子。 嵌入式樣式單：它和Javascript一樣可以嵌入到HTML文件的頭部中去（<html>和<body>標記之間），使用<Style>和</Style>容器裝載，例如：“<style> p {color : red ; font-weight : bold} </style>”，這樣會對頁面中所有<p>標記都起作用。 外部式樣式單是一種保存在外部的樣式單文件，外部文件以.CSS爲擴展名，例如“<link rel=stylesheet href=”main-sheet.css” type=”text/css”>”。 在應用時可以根據需要隨意運用以上三種方式，但在實際中內聯式樣式單和嵌入式樣式單使用得更多一些。 三、樣式單的語法特徵 樣式單有自己獨特的書寫方法，掌握了它的語法特徵，再瞭解它的各種屬性，那麼你會發現在Web頁面中運用樣式單會是多麼輕鬆。例如有一個最簡單的HTML文檔： <html> <body> <p>Text goes here…<p> </body> </html> 我們可以用嵌入式樣式單規定樣式。 <html> <style> <!-- p {color:red; font-weight : bold} - -> </style> <body> <p>這裏顯示紅色字</p> </bdoy> </html> 可以看到，在這個文檔裏，多了“Style”標記，之間用<!-- ……… - ->註釋，以防止不能識別樣式單的瀏覽器把樣式單當作內容顯示出來，然後是關鍵的一句： p {color:red；font-weight : bold } 這整行稱爲一個聲明（Statement），在樣式單中，聲明分爲兩種，一種是象這樣的，叫做“rule set”，另一種則稱爲“at-rule”。 At-rule以“@”作爲關鍵字，放在元素的最前面，at-rule通常用來對媒體（Media）的聲明，並且如果對同一個at-rule進行聲明，那麼只有位置靠前的會起到作用，如： @import "subs.css" H1 {color:blue} @import "list.css" 後一個At-Rule無效。 而rule set就象我們前面看到的樣子了，它由幾個部分組成，其中包括選擇器、屬性和屬性值。一般的書寫是這樣的： Selector1 {property1:value1; property2:value2;……} Selector2 {……} 其中剛纔例子中的“P”代表段落標記元素，爲選擇器，“{}”爲一個塊（Block），表示對標記屬性的聲明（Declaration），有多個屬性的時候使用“;”隔開，屬性在樣式單中的一般表示方法是前面是一類屬性的名稱，後面是具體屬性的名稱，中間用“- ”隔開，而在腳本中使用屬性的時候，則把“-”去掉，並把第二部分的開頭字母大寫。屬性值的表示可以使用10進制，16進制數值（如＃FFFFFF），百分數（如100%），字符串，URL（如url(http://www.m ysite.com)）和RGB（如rgb(255,255,255)）等多種方式表示。下面我將對其中的重點部分進行更詳細的解釋： 1、選擇器（Selector） 選擇器不只是文檔中的元素標記，它還可以是類（Class，這不同於Java或C＋＋中的類）、ID（給予元素特殊的名稱，也便於在腳本中使用）或是元素的某種狀態（如：a:link）。如： <html> <style> <!-- p {color:red；font-weight : bold } .bigFont {font-size:200%} #blueBack {background-color:blue;color:yellow} --> </style> <body> <p>利用<span class="bigFont">Class</span>和<span id="blueBack">ID</span>顯示內容。</p> </body> </html> 其中.someclass代表類，#someID代表ID。類和ID也可以和元素標記合用，比如： p.bigFont {……} 則表示必須在某個爲bigFont類的P標記（<p class="bigFont">）才執行樣式單，同樣的也適合於ID。 爲了簡化聲明某些重複屬性的標記，可以用“,”把不同的選擇器隔開，表示它們都表示成相同的屬性，如： H1,H2 {color:red} Div, p.mytext {……} 有時我們還希望能夠在特定的範圍內使樣式單生效： p em {color:red} 元素標記間又空格隔開，表示在<p>和</p>間的<em>、<em>用紅色表示。另外還可以利用“~”表示一個選擇器後面緊跟另一個選擇器，並且兩邊以“/”圍住： / Selector1 ~ Selector2/ {……} 表示如果Selector2緊跟着Selector1則使用該樣式單。 2、屬性值的單位 在樣式單中，屬性的單位多爲長度單位，包括px（象素）、pt（磅）、em（一種排版中的單位，1em＝12pt）、mm（毫米）、cm（釐米）、pc（1pc＝12pt）、in（英寸），這些單位可以使用整數（如px）表示，也可以使用實數（如e m）表示，並且元素中對數值還有繼承（inherit）的關係比如： body {font-size:12pt; text-indent:3em; } H1 {font-size:15pt} 那麼在顯示中H1的text-indent屬性就不是36pt而是45pt。 有的屬性的單位甚至可以是負值，如margin，可以達到一些特殊的效果，如元素之間的重疊。 另外還有一些其他的單位如角度，它的單位有deg（度）、grad（梯度）和rad（弧度）；頻率的單位，Hz和kHz，這些都是我們非常熟悉的。 3、註釋及空格 樣式單也有註釋語句：可以用“/*……*/”作爲註釋標記，在瀏覽器中有一個對樣式單的分析器，它負責對樣式單的檢查，分析器將忽略註釋標記之間的內容。空格在樣式單中是有效的，如果字符之間有超過一個空格存在，它將省略其餘空格，而只保留一個，特別是在聲明某些字體的時候，空格一定不能省略。  要注意的方面 首先，樣式單是區分大小寫的，所以要注意拼寫；其次對於CSS2未聲明的屬性和方法，樣式單的分析器會忽略它的存在，如： H1 ,H2 {color:green} H3 ,H4 & H5 {color:red} P {color:blue ;font-variant:small-caps} 其中“&”是樣式單中沒有的標號，第二行整個被分析器略過，第三行中的font-variant不是一個合法屬性，也被略過（“color:blue”有效）。 瞭解了以上規則，你就已經對樣式單入門了，下面我將詳細介紹樣式單的各種屬性及屬性值。 CSS2快速參考之二 關鍵詞：其他 四、CSS屬性： 1、媒體（Media）類型 樣式單的一個最重要的特點就是它可以作用於多種媒體，比如頁面、屏幕、電子合成器等等。特定的屬性只能作用於特定的媒體，如“font-size”屬性只對可捲動的媒體類型有效（屏幕）。 聲明一個媒體屬性可以用@import或@media引入： @import url(loudvoice.css) speech; @media print { /* style sheet for print goes here */ } 也可以在文檔標記中引入媒體： <LINK rel="stylesheet" type="text/css" media="print" href="foo.css"> 可以看出，@import和@media的區別在於，前者引入外部的樣式單用於媒體類型，後者直接引入媒體屬性。@import的使用方法是@import加樣式單文件的URL地址再加媒體類型，可以多個媒體共用一個樣式單，媒體類型之間用“，”分割符分開。@ media用法則是把媒體類型放在前面，其他規則和rule-set基本一樣。下面列出各種媒體類型： SCREEN：指計算機屏幕。 PRINT：指用於打印機的不透明介質。 PROJECTION：指用於顯示的項目。 BRAILLE：盲文系統，指有觸覺效果的印刷品。 AURAL：指語音電子合成器。 TV：指電視類型的媒體。 HANDHELD：指手持式顯示設備（小屏幕，單色） ALL：適合於所有媒體。 2、BOX模型（BOX Model）屬性 什麼是BOX？CSS把HTML中以<somesign>……</somesign>的部分稱爲BOX（容器），BOX有三類屬性：padding、margin和border。 Margin屬性： Margin屬性分爲margin-top、margin-right、margin-bottom、margin-left和margin五個屬性，分別表示BOX裏內容離邊框的距離，它的屬性值是數值單位，可以是長度、百分比或auto，margin甚至可以設爲負值，造成B OX與BOX之間的重疊顯示，關於margin的屬性詳見下表： 屬性名稱: 'margin-top'、'margin-right'、'margin-bottom'、'margin-left' 屬性值: <margin-width> 初始值: 0 適合對象: 所有元素 是否繼承: no 百分比備註: 相對於BOX的寬度 例如： H1 { margin-top: 2em } H2 { margin-right: 12.3% } Margin還有一個快捷的書寫方法，就是直接用margin屬性，例如： BODY { margin: 1em 2em 3em 2em} 等同於： BODY { margin-top:1em; margin-right:2em; margin-bottom:3em; margin-left:2em; } margin屬性後面可以有四個值，中間用空格隔開（記住不是逗號），順序是“上右下左”，當然margin後面可以不足四個值，例如： BODY { margin: 2em } /* 所有的margin都設爲2em */ BODY { margin: 1em 2em } /* 上下margin爲1em，右左margin爲2em */ BODY { margin: 1em 2em 3em } /* 上margin爲1em，右左margin爲2em，下margin爲3em*/ Padding屬性： Padding屬性用來描述BOX的邊框和內容之間插入多少空間，和margin屬性類似，它也分爲上右下左和一個快捷方式padding，關於margin的屬性詳見下表： 屬性名稱: 'padding-top'、'padding-right'、'padding-bottom'、'padding-left' 、'padding' 屬性值: <padding-width> 初始值: 0 適合對象: 所有元素 是否繼承: no 百分比備註: 相對於BOX的寬度 例如： BLOCKQUOTE { padding-top: 0.3em } padding屬性和margin類似此處略去。 Border屬性： 平時我們在查看HTML文檔時，看到一段文字，並不會把它當作一個BOX，實際上BOX是有邊框的，只是平時不顯示出來罷了，而border屬性就是用來描述BOX邊框的。Border屬性分爲border-width、border-co lor和border-style，而這些屬性下面又有分支。 border-width屬性： border-width屬性又分爲：border-top-width、border-right-width、border-bottom-width、border-left-width和border-width屬性，border-width用長度表示爲“thin/medium/thick”或長度單位表示，下面是b order-width屬性的詳細列表： 屬性名稱: 'border-top-width'、'border-right-width'、'border-bottom-width'、'border-left-width'、'border-width' 屬性值: <border-width> 初始值: medium 適合對象: 所有元素 是否繼承: no 百分比備註: 被禁止 border-width爲快捷方式，順序爲上右下左，值之間用空格隔開。 border-color屬性： border-color屬性用來顯示BOX邊框顏色，分爲border-top-color、border-right-color、border-bottom-color、border-right-color和border-color屬性，屬性值爲顏色，可以用十六進制表示，也可用rg b()表示，屬性見下： 屬性名稱: 'border-top-color'、'border-right-color'、'border-bottom-color'、'border-left-color'、 'border-color' 屬性值: <color> 初始值: 元素顏色的初始值 適合對象: 所有元素 是否繼承: no 百分比備註: 被禁止 border-color爲快捷方式，順序爲上右下左，值之間用空格隔開。 border-style屬性： border-style屬性用來設置BOX對象邊框的樣式，它的屬性值爲CSS規定的關鍵字，平常看不到border是因爲，初始值是none的緣故。屬性見下： 屬性名稱: 'border-top-style'、'border-right-style'、'border-bottom-style'、'border-left-style'、'border-style' 屬性值: <border-style> 初始值: none 適合對象: 所有元素 是否繼承: no 百分比備註: 被禁止 border-color爲快捷方式，順序爲上右下左，值之間用空格隔開。 屬性值的名稱和代表意義如下： none：無邊框。 dotted：邊框爲點線。 dashed：邊框爲長短線。 solid：邊框爲實線。 double：邊框爲雙線。 groove、ridge、inset和outset：顯示不同效果的3D邊框（根據color屬性）。 border屬性： border屬性爲Border的快捷方式，屬性值間用空格隔開，順序是“邊框寬度 邊框樣式 邊框顏色”，例如： <h1 style="border:.5em outset red">hello!</h1> 還可以用border-top、border-right、border-bottom、border-left分別作爲上右下左的快捷方式，屬性值順序同border屬性。 CSS2快速參考之三 關鍵詞：其他 3、佈局（Layout）屬性： 在以前的HTML裏，元素的位置只能靠元素的依次排列覺得，而在CSS裏你可以更精確的定位元素。Netscape曾提出過Layer標記，它對於精確佈局很有好處，但是並沒有被W3C承認，W3C在CSS提出了類似於Lay er標記的功能。 position屬性： position屬性用來決定元素的位置類型，詳見屬性： 屬性名稱: 'position' 屬性值: absolute │ relative │ static 初始值: static 適合對象: 所有元素 是否繼承: no 百分比備註: 被禁止 其屬性值分別代表： absolute：屏幕上的絕對位置。 relative：屏幕上的相對位置。 static：固有位置。 direction屬性： direction屬性決定BOX的排列方向，詳見屬性： 屬性名稱: 'direction' 屬性值: ltr│ rtl 初始值: ltr 適合對象: 所有元素 是否繼承: yes 百分比備註: 被禁止 float和clear屬性： 在HTML中圖片可以選擇飄浮的位置，現在BOX對象通過CSS對於也可以選擇飄浮的位置。改變BOX的float屬性，BOX將飄浮在其他元素的左或右方： 屬性名稱: 'float' 屬性值: left│ right│none 初始值: none 適合對象: 所有元素 是否繼承: no 百分比備註: 被禁止 例如： <STYLE type="text/css"> IMG { float: left } BODY, P, IMG { margin: 2em } </STYLE> <BODY> <P> <IMG src=img.gif> Some sample text that has no other... </BODY> 相反的，使用clear屬性將禁止元素在BOX的左方或右方飄浮： 屬性名稱: 'clear' 屬性值: left│ right│both│none 初始值: none 適合對象: 所有元素 是否繼承: no 百分比備註: 被禁止 絕對位置屬性： 絕對位置屬性有四個屬性：top、right、bottom和left，屬性值爲長度單位或百分數： 屬性名稱: 'top'、'right'、'bottom'、'left' 屬性值: <length>│<percentage>│auto 初始值: none 適合對象: 所有元素 是否繼承: no 百分比備註: 被禁止 利用以上屬性，用戶就可以精確定義元素的位置，如： <P style="position: relative; margin-right: 10px; left: 10px;"> I used two red hyphens to serve as a change bar. They will "float" to the left of the line containing THIS <SPAN style="position: absolute; top: auto; left: 0px; color: red;">--</SPAN> word.</P> z-index屬性： 在CSS中允許元素的重疊顯示，這樣就有一個顯示順序的問題，z-index屬性描述了元素的前後位置，如果把電腦屏幕看作X-Y平面的話，那麼Z軸就是垂直於屏幕的，z-index使用整數表示元素的前後位置，數值越大，就會顯示在相對靠前的位置，並且C SS同意在z-index中使用負數。 屬性名稱: 'z-index' 屬性值: auto│<integer> 初始值: auto 適合對象: 使用position屬性的元素 是否繼承: no 百分比備註: 被禁止 width屬性： 規定BOX的width屬性，可以使BOX的寬度不依靠它所包含的內容的多少： 屬性名稱: 'width' 屬性值: <length> │ <percentage> │ auto 初始值: auto 適合對象: 塊元素 是否繼承: no 百分比備註:根據父元素的width而定 在CSS中還提供了min-width和max-width屬性，使得BOX的寬度在最小寬度和最大寬度之間。 屬性名稱: 'min-width' 屬性值: <length> │ <percentage> 初始值: 0 適合對象: all 是否繼承: no 百分比備註:根據父元素的width而定 屬性名稱: 'max-width' 屬性值: <length> │ <percentage> 初始值: 100% 適合對象: all 是否繼承: no 百分比備註:根據父元素的width而定 height屬性： 相同的BOX還有height屬性來控制本身的高度： 屬性名稱: 'height' 屬性值: <length> │ <percentage> │ auto 初始值: auto 適合對象: 塊元素 是否繼承: no 百分比備註:根據父元素的height而定 在CSS中還提供了min-height和max-height屬性，使得BOX的高度在最小高度和最大高度之間。 屬性名稱: 'min-height' 屬性值: <length> │ <percentage> 初始值: 0 適合對象: all 是否繼承: no 百分比備註:根據父元素的height而定 屬性名稱: 'max-height' 屬性值: <length> │ <percentage> 初始值: 100% 適合對象: all 是否繼承: no 百分比備註:根據父元素的height而定 overflow屬性： 在規定元素的寬度和高度時，如果元素的面積不足以顯示全部內容的話就要用到overflow屬性： 屬性名稱: 'overflow' 屬性值: visible │ hidden │ scroll │ auto 初始值: visible 適合對象: 元素的position屬性 是否繼承: no 百分比備註: 被禁止 屬性值含義如下： visible：擴大面積以顯示所有內容。 hidden：隱藏超出範圍的內容。 scroll：在元素的右邊顯示一個滾動條。 auto：當內容超出元素面積時，顯示滾動條。 clip屬性： CSS還提供了一種clip屬性，可以把元素區域剪切成各種形狀，但目前提供的只有方形一種： 屬性名稱: 'clip' 屬性值: <shape> │ auto 初始值: auto 適合元素: 元素的position屬性被設爲absolute 是否繼承: no 百分比備註: 被禁止 <shape>值爲rect(top right bottom left)。 line-height和vertical-align屬性： line-height屬性可以規定元素內部的行間距，使用長度單位或百分數： 屬性名稱: 'line-height' 屬性值: normal │ <number> │ <length> │ <percentage> 初始值: normal 適合對象: 所有元素 是否繼承: yes 百分比備註:根據元素的字體大小而定 例如下面的例子，雖然表達方式不同，但結果一樣： DIV { line-height: 1.2; font-size: 10pt } DIV { line-height: 1.2em; font-size: 10pt } DIV { line-height: 120%; font-size: 10pt } vertical-align屬性決定元素在垂直位置的顯示： 屬性名稱: 'vertical-align' 屬性值: baseline │ sub │ super │ top │ text-top │ middle │ bottom │ text-bottom │ <percentage> │ <length> 初始值: baseline 適合對象: inline elements 適合繼承: no 百分比備註: 根據元素的line-height屬性而定 屬性值含義如下： baseline：與元素的基線對齊。 middle：與元素中部對齊。 sub：字下沉。 super：字上升。 text-top：文本頂部對齊。 text-bottom：文本底部對齊。 Top：和本行位置最高元素對齊。 Bottom：和本行位置最低元素對齊。 Visibility屬性: 該屬性用於控制元素的顯示或隱藏： 屬性名稱: 'visibility' 屬性值: inherit │ visible │ hidden 初始值: inherit 適合對象: 所有元素 是否繼承: 如果該值爲inherit，則繼承父元素屬性 百分比備註: 被禁止 4、顏色和背景（Color and Background）屬性： 這裏介紹有關CSS中前景色和背景顏色、圖片的設定方法。 color屬性： color屬性用於設定元素的前景色： 屬性名稱: 'color' 屬性值: <color> 初始值: 根據用戶的初始值而定 適合對象: 所有元素 是否繼承: yes 百分比備註: 被禁止 color屬性的值可以是十六進制數值、rgb()函數或CSS承認的顏色名稱。如： EM { color: red } EM { color: rgb(255,0,0) } 背景屬性： background-color屬性用於設定背景色，初始值爲透明： 屬性名稱: 'background-color' 屬性值: <color> │ transparent 初始值: transparent 適合對象: 所有元素 是否繼承: no 百分比備註: 被禁止 backgroud-image屬性用於設定背景的圖片： 屬性名稱: 'background-image' 屬性值: <url> │ none 初始值: none 適合對象: 所有元素 是否繼承: no 百分比備註: 被禁止 其中url可以爲絕對地址，也可以是相對地址，例如： BODY { background-image: url(marble.gif) } P { background-image: none } 以上兩個屬性利用普通的HTML屬性也可以實現，下面的屬性是CSS對原有HTML的擴展。 background-repeat屬性用來描述背景圖片的重複排列方式： 屬性名稱: 'background-repeat' 屬性值: repeat │ repeat-x │ repeat-y │ no-repeat 初始值: repeat 適合對象: 所有元素 是否繼承: no 百分比備註: 被禁止 其中屬性值的含義爲： repeat：沿X軸和Y軸兩個方向重複顯示圖片。 repeat-x：沿X軸方向重複圖片。 repeat-y：沿Y軸方向重複圖片。 none：不重複圖片。 例如： BODY { background: red url(pendant.gif); background-repeat: repeat-y; } /*表示沿Y軸重複圖片“pendant.gif”，其餘部分以紅色爲背景色*/ background-attachment屬性表示在滾動整個文檔時，背景圖片的顯示方式。它的屬性值有兩種：fixed和scroll，fixed相當於IE4裏的水印效果，也就是說在拖動文檔時，背景相對是靜止的，scroll則和文檔一起滾動。 background-position屬性用來指定背景圖片顯示的位置： 屬性名稱: 'background-position' 屬性值: [<percentage> │ <length> ]{1,2} │ [top │ center │ bottom] │ │ [left │ center │ right] 初始值: 0% 0% 適合對象: 容器元素 是否繼承: no 百分比備註: refer to the size of the element itself 其中屬性值含義爲： “top left”和“left top”表示“0% 0%”。 “top”、“top center”和“center top”表示“50% 0%”。 “right top”和“top right”都表示“100% 0%”。 “left”、“left center”和“center left”表示“0% 50%”。 “center”和“center center”表示“50% 50%”。 “right”、“right center”和“center right”都表示“100% 50%”。 “bottom left”和“left bottom”表示“0% 100%”。 “bottom”、“bottom center”和“center bottom”都表示“50% 100%” “bottom right”和“right bottom”表示“100% 100%”。 例如： BODY { background: url(banner.jpeg) right top } /* 100% 0% */ BODY { background: url(banner.jpeg) top center } /* 50% 0% */ BODY { background: url(banner.jpeg) center } /* 50% 50% */ BODY { background: url(banner.jpeg) bottom } /* 50% 100% */ background屬性是以上背景屬性的快捷方式，屬性和順序如下： 屬性名稱: 'background' 屬性值: <'background-color'> │ │ <'background-image'> │ │ <'background-repeat'> │ │ <'background-attachment'> │ │ <'background-position'> 適合對象: 所有元素 是否繼承: no 百分比備註: 只在background-position中容許使用 CSS2快速參考之四 關鍵詞：其他 5、字體（Font）屬性： 這裏定義了關於字體的各種屬性。 font-family屬性定義字體的名稱，可以是一個字體的名稱，也可以是一類字體的名稱，字體的名稱一定要和計算機系統裏的完全一樣： 屬性名稱: 'font-family' 屬性值: [[ <family-name> │ <generic-family> ],]* [<family-name> │ <generic-family>] 初始值: 根據用戶定義而定 適合對象: 所有元素 是否繼承: yes 百分比備註: 被禁止 有些計算機系統裏如果沒有樣式單要求的字體，可以再設一個次字體以備萬一。例如： BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif } family-name是指確定的某字體，如Heisi Mincho W3，generic-family指某一類字體，如serif。 font-style屬性描述字體的傾斜程度： 屬性名稱: 'font-style' 屬性值: normal │ italic │ oblique 初始值: normal 適合對象: 所有元素 是否繼承: yes 百分比備註: 被禁止 font-variant屬性： 屬性名稱: 'font-variant' 屬性值: normal │ small-caps 初始值: normal 適合對象: 所有元素 是否繼承: yes 百分比備註: 被禁止 一個使用了small-caps屬性的元素中的小寫字母看起來要比正常的大寫字母小一些。 font-weight屬性用來描述字重。 屬性名稱: 'font-weight' 屬性值: normal │ bold │ bolder │ lighter │ 100 │ 200 │ 300 │ 400 │ 500 │ 600 │ 700 │ 800 │ 900 初始值: normal 適合對象: 所有元素 是否繼承: yes 百分比備註: 被禁止 100到900代表9種不同的字重，400代表normal，700代表bold，900是最重的字體，bolder或lighter表示字體的字重比父元素高或低一級，比如父元素字重爲400，則bolder代表字重500，如果父元素本身字重爲9 00，那麼bolder後，字重還是900，同樣的lighter也一樣。有些字體並沒有100到900那麼全的字重，也許是從300到700，那麼字重的最小和最大值也爲300到700。例如： P { font-weight: normal } /* 400 */ H1 { font-weight: 700 } /* bold */ font-size屬性描述字體的大小： 屬性名稱: 'font-size' 屬性值: <absolute-size> │ <relative-size> │ <length> │ <percentage> 初始值: medium 適合對象: 所有元素 是否繼承: yes 百分比備註: relative to parent element's font size 該屬性可以使用絕對大小，也可以使用相對大小，其中絕對大小可以使用，如下關鍵字表示： xx-small │ x-small │ small │ medium │ large │ x-large │ xx-large 分別代表最小、較小、小、中等、大、較大和最大。 相對大小可以使用：larger 或smaller描述。 例如： P { font-size: 12pt; } BLOCKQUOTE { font-size: larger } EM { font-size: 150% } EM { font-size: 1.5em } Font屬性是以上屬性的快捷方式，屬性如下： 屬性名稱: 'font' 屬性值: [ [ <'font-style'> │ │ <'font-variant'> │ │ <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] 適合對象: 所有元素 是否繼承: yes 百分比備註: 只在font-size使用 例如： P { font: 12pt/14pt sans-serif } P { font: 80% sans-serif } P { font: x-large/110% "new century schoolbook", serif } P { font: bold italic large Palatino, serif } P { font: normal small-caps 120%/120% fantasy } 6、文本（Text）屬性： 這裏的屬性將影響WEB文檔中的文本顯示情況。 text-indent屬性描述文本的縮進程度： 屬性名稱: 'text-indent' 屬性值: <length> │ <percentage> 初始值: 0 適合對象: 容器元素 是否繼承: yes 百分比備註: 根據父元素的寬度而定 下面的例子表明段落的縮進值爲3em： P { text-indent: 3em } Alignment屬性表明文本的對齊方式： 屬性名稱: 'alignment' 屬性值: left │ right │ center │ justify 初始值: 依照用戶定義 適合對象: block-level elements 是否繼承: yes 百分比備註: 被禁止 text-decoration屬性描述對文本的修飾方法： 屬性名稱: 'text-decoration' 屬性值: none │ [ underline │ │ overline │ │ line-through │ │ blink ] 初始值: none 適合對象: 所有元素 是否繼承: no (see clarification below) 百分比備註: 被禁止 屬性值含義分別爲： underline：下劃線。 overline：上劃線。 line-through：刪除線。 blink：閃爍（如同Navigator中的blink標記的功能） text-shadow屬性可以爲文本加入陰影的特效： 屬性名稱: 'text-shadow' 屬性值: none │ <color> [, <color> ]* 初始值: none 適合對象: all 是否繼承: No 百分比備註: 只在描述透明度時有效 例如： P { text-shadow: black } 上例將在文本的右下方顯示黑色陰影，另外陰影將增大BOX的面積。 letter-spacing屬性表明文本的字間距：屬性名稱: 'letter-spacing' 屬性值: normal │ <length> │ auto 初始值: normal 適合對象: 所有元素 是否繼承: yes 百分比備註: 被禁止 例如： BLOCKQUOTE { letter-spacing: 0.1em } word-spacing屬性表明文本中單詞間距： 屬性名稱: 'word-spacing' 屬性值: normal │ <length> 初始值: normal 適合對象: 所有元素 是否繼承: yes 百分比備註: 被禁止 例如： H1 { word-spacing: 1em } text-transform屬性可以將BOX內的文本按指定的大寫或小寫形式顯示： 屬性名稱: 'text-transform' 屬性值: capitalize │ uppercase │ lowercase │ none 初始值: none 適合對象: 所有元素 是否繼承: yes 百分比備註: 被禁止 屬性值含義爲： capitalize：把BOX中的每句句首字母變成大寫。 uppercase：把BOX中所有的字母變成大寫。 lowercase：把BOX中所有的字母變成小寫。 White-space屬性描述如何顯示文本中的空格，在HTML中，空格是被省略的，也就是說你在一個段落標記的開頭無論輸入多少個空格都是無效的，要輸入空格有兩個方法，一是直接輸入空格的代碼“ ”，或者使用& lt;pre>標記，CSS中也制定了類似於pre的屬性： 屬性名稱: 'white-space' 屬性值: normal │ pre │ nowrap 初始值: normal 適合對象: 容器元素 是否繼承: yes 百分比備註: 被禁止 例如： PRE { white-space: pre } P { white-space: normal } CSS2快速參考之五 關鍵詞：其他 7、列表屬性： 這裏的屬性用來描述列表（list）的一系列屬性。 list-style-type屬性描述用於列表每一項前使用的符號： 屬性名稱: 'list-style-type' 屬性值: disc │ circle │ square │ decimal │ lower-roman │ upper-roman │ lower-alpha │ upper-alpha │ none 初始值: disc 適合對象: 列表元素 是否繼承: yes 百分比備註: 被禁止 屬性值含義爲： disc：圓餅形。 circle：空心圓形。 square：方形。 decimal：十進制數值。 lower-roman：小寫羅馬數字。 upper-roman：大寫羅馬數字。 lower-alpha：小寫希臘字母。 upper-alpha：大寫希臘字母。 例如： <STYLE> OL { list-style-type: lower-roman } </STYLE> <BODY> <OL> <LI> This is the first item. <LI> This is the second item. <LI> This is the third item. </OL> </BODY> 還可以利用list-style-image把列表前面的符號換爲圖形： 屬性名稱: 'list-style-image' 屬性值: <url> │ none 初始值: none 適合對象: 列表元素 是否繼承: yes 百分比備註: 被禁止 <url>可以是絕對地址，也可以是相對地址。 list-style-position屬性用於描述列表的位置顯示： 屬性名稱: 'list-style-position' 屬性值: inside │ outside 初始值: outside 適合對象: 列表元素 是否繼承: yes 百分比備註: 被禁止 屬性值outside和inside分別表示在BOX外部顯示或內部顯示，例如： <STYLE type="text/css"> UL { list-style: outside } UL.compact { list-style: inside } </STYLE> <UL> <LI>first list item comes first <LI>second list item comes second </UL> <UL class=compact> <LI>first list item comes first <LI>second list item comes second </UL> list-style屬性爲以上屬性的快捷方式： 屬性名稱: 'list-style' 屬性值: <'list-style-type'> │ │ <'list-style-position'> │ │ <'list-style-image'> 初始值: no 適合對象: 列表元素 是否繼承: yes 百分比備註: 被禁止 例如： UL { list-style: upper-roman inside } /* 對任何UL有效*/ UL ~ UL { list-style: circle outside } /* 對任何UL內部的UL標記有效*/ 8、表格屬性： 由於表格中的大部分屬性已經在以上的各類屬性中探討過了，所以這裏只有兩個屬性介紹： row-span屬性描述表格跨越的行的數目： 屬性名稱: 'row-span' 屬性值: <integer> 初始值: 1 適合對象: 表格元素 是否繼承: no 百分比備註: 被禁止 column-span屬性描述表格跨越的列的數目： 屬性名稱: 'column-span' 屬性值: <integer> 初始值: 1 適合對象: 表格元素 是否繼承: no 百分比備註: 被禁止 9、用戶界面屬性： cursor屬性，用戶可以指定在某個元素上要使用的光標形狀： 屬性名稱: 'cursor' 屬性值: auto │ crosshair │ default │ pointer │ move │ e-resize │ ne-resize │ nw-resize │ n-resize │ se-resize │ sw-resize │ s-resize │ w-resize│ text │ wait │ help │ <url> 初始值: auto 適合對象: 所有元素 是否繼承: yes 百分比備註: 被禁止 屬性值分別代表鼠標指針在windows操作裏的各種形狀，另外還可以指定指針圖標的url地址，不過CSS還暫時不支持ani動畫光標。 到此，所有關於CSS現有的屬性都介紹完了（還有一些關於聽覺方面的樣式單，就不再作介紹），本文也該結束了，雖然現在支持樣式單的瀏覽器種類還不多，但也佔到了大半，樣式單遲早會成爲瀏覽器的統一標準，原因有兩個：一、樣式單是W 3C唯一接受的樣式標準，而且沒有任何跡象表明W3C會把Javascript樣式單作爲樣式單標準；二則是CSS有效的解決了把事件引入元素的問題，配合腳本程序，是動態HTML不可缺少的一部分，嘗試着用樣式單建立W eb頁，你會發現它真的很方便。希望我的這些努力能爲你熟練掌握樣式單盡一點力。 |
| CSS語法手冊 :字體屬性 1、font-family 功能：用於改變HTML標誌或元素的字體，你可設置一個可用字體清單。瀏覽器由前向後選用字體。 語法：{font-family:字體1,字體2, ... ,字體n} 2、font-style 功能：使文本顯示爲扁斜體或斜體等表示強調 。 數值： normal - 正常 italic - 斜體 oblique - 偏斜體 3、font-variant 功能：用於在正常與小型大寫字母字體間切換。 數值：normal - 如果該標誌繼承父元素的 small-caps 設置，則關鍵字 normal 將 font-variant 設置爲正常字體。 small-caps - 把小寫字母顯示爲字體較小的大寫字母。 4、font-weight 功能：用於設置字體灰度，生成字體的深，淺版本。 數值： 正常灰度 - normal 相對灰度 - bold, bolder, light, lighter 梯度灰度 - 取值如下：100, 200, 300, 400(相當於normal), 500, 600, 700(相當於bold), 800, 900。 5、font-size 功能：用各種度量單位控制文本字體大小。 數值：有四種數值方式 絕對尺寸- 用具體字號表定義字體大小，可以取下列數值之一：xx - small, x-small, small, medium, large, x-large, xx-large。不同字體有不同的數值。 相對尺寸 - larger, smaller，產生的尺寸是相對於父容器字號而言的。 長度 - 用毫米(mm)，釐米(cm)，英寸(in)，點數(pt)，象素(px)，pica(pc)，ex(小寫字母x的高度)或em(字體高度)作爲度量單位。 百分比 - 相對於其父元素字體大小的百分比。 6、font 功能：簡寫屬性，提供了對字體所有屬性進行設置的快捷方法。 語法：{font:字體屬性1 字體屬性2 ... 字體屬性n} 數值：字體屬性值爲前面已列出的值，此外還可以設置行間距屬性 line-height(見文本屬性)，內容的順序爲：font-style; font-variant; font-weight; font-size; line-height; font-family。可省略部分屬性，屬性值間用空格分開。 例子： 讓字體美起來 你可能正建立自己在網上的家-WEB頁，又或者它已經被你安置在網絡某一角里。無論出於什麼目的,你都希望有更多的指導,告訴你該如何更好的佈置家。 在目前許多的指導中，他們都在訴說，應該加一點聲音或者一個說話的場地。的確我們都需要它，但我希望關心更多WEB家裏底層的東西，比如如何把字體弄的漂亮些，或者讓頁面顏色變的活潑些，讓訪問者增加“看欲”，還有更多你曾經都沒有關注的細微之處。今天，我們首先來探討頁面的字體。 一、html中定義字體 字體的確是很好打交道的，一開始製作頁面，它就以默認的樣式顯示。隨着逐步的深入，你會改變一下默認的設置，增大或者減小字體。 一般字體默認的標籤格式：＜p＞田濤＜/p＞ 接下來，我們把字體設置爲黑體或者宋體字樣式，它的標籤如下： ＜p＞＜font face="黑體"＞田濤＜/font＞＜/p＞ 在以上格式裏，我們引出了字體的標籤元素＜font＞＜/font＞.該標籤具有下面三個屬性值： size="..." 設置字體的大小，一般從1到7，它的默認值是+3，每次改變字體都是+3或者-3。 color="..." 字體顏色的設置。定義顏色可以利用RGB的16進制值，比如： color=“#ffffff” 。也可以直接利用顏色英文來定義，比如： color=“white” face="..." 字體樣式的設置，比如：face=“黑體”。或者 face=“黑體，宋體”。後者的格式，每當瀏覽器訪問第一種字體失敗後，瀏覽器就會訪問第二種字體，依此類推。 下面是一個完整的字體格式： ＜font face="黑體" size="2" color="#FFFFFF"＞田濤＜/font＞ HTML還提供了以下字體樣式標籤： 1.六個標題樣式 從h1到h6，如：＜h1＞＜font face="黑體" size="2"＞田濤＜/font＞＜/h1＞ 2.字體風格 斜體字：＜em＞田濤＜/em＞ 粗體字：＜strong＞田濤＜/strong＞ 斜體+粗體字：＜strong＞＜em＞田濤＜/em＞＜/strong＞ 3.定義文本 定義大字體 ＜big＞田濤＜/big＞ 定義小字體 ＜small＞田濤＜/small＞或者＜small＞＜small＞＜small＞田濤＜/small＞＜/small＞＜/small＞ 如果你在字體標籤中設置了size="...",那麼＜big＞標籤將不起作用。 除了以上常用字體標籤元素外，HTML還包含很多其它標籤，但不我們不多用。 二.CSS(層疊樣式表)改變字體 在過去頁面上的字體是一成不變的，靜靜的呆在那。當DHTML(動態網頁)出現後，我們能有更多方式控制字體了。一般來說，動態字體的實現核心是CSS(層疊樣式表)加JavaScript。使用了以上兩項技術後，字體就能產生許多變化。 1.CSS定義字體的標籤元素 font-family: 設置字體字族。 ＜span style="font-family: 黑體, 宋體(GB)"＞田濤＜/span＞ font-sytle:設置字體類型。 ＜span style="font-style: normal"＞田濤＜/span＞ font-weight:設置字體的字重。 ＜span style="font-weight: bold"＞田濤＜/span＞ font-size:設置字體大小。 ＜span style="font-size: 14pt"＞田濤＜/span＞ font-decoration:修飾文本字體，比如帶下劃線“underline”。 ＜span style="text-decoration: underline"＞田濤＜/span＞ 對於以上的字體設置，我們可以採用一個方便的方法： ＜span style="font:normal bold 14pt 黑體"＞田濤＜/span＞ 在style定義的次序是：font-style,font-weight,font-size,font-family. 2.CSS定義字體和＜font＞定義字體的衝突 對於CSS定義字體和＜font＞定義字體，我們都要注意以下問題，比如有以下字體設置： ＜span style="font-family: 宋體(KSC); font-size: 200pt"＞＜font＞田濤＜/font＞＜/span＞ 這時侯字體大小將以font-size: 200pt的定義來設置。但如果你在＜font＞中加入size屬性，比如： ＜span style="font-family: 宋體(KSC); font-size: 200pt"＞＜font size="5"＞田濤＜/font＞＜/span＞ 這時侯，字體的大小以size的設置爲準，font-size: 200pt將不起作用。其它的屬性也是一樣。如果你無需動態字體，就利用HTML4.0的＜font＞來定義字體，需要動態字體時，就需要使用CSS和JavaScritp來定義字體及引發事件。 3.定義CSS字體屬性類 一般我們在製作動態字體時，我們會首先利用CSS定義出頁面字體的整個屬性，然後在頁面中引用，而不用對每段文本進行設置，這也是實現動態字體首先一步。 ＜html＞ ＜head＞ ＜style type="text/css"＞ .tt2 { font-family:"黑體"; font-size: 16px; font-style: normal; line-height: 17px } ＜/style＞ ＜/head＞ ＜body＞ ＜p class="tt2"＞田濤＜/p＞ ＜/body＞ ＜/html＞ 在以上代碼中，“田濤”兩個字引用了.main_2類定義的字體樣式。當然你可以在＜style＞＜/style＞中定義不同的字體樣式，以便頁面中根據不同字體加以引用。比如： ＜html＞ ＜head＞ ＜style type="text/css"＞ .tt1 { font-family:"宋體"; font-size: 15px; font-style: normal; } .tt2 { font-family:"黑體"; font-size: 16px; font-style: normal; } ＜/style＞ ＜/head＞ ＜body＞ ＜p class="tt1"＞田濤＜/p＞ ＜p class="tt2"＞田濤＜/p＞ ＜/body＞ ＜/html＞ 三.讓字體動起來 要讓字體動起來，我們可以利用本身CSS的事件或者讓JavaScript引發事件。 1.CSS引發事件 例一 ＜html＞ ＜head＞ ＜style type="text/css"＞ ＜!-- a:link { color: black; text-decoration: none} a:visited { color: white; text-decoration: none} a:hover { color: blue; text-decoration: underline} --＞ ＜/style＞ ＜/head＞ ＜body＞ ＜p＞＜a href="http://zgrtt.yeah.net/"＞田濤＜/a＞＜/p＞ ＜/body＞ ＜/html＞ link定義的是鏈接在頁面顯示的顏色(黑色)及鏈接沒有下劃線，visited定義的是單擊鏈接後的顏色(白色)，hover定義的是指向鏈接時的動態顏色。以上實例表示，當指向鏈接“田濤”後字體顏色從黑色變成藍色，並加下劃線，單擊鏈接後，鏈接顏色變成白色。 例二 ＜html＞ ＜head＞ ＜title＞＜/title＞ ＜/head＞ ＜body＞ ＜p οnmοuseοver="this.style.fontSize=200" οnmοuseοut="this.style.fontSize=100"＞田濤 ＜/p＞ ＜/body＞ ＜/html＞ 以上實例是利用內聯改變字體樣式，當鼠標指向“田濤”時字體因爲定義了this.style.fontSize=200，這兩個字放大至200pt,當鼠標移開“田濤”時，因定義了this.style.fontSize=100，這兩個字體縮小到100pt. 2.JavaScript引發事件 ＜html＞ ＜head＞ ＜style＞ H1.italic {font-style:italic} H1.bold {font-style:bold; } ＜/style＞ ＜/head＞ ＜body＞ ＜script language="JavaScript"＞ function changeHead() { if (H1_1.className=="bold") { H1_1.className="italic" } else { H1_1.className="bold";} } ＜/script＞ ＜h1 id="H1_1" class="bold" οnmοuseοver="changeHead()" οnmοuseοut="changeHead()"＞田濤 ＜/h1＞ ＜/body＞ ＜/html＞ 在上面的實例當中，我們首先定義了兩個CSS類H1.italic和H1.bold，然後利用JavaScript腳本定義函數 changeHead(),最後在需要的地方引發事件執行定義好的函數。這裏我們引發了兩個單擊事件onmouseover和onmouseout。在這裏我還要說一點，因爲你定義了H1兩個類H1.italic 和H1.bold，所以當你在引用時，要首先設置class="bold"，表示字體以bold樣式出現。然後，移動鼠標到“田濤”上，觸發了事件一，移開“田濤”時，觸發了事件二。 對於動態字體，我們還有很多方法來完善它。只是在考慮利用動態字體時，需要了解不同瀏覽器會產生不一樣的結果。這時侯，就需要不停測試，來找到一個兩全其美的方法。最後，希望你在看完這篇文章後，找一點CSS及JavaScript的資料來看，因爲它們纔是實現所有“夢想”的工具。 |
