免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

WEB標(biāo)準(zhǔn)中使用CSS的基礎(chǔ)教程

2023-12-18    分類: 網(wǎng)站建設(shè)

CSS過去經(jīng)常被用來定義字體的屬性,而現(xiàn)在可以用它來控制整個(gè)文檔的布局。然而,為了有效的用CSS來控制布局,需要做一些不同的處理,這種不同是跟用表格布局相對(duì)比的。

為了CSS可以高效的控制布局,結(jié)構(gòu)化、語義化的XHTML是必不可少的。

瀏覽器的支持 在過去幾年,瀏覽器對(duì)CSS的支持程度已經(jīng)改進(jìn)了很多。不幸的是,瀏覽器的開發(fā)商好象對(duì)實(shí)施開放的標(biāo)準(zhǔn)并不感興趣,所以不同瀏覽器對(duì)CSS的支持程度也大相徑庭。就算是支持程度最好的瀏覽器,在軟件中仍然有一些bug,使得瀏覽器以錯(cuò)誤的方式運(yùn)行。

現(xiàn)在對(duì)CSS支持比較好的瀏覽器有Mozilla (還有以Gecko為內(nèi)核的: Firefox, Camino, Netscape 6+), Opera和Safari (還有以 WebCore為內(nèi)核的: OmniWeb 4.5 and later)。 Internet Explorer 6/Win并沒有如此好的CSS支持程度,但是它將讓你為其做出大量的基礎(chǔ)工作。Internet Explorer 5/Mac對(duì)CSS 1的支持很出色, 但是卻不支持CSS 2。 IE 5.* for Windows的支持性也很好, 但是仍然有一些問題值得你去注意。早期版本的IE以及Netscape 6以前的版本就沒有必要提及了。

因?yàn)楝F(xiàn)在大多數(shù)人都使用IE/WIN,所以你將不得不讓它成為特殊分子。這并不是說,你不能或者不應(yīng)該使用有更好支持CSS能力的瀏覽器來提高他們的設(shè)計(jì)能力。

現(xiàn)在在用的瀏覽器中,并不是所有的瀏覽器都有很好的CSS支持能力,使其能夠具有解釋用CSS布局的優(yōu)秀圖形化站點(diǎn)的能力。幸運(yùn)的是,對(duì)于大多數(shù)網(wǎng)站,只有很小比例的訪問者還在使用不能解釋CSS的老瀏覽器。

值得注意的是,這些人并不會(huì)被排斥在外的。在90年代,瀏覽器檢驗(yàn)?zāi)_本是一個(gè)很流行的方法,它告訴那些使用“錯(cuò)誤”瀏覽器的使用者一個(gè)新的網(wǎng)址,那個(gè)網(wǎng)址告訴他們?nèi)ド?jí)瀏覽器,好重新連接到那個(gè)網(wǎng)站。

現(xiàn)在,你可以以一種更好的辦法應(yīng)付不被支持的瀏覽器。使用邏輯化、語義化的一個(gè)大的好處就是它使文檔在沒有CSS時(shí),仍然可以使用和訪問。表現(xiàn)(就是文檔看上去的樣子)在一個(gè)支持性好的瀏覽器中也將呈現(xiàn)的不一樣,但是它的內(nèi)容將永遠(yuǎn)不變,大多數(shù)情況,對(duì)于訪問網(wǎng)站的人來說,內(nèi)容實(shí)際上比表現(xiàn)的方式更加重要。這就是為什么給那些支持性不好的瀏覽器發(fā)送一個(gè)沒有樣式的頁面,要比把他們排斥在外要好的原因。

有好幾種方式去解決這個(gè)問題:一種最常見的方法是使用 @import來鏈接相應(yīng)的的CSS文件。Netscape 4和老的瀏覽器不支持@import所以將不會(huì)導(dǎo)入CSS文件。還有許多方法來向?yàn)g覽器隱藏CSS。大多數(shù)隱藏CSS的方法是利用了瀏覽器對(duì)CSS解釋時(shí)的漏洞。這意味著總會(huì)存在瀏覽器通過升級(jí)彌補(bǔ)漏洞的危險(xiǎn)。所以越少的依賴CSS hacks(CSS漏洞)越好。

