樣式表能為我們做什么

/樣式表能為我們做什么？作者：那么樣式表有什么特別之處呢？簡而言之，它能幫你做以下事情：你可以將格式和結(jié)構(gòu)分離.你可以以前所未有的能力控制頁面布局。你可以制作體積更小下載更快的網(wǎng)頁.你可以將許多網(wǎng)頁同時(shí)更新，比以前快更容易。瀏覽器將成為你更友好的界面你可以將格式和結(jié)構(gòu)分離。HＴＭＬ從來沒打算控制網(wǎng)頁的格式或外觀。這種語言定義了網(wǎng)頁的結(jié)構(gòu)和個(gè)要素的功能，而讓瀏覽器自己決定應(yīng)該讓各要素以何種模樣顯示.但是網(wǎng)頁設(shè)計(jì)者要求的更多。所以當(dāng)Netｓcａｐe推出新的可以控制網(wǎng)頁外觀的HＴMＬ標(biāo)簽時(shí),網(wǎng)頁設(shè)計(jì)者無不歡呼雀躍。我們可以用<FONＴFACE>、〈I>包在＜P〉外邊控制文章主體的外觀等等。然后我們將所有東西都放入表格，用隱式ＧＩF空格產(chǎn)生一個(gè)2０象素的邊距。一切都變得亂七八糟.編碼變得越來越臃腫不堪，要想將什么內(nèi)容迅速加到網(wǎng)頁中變得越來越難.串接樣式表通過將定義結(jié)構(gòu)的部分和定義格式的部分分離使我們能夠?qū)撁娴牟季质┘痈嗟目刂?。HTML仍可以保持簡單明了的初衷。ＣSＳ代碼獨(dú)立出來從另一角度控制頁面外觀。你可以以前所未有的能力控制頁面的布局。<FONTSIZE＞能使我們調(diào)整字號，表格標(biāo)簽幫助我們生成邊距，這都沒錯(cuò)。但是,我們對HTMＬ總體上的控制卻很有限.我們不可能精確地生成８0象素的高度，不可能控制行間距或字間距,我們不能在屏幕上精確定位圖象的位置。但是現(xiàn)在,樣式表使這一切都成為可能.而即將推出的新的CSS功能更令人興奮。以后4天內(nèi),你將會(huì)明白我所說的意味著什么。你可以制作出體積更小下載更快的網(wǎng)頁還有更好的消息：樣式表只是簡單的文本,就象HTML那樣.它不需要圖象,不需要執(zhí)行程序，不需要插件,不需要流式.它就象HTMＬ指令那樣快.有了CＳＳ之后,以前必須求助于GIF的事情現(xiàn)在通過CSS就可以實(shí)現(xiàn)。還有，正如我先前提到的，使用串接樣式表可以減少表格標(biāo)簽及其它加大HTＭL體積的代碼，減少圖象用量從而減少文件尺寸。你可以更快更容易地維護(hù)及更新大量的網(wǎng)頁.沒有樣式表時(shí)，如果我想更新整個(gè)站點(diǎn)中所有主體文本的字體,我必須一頁一頁地修改每張網(wǎng)頁。即便站點(diǎn)用數(shù)據(jù)庫提供服務(wù),我仍然需要更新所有的模板，而且更新每一模板中每一個(gè)實(shí)例實(shí)例的<FONTFAＣE＞.樣式表的主旨就是將格式和結(jié)構(gòu)分離.利于樣式表,我可以將站點(diǎn)上所有的網(wǎng)頁都指向單一的一個(gè)ＣＳS文件,我只要修改CSS文件中某一行,那么整個(gè)站點(diǎn)都會(huì)隨之發(fā)生變動(dòng)。瀏覽器將成為你更友好的界面。不象其它的的網(wǎng)絡(luò)技術(shù)，樣式表的代碼有很好的兼容性，也就是說，如果用戶丟失了某個(gè)插件時(shí)不會(huì)發(fā)生中斷,或者使用老版本的瀏覽器時(shí)代碼不會(huì)出現(xiàn)雜亂無章的情況。只要是可以識別串接樣式表的瀏覽器就可以應(yīng)用它。怎么樣，樣式表的確是一個(gè)很不錯(cuò)的注意吧?那么，現(xiàn)在我們就開始制作一份樣式表。zzz1．3你的第1張樣式表現(xiàn)在我們就開始制作樣式表。打開你最喜歡的HTＭL編輯器生成基本的網(wǎng)頁：＜ＨTML><HＥＡD><TITLＥ〉ＭｙＦirsｔStｙleｓheet〈/TITLE＞</HＥAD〉＜BＯDY〉〈Ｈ1>Stｙlｅsｈeｅts：TｈeToolｏfｔｈeWebDesigｎGods〈／Ｈ1><P＞Ａｍazeyourfriｅnds！Sqｕａｓhyourenemｉes!</P＞〈／ＢODＹ＞〈／HTＭＬ>很好?，F(xiàn)在，讓我們給它加一些樣式表.只需在最初的〈ＨTMＬ〉和＜BODY〉標(biāo)簽之間插入以下代碼：＜SＴYLETYＰＥ="text/ｃｓs”>＜!-－H1{cｏlｏr:green；fｏｎt-size:37ｐx；fonｔ—fａmｉｌy:iｍpact｝Ｐ｛texｔ—indent：1ｃm；backgrｏund：yｅllｏｗ;font－family：coｕrier｝——></STＹＬE＞從瀏覽器中打開頁面，你將會(huì)看到：Ｓtyleshｅe(cuò)tｓ：ＴheＴooloftｈeＷebDesｉｇｎGodsＡｍａzeyｏuｒfriendｓ！Sｑuashyｏurｅnemiｅs！如果你的瀏覽器不支持ＣSS,請點(diǎn)擊這里觀看CSS的效果.做得很好!你已經(jīng)制作出了你的第1份樣式表支持的網(wǎng)頁.（如果“amazeyourfrieｎds！"一行的背景不是黃色,則說明你需要升級你的瀏覽器,否則你將無法學(xué)完整個(gè)教程。建議你安裝NetscapｅＣommunicator或者ＩｎtｅrnetExplorer4）一些術(shù)語讓我們學(xué)習(xí)一下這些新的編碼:串接樣式表的核心是規(guī)則。最簡單的規(guī)則就象這樣：H1｛coｌｏr:grｅe(cuò)n}整個(gè)規(guī)則告訴瀏覽器將所有〈H１><／Ｈ１〉包圍的文字以綠色顯示.每一條規(guī)則包含一個(gè)選擇及說明.在上述例子中，H1就是選擇,它是一個(gè)附帶樣式功能的HTMＬ標(biāo)簽.說明用于定義實(shí)際的樣式，包括兩部分:屬性（本例中即color)和參數(shù)(green）。任何HTMＬ標(biāo)簽都可用作標(biāo)簽。所以你可以將樣式表的信息附加到任何要素。從通常的〈P>到〈CＯDE＞及<TABＬE>內(nèi)容。你甚至可以通過將樣式表用于＜IMＧ>將串接樣式表的屬性用于圖象。從我們的第1個(gè)樣式表實(shí)例中可以發(fā)現(xiàn)，你可以歸類樣式表的規(guī)則。我們將３種不同的說明都用于＜P〉.與之類似，你也可以歸類選擇:H１，P,BＬOＣKＱUOＴE｛fｏnｔ—family：arｉal｝這項(xiàng)規(guī)則設(shè)定所以位于<H1＞、〈P>和＜BLAＣＫQUOTE＞的標(biāo)簽將用Ａrial字體顯示。繼承性樣式表的規(guī)則可從母體延續(xù)到子體。下面是一個(gè)例子：B｛coloｒ：blue｝這項(xiàng)規(guī)則告訴瀏覽器將所有<B〉之內(nèi)的文字用藍(lán)色顯示。但是在下列情況下,瀏覽器該如何處理呢？〈Ｂ＞ＡllmyＷebpaｇeswｉlluｓecａscadingsｔyｌesｈeetswithin<I〉fｏur〈/I〉wｅe(cuò)ks.＜/Ｂ〉對于＜I＞標(biāo)簽并沒有設(shè)定樣式,但因?yàn)椤碔>位于＜B〉之中，所以它將繼承母體〈B＞設(shè)定的樣式,也以藍(lán)色顯示.AlｌｍyWeｂpaｇesｗilｌuseｃascａdinｇsｔylesheeｔswiｔｈｉｎfourｗeekｓ.現(xiàn)在我們已經(jīng)明白了串接樣式表的規(guī)則如何運(yùn)作，還看到將樣式表加入網(wǎng)頁的一種方法但還有其它方法，讓我們繼續(xù)學(xué)習(xí).ｚzz1。4將樣式加到你的網(wǎng)頁中我們已經(jīng)學(xué)了將樣式表加到網(wǎng)頁的一種方法。實(shí)際上你可以使用4種方法。每種方法都有其不同的優(yōu)點(diǎn)：將樣式表植入HＴMＬ文件中.將一個(gè)外部樣式表鏈接到HTＭL文件上.將一個(gè)外部樣式表輸入到HTＭL文件中.將樣式表加入到HTML文件行中.植入樣式表:這就是我們在上一頁中用的方法,所有的樣式表信息都列于ＨTML文件的頂部，同<BODY＞分列，例：＜HTML〉〈STYLETYPＥ＝”text/css”＞＜!－—H1｛ｃoｌｏr：gｒeｅn；ｆont—family:impact}Ｐ{bacｋground:yeｌｌｏw；fｏnt—family：ｃｏｕrｉer}－->＜/STＹＬE><HEAＤ><ＴＩTLE>MｙFｉrｓtSｔylesheet</TITLE>〈/HEＡＤ>〈ＢOＤＹ＞<H1>Sｔylesheｅｔｓ：ThｅＴoｏlｏftｈeWｅｂDesigｎGｏds＜/H1＞<Ｐ＞Amaｚeyourfｒiends!Sｑuasｈｙoｕrenｅmies！〈/Ｐ＞</BODY〉〈/HTML>植入樣式表規(guī)則后，瀏覽器在整個(gè)ＨTＭＬ頁面中都執(zhí)行該規(guī)則。如果你想對網(wǎng)頁一次性加入樣式表,就可采用該方法。你可能注意到代碼中有兩處很奇怪：TYPＥ="ｔexｔ/css”屬性和注釋標(biāo)簽.TYＰE=”ｔext/csｓ＂設(shè)定采用MIME類型,這樣以來，不支持CSS的瀏覽器可以忽略樣式表。注釋標(biāo)簽（〈!——anｄ-—>）更為重要。有些老的瀏覽器(如MＡC機(jī)用的IE2。0）即使在設(shè)定了TYＰE＝"text/css＂屬性時(shí)也不能忽略樣式表繼續(xù)執(zhí)行下面的命令，而且還會(huì)顯示樣式表的代碼。而使用注釋標(biāo)簽則可以避免發(fā)生這種情況.鏈接到樣式表上這里是樣式表功能發(fā)揮得淋漓盡致的地方。你可以將多個(gè)HTML文件都鏈接到一個(gè)中心樣式表文件。這個(gè)外部的樣式表文件將設(shè)定你所有網(wǎng)頁的規(guī)則。如果你改變樣式表文件中的額某一細(xì)節(jié)，所有頁面都會(huì)隨之改變.如果你維護(hù)的站點(diǎn)很大，則這項(xiàng)功能絕對會(huì)有其用武之地。它的使用方法:產(chǎn)生一個(gè)普通的網(wǎng)頁，但使用＜ＳＴYLE>規(guī)則,而是在〈ＨＥＡＤ>內(nèi)使用<LIＮK＞標(biāo)簽：〈HTML＞＜ＨEAＤ＞〈TITLE＞MyＦirstStyｌｅshｅe(cuò)ｔ＜／TITLE>＜ＬIＮKＲＥL＝ｓｔylesheeｔHREＦ=”ｍｙstylｅs。css＂TYＰＥ=”texｔ/ｃss"><／ＨＥＡＤ＞〈BODY＞〈H1〉Sｔｙleｓｈeets:ＴhｅToｏlｏfｔｈｅWebＤesignＧods＜/Ｈ1><Ｐ>Amazｅyｏｕｒfriends!Sqｕａｓhyoｕrｅｎeｍiｅs！〈/P></BＯDY＞＜/HTＭL＞(使用鏈接的樣式表時(shí)，你無須使用注釋標(biāo)簽.)現(xiàn)在生成一個(gè)單另的文本文件，起名ｍｙstylｅs．csｓ（或者其任何你喜歡的名字）。文件內(nèi)容如下：H1{color:greｅn；font-faｍily：imｐacｔ｝Ｐ{ｂａckgrｏuｎd:yｅllow；ｆonｔ－fａmily：cｏuriｅr}如同發(fā)布HＴMＬ文件那樣，將這個(gè)CＳＳ文件布到你的服務(wù)器中。在瀏覽器中觀看網(wǎng)時(shí)，你會(huì)發(fā)現(xiàn)瀏覽器將依照鏈接標(biāo)簽將有鏈接了的HTML網(wǎng)頁按照樣式表的規(guī)則示，在HREF屬性中你可以選擇使用絕對相對ＵＲL。輸入樣式表輸入外部樣式表的方法同鏈接的方法類似。不同之處在于鏈接法不能同其它方法結(jié)合使用，但輸入法則可以。例：＜HTMＬ><STＹＬETＹPE＝”ｔexｔ／css”〉〈！——＠ｉmpｏrturl（ｃｏmpaｎy.ｃss）；H１｛ｃoｌor:ｏraｎｇe;fｏnt—ｆaｍｉｌy:impａct}－-></STＹLE＞〈HEAD〉<ＴＩTLE〉MyＦirstStylｅｓhｅe(cuò)t〈/TITLE〉</ＨＥAD>〈BODY>〈H1>Stylesheｅts：TｈeToolｏｆthｅWebDesｉgnGoｄs＜/H1>〈P〉Ａｍazeyｏurｆrieｎds!Squashyourenemieｓ?。?P〉＜/BODY〉〈/ＨTＭL〉而其中輸入的compａny.ｃss文件內(nèi)容如下:H1｛color:green；fｏnt-fａmilｙ：times}P｛bacｋｇｒound：yeｌlｏw；ｆont－faｍｉly：ｃourier｝在本例中，瀏覽器首先輸入ｃomｐaｎy.css的規(guī)則(@impoｒt必須打頭）,然后加入移植的規(guī)則從而為這個(gè)網(wǎng)頁產(chǎn)生規(guī)則集合.請注意,對于H1在外部樣式表文件和植入的樣式表中都設(shè)定了規(guī)則。在兩者沖突的情況下,瀏覽器應(yīng)執(zhí)行哪一項(xiàng)規(guī)則呢？植入的規(guī)則此時(shí)將占上風(fēng).所以文字顯示效果如下：Stylｅsheets：TheTooloftheWｅｂDeｓignGodsＡｍａzeyｏurｆriends！Ｓqｕasｈｙourenemｉｅs！如果你的瀏覽器不支持ＣSS請點(diǎn)擊這里觀看顯示效果。輸入樣式表的靈活性可以使你輸入無數(shù)多個(gè)樣式表，并可以按照自己的喜好用植入的樣式表凌駕于輸入的樣式表之上。但是目前只有IE4。０支持輸入法。在行內(nèi)加入樣式最后,你還可以在ＨTML行中加入樣式規(guī)則，如下：<HＴMＬ><HEＡD〉〈TITLE〉MyFｉrstStｙlesheｅt</ＴIＴＬＥ>〈／HＥＡＤ＞<BOＤY><Ｈ1STＹLE="color:orａngｅ;font-fａｍily:impａct＂〉Ｓtｙleｓheets：TheＴoolｏfｔｈeＷebDesignGods＜／H1＞〈PＳTＹLE="bacｋgrouｎｄ：ｙｅｌloｗ;fｏnt—familｙ：cｏurieｒ">Ａmazｅｙｏurfriends!Sqｕａshyouｒenｅmｉes！</Ｐ〉＜/BODY>〈／HＴＭL>在這個(gè)例子中，你無須在HTＭL頂部加入樣表代碼。加入行內(nèi)的樣式表屬性將使瀏器同樣執(zhí)行樣式表規(guī)則.該方法不方便之處在于:你必須在每行指中都中加入樣式規(guī)則,否則下一行時(shí)瀏器將轉(zhuǎn)回到文件的缺省設(shè)置。加入行內(nèi)的樣式表相比不如植入、鏈接及輸入的樣式表那樣功能強(qiáng)大,但有時(shí)候你會(huì)發(fā)現(xiàn)它也很有用。記住，你可以同時(shí)使用幾種方法，其實(shí),樣式表的能力就在于綜合你加入網(wǎng)頁的各種樣式。CSS基本布局16例以下布局資料原作者:OwｅｎBｒｉggs單行單列單行單列1：#contｅnt｛ float:lｅfｔ；?pａｄｄing：10ｐx； ｍargiｎ:20px;?backgrｏund：＃FＦF; border：5pｘｓｏｌid#6６6;?wiｄth:４０0ｐx；/*ie５wiｎｆudgeｂｅgｉns＊/?voicｅ-fａmiｌy:”＼”}＼"”； voice－ｆamilｙ:inherｉt;?wｉｄｔh:370px; }ｈtml＞body＃cｏntｅnt｛?ｗｉｄｔh:3７０ｐx;/＊ｉe５winｆuｄgeeｎｄｓ*/?}采用float浮在左上角,固定寬度。單行單列2：固定在左上角,固定寬度，采用的是絕對（absｏlute）定位。#contｅｎｔ｛ ｐositｉon:aｂsoｌutｅ； tｏp：0px；?left：0ｐｘ； paddinｇ：10pｘ; ｍａrgin:2０px;?ｂackground:#ＦFF； bordeｒ：5pxｓoｌiｄ#６66; ｗidth:400pｘ;/*ｉｅ5winfudｇebegins*/ ｖoice—fａmily:＂\”｝\＂＂;?ｖoｉce—ｆaｍily:ｉnheriｔ;?wiｄth：370px； ｝ｈtｍｌ〉ｂodｙ#contｅnt｛?width：37０px；/*iｅ５winfｕdgeendｓ＊／ ｝單行單列３:固定在左上角,不固定寬度，采用百分比(％）定義寬度來自適應(yīng)頁面.#conｔeｎｔ｛ ｐoｓitｉon:absoｌute； ｔoｐ：０px; leｆt:０ｐx；?ｍargｉｎ：２0ｐx；?bａｃkgroｕnd:＃FFF； ｂorｄer:5pxsolid＃666；?wiｄｔh：74%；/*ie5winｆuｄgebｅｇｉns*／?padding:10px1０％1０ｐｘ15%;?ｖoｉcｅ-fａmily："＼”}\＂";?ｖoiｃe-familｙ:iｎheｒit;?ｗｉdｔh：55%； ｐadding：１0px9％10px1１%; ｝html>ｂｏdy#conteｎt{ ｗidth：５5％； ｐａdding：10pｘ９％10ｐｘ11%； ｝/*ie5wｉｎfudgeendｓ＊／[本頁完整cｓs］單行單列4(推薦):固定寬度,采用在boｄy樣式中定義居中屬性(ｔext—aligｎ:center;）實(shí)現(xiàn)適應(yīng)頁面自動(dòng)居中。bodｙ{ margin：０px0px0px０px；?padｄiｎg:0pｘ0px0px０pｘ;?foｎt—ｆamily：ｖerｄaｎa，arial，helｖｅtｉｃａ，ｓans－serｉｆ； color:#c060; bａｃkgrｏund－coｌor：#ＣCC；?ｔext－ａligｎ:cenｔeｒ； /＊pａrt1of２centeｒinｇｈaｃk＊/ }＃coｎteｎt{?wiｄth：400px;?paｄdinｇ：１０ｐｘ； margin－toｐ:20px；?maｒgiｎ-bottｏm：2０ｐx； margin-riｇht：ａuto;?mａｒgin－left：autｏ; /＊operaｄoesnotｌike'margin:2０pｘａuto'＊／ bａcｋgrouｎｄ:#FFF; boｒdeｒ：5ｐxsoliｄ#666；?text-align：ｌeft；?/*ｐaｒｔ2of2ｃｅntｅｒiｎghack*/ ｗidtｈ:4０0px;/*ｉe5wｉnfudgeｂegiｎｓ＊／?ｖｏice—familｙ:＂＼”｝\＂"; ｖoicｅ—familｙ：iｎherit; widｔh:３７0ｐｘ;?｝ｈtmｌ＞body＃contｅnｔ｛ wｉdth：37０px；/＊ie5winfudgeends＊／?}單行兩列單行兩列1:兩列都固定寬度。第一列浮在左上角,第二列浮在第一列右邊。#cｏnteｎt{ float：left； padding:10ｐｘ；?mａrｇin：20px；?bａcｋground：＃FＦＦ;?border:５ｐxｓoliｄ＃6６6；?width:３０0px； /*ie5wｉｎfudｇｅbegｉｎs＊／?voicｅ—familｙ："\"｝\"”； voiｃｅ-famiｌｙ:inheｒiｔ；?widｔh:270pｘ；?｝html>ｂody#coｎtent｛?ｗidth：27０px; ／*ie5winfｕdgｅe(cuò)nds*／?}#ｃontent2｛?ｆloat：left； padｄiｎg:10ｐｘ； ｍarｇin：2０px；?ｂａckgｒｏｕnd:＃ＦFF； borｄer:５ｐｘｓoliｄ＃666； width：３00px； /*iｅ5ｗｉnfudgｅbｅgiｎs*/ ｖoｉce-famiｌy:"\”｝\＂”; voiｃｅ-faｍiｌy：iｎｈｅrit; widｔｈ：270px； ｝htmｌ＞body#coｎｔｅnt2｛?wiｄｔh：2７0px；?／＊ie5winｆｕdgｅe(cuò)nds＊/?｝［本單行兩列２：兩列都百分比寬度，但不滿屏。第一列固定在左上角,第二列浮在第一列右邊.#ｃontent{?flｏat:lｅft;?ｐadding:10ｐx2％10px2％; marｇiｎ:20ｐx1％2０px2%;?bａcｋｇrounｄ：＃FＦF; boｒder：5pxsolｉd＃６６6；?wｉｄth：４4％;／＊iｅ5ｗｉnfｕｄgebegins＊/?ｖoiｃe－fａmily:”＼＂｝\＂”;?voｉce—famｉly:ｉnhｅrit；?ｗidｔh：41％; }hｔｍl〉body＃coｎtent{?ｗiｄth:41％;／＊ie5wｉnfuｄgeenｄs*/?｝＃contenｔ２｛?fｌoaｔ：riｇht;?paddｉｎg：10ｐx2％１0px2％;?ｍａｒgiｎ:20ｐｘ2%2０px1%;?ｂaｃｋgｒound：＃FFF； ｂorder:5pｘsoｌｉd＃666； wiｄｔｈ:４４%；/*iｅ５wｉnｆuｄgebegｉns*/ ｖoicｅ—ｆamily："＼＂｝＼”"; ｖoiｃe—ｆａmiｌy：inherit；?width：41%；?}ｈtml〉body＃cｏnｔenｔ2{?width:41％；/＊ｉe5winfuｄgeends*/?｝單行兩列3：兩列都百分比寬度，滿屏.兩列都采用絕對定位。#content{?posｉtion：absｏlｕtｅ；?ｔｏp：0px；?leｆｔ：0px； pａddｉng：10ｐx2％１０px2％； marｇin：0px; borｄer：0pｘ;?backgrouｎd:＃FFF;?ｗiｄth:５０%；/＊ie５winfudgｅbegｉns＊／ voice－faｍilｙ：＂\＂}\””; voice－famiｌy:iｎherit;