很明顯的,你可以使用服務(wù)器端技術(shù)去做一個(gè)瀏覽器檢測,然后針對(duì)不同的瀏覽器,發(fā)送不同的CSS文件。如果你這么做了,你必須要確保檢測腳本是通用的,以避免因?yàn)闉g覽器的升級(jí)或者新的瀏覽器發(fā)布導(dǎo)致發(fā)送錯(cuò)誤的CSS文件。

用不同的方法應(yīng)用CSS

有以下幾種方法使一個(gè)HTML文檔中的元素應(yīng)用CSS。

外鏈?zhǔn)?br />
把所有的CSS規(guī)則都寫在一個(gè)或幾個(gè)單獨(dú)的文件中,這種做法有許多優(yōu)點(diǎn)。HTML文檔會(huì)變得非常的小,CSS文件被存在瀏覽器的緩存中,僅僅需要下載一次即可,并且你只需要修改一個(gè)文件就可以改變整個(gè)網(wǎng)站的樣式。一個(gè)外鏈?zhǔn)降腃SS文件,見如下:

h1 { font-weight:bold; }

注意:在外鏈的CSS中沒有<style>標(biāo)簽。

你可以使用 <link>標(biāo)簽來把一個(gè)CSS鏈接到HTML文檔中:

<link rel="stylesheet" type="text/css" href="styles.css" />

或者在<style>中使用一個(gè)@import標(biāo)簽 :

<style type="text/css"> @import url("styles.css"); </style>直接引用

通過使用style屬性,你可以直接的在HTML中應(yīng)用CSS:

<h1 style="font-weight:bold;">cdcxhl.com</h1>

這種情況,應(yīng)盡量的避免,因?yàn)樗呀Y(jié)構(gòu)和表現(xiàn)混在一起了。

內(nèi)嵌式

內(nèi)嵌式CSS是寫在<style>標(biāo)簽中,也是寫在文檔的<head>中:

<style type="text/css"> h1 { font-weight:bold; } </style>

這種情況也應(yīng)該盡量避免,最好還是把HTML和CSS用單獨(dú)的文件存放。

CSS的語法

一條CSS的規(guī)則是由一個(gè)選擇器和一個(gè)或多個(gè)聲明組成。選擇器決定了CSS規(guī)則可作用于文檔中的哪個(gè)或哪些元素。一個(gè)屬性和一個(gè)值組成了一個(gè)聲明,聲明要用大括號(hào)({})括起來,并且每個(gè)聲明要用分號(hào)(;)結(jié)束。

一個(gè)簡單的CSS規(guī)則如下:

p { color:#0f0; font-weight:bold; }

這個(gè)例子中, p就是選擇器,表示這條規(guī)則將作用于文檔中的所有被<p>包圍的內(nèi)容。這個(gè)規(guī)則中,有兩條聲明,它們共同作用,使 <p>中的內(nèi)容所有字體為綠色并且加粗。

想了解更詳細(xì)的CSS規(guī)則,可以下載一個(gè)CSS使用手冊(cè)。

多余的元素和類

當(dāng)我們剛開始學(xué)CSS時(shí),很容犯一些錯(cuò)誤:使用不必要的XHTML元素、多余的類和額外的 <div>。并不是說這些代碼是不規(guī)范的,而是它與一些原則(如結(jié)構(gòu)與表現(xiàn)相分離,使用簡單的整潔的標(biāo)記)相矛盾。

下面是一個(gè)使用不必要XHTML元素的例子:

<h3><em>Headline</em></h3>

如果你想使標(biāo)題行變成斜體,可以使用CSS來重新定義 <h3>元素:

h3 { font-style:italic; }

下面是一個(gè)使用多余的類的例子:

<div id="main"> <div class="maincontent"> <p class="maincontenttext"> 網(wǎng)頁教學(xué)網(wǎng)CSS技術(shù) </p> </div> </div>

下面這么寫可能更好:

<div id="main"> <div> <p> 網(wǎng)頁教學(xué)網(wǎng)CSS技術(shù) </p> </div> </div>

為了控制div#main中的元素,你可以在CSS代碼中使用相關(guān)的的選擇器,例如:

div#main p { /* rules */ }

多數(shù)情況下,CSS允許你把想要的樣式來定義XHTML,而不用增加額外的的標(biāo)記。但是有的時(shí)候,增加一些額外的代碼也是必要的。

CSS小竅門

很明顯,一旦你去很認(rèn)真的學(xué)習(xí)使用CSS,你一定會(huì)發(fā)現(xiàn)某些問題,這些問題可能是由誤解造成的,可能是由對(duì)規(guī)則的不了解或者瀏覽器的漏洞造成的。CSS Crib Sheet就是一個(gè)好建議的薈萃,有Dave Shea整理,下面還將有一些重要的而且是Dave沒有提及的小竅門。

先校驗(yàn):在調(diào)試的時(shí)候,先由校驗(yàn)開始吧,HTML和CSS都要進(jìn)行校驗(yàn)。許多問題都是由不規(guī)范代碼引起的。

先在最先進(jìn)的瀏覽器中調(diào)試,然后才輪到其他的瀏覽器: 如果你剛開始就用對(duì)CSS支持不好的瀏覽器調(diào)試,那么你所編的CSS將會(huì)逐漸適應(yīng)這種錯(cuò)誤的處理。當(dāng)你繼續(xù)在更先進(jìn)的瀏覽器中測試,一些你所不希望的內(nèi)容就會(huì)出現(xiàn)了。最好還是首先在一個(gè)有很好標(biāo)準(zhǔn)兼容性的瀏覽器中運(yùn)行,然后再把代碼拿到老一點(diǎn)的瀏覽器中去測試。

理解CSS的盒模型:為了獲得一個(gè)元素的實(shí)際的寬度和高度,你需要用padding和border來增加它的 width或者h(yuǎn)eight。在Internet Explorer 5.*/Win中, padding和border是被包括在已知的width和height。

假設(shè)你有如下的CSS代碼:

div.box { width:300px; padding:20px; border:10px solid; } 所以這個(gè)div的總寬度是360px.

10px + 20px + 300px + 20px + 10px = 360px 在Internet Explorer 5.*/Win中,實(shí)際上總寬度為300px, 內(nèi)容的寬度為240px.

300px - 10px - 20px - 20px - 10px = 240px 為了繞過這個(gè)問題, 你同樣可以使用CSS hack來給不同的瀏覽器提供不同的值,或者你盡量避免在同一個(gè)元素中同時(shí)定義width 和 padding或者width和border。

為非零的數(shù)值加上單位:CSS要求一些屬性值(如width、height、font-size)必須要有單位。當(dāng)屬性值為0時(shí)是可以例外的。在那種情況下,沒有單位也是必須的,因?yàn)?就是0,什么單位也都無所謂了。

理解漂浮物:盡管漂浮物這個(gè)概念很難理解,但是它很重要,因?yàn)镃SS中會(huì)頻繁的使用它來布局。

“LoVe/HAte?” 按照如下順序?yàn)殒溄佣x偽類:Link, Visited, Hover, Active.

“TRouBLed?”當(dāng)使用簡寫來定義margin、padding和border時(shí), 他們的順序是從上開始的順時(shí)針方向: 上、右、下、左。

以其功能給CLASS和ID命名,而不是它的表現(xiàn): 如果你有一個(gè)CLASS名為.smallblue, 過后你決定用它來定位文本,使其為大號(hào)、紅色,那么CLASS的名字就會(huì)被弄混淆的。最好能用名字來描述功能和結(jié)構(gòu),如.copyright和.im portant。

CSS是個(gè)敏感的東西:當(dāng)HTML屬性中的 class和id與CSS一起使用時(shí),那可就要小心了。

檢查你的ID:文檔中一個(gè)元素只能使用一個(gè)id,且id必須唯一,而class可以被多個(gè)元素所共享。

使用合法的字符為class和 id命名: Class和id的名字只能由數(shù)字、字母和連字符組成,數(shù)字和連字符是不可以開頭的。

正確的注釋:CSS的注釋是以/*開頭,以*/結(jié)尾的:

/* This is a comment */ CSS布局

有很多例子和階梯教程指導(dǎo)您如何使用CSS布局。建議您從簡單的例子開始,學(xué)習(xí)它的原理,然后再去學(xué)習(xí)復(fù)雜的布局。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!

本文標(biāo)題:WEB標(biāo)準(zhǔn)中使用CSS的基礎(chǔ)教程
鏈接地址:http://m.newbst.com/news32/309282.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站外貿(mào)網(wǎng)站建設(shè)面包屑導(dǎo)航電子商務(wù)網(wǎng)站維護(hù)自適應(yīng)網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)