WEB標(biāo)準(zhǔn)中使用CSS的基礎(chǔ)教程
2023-12-18 分類(lèi)： 網(wǎng)站建設(shè)
CSS過(guò)去經(jīng)常被用來(lái)定義字體的屬性，而現(xiàn)在可以用它來(lái)控制整個(gè)文檔的布局。然而，為了有效的用CSS來(lái)控制布局，需要做一些不同的處理，這種不同是跟用表格布局相對(duì)比的。
為了CSS可以高效的控制布局，結(jié)構(gòu)化、語(yǔ)義化的XHTML是必不可少的。
瀏覽器的支持 在過(guò)去幾年，瀏覽器對(duì)CSS的支持程度已經(jīng)改進(jìn)了很多。不幸的是，瀏覽器的開(kāi)發(fā)商好象對(duì)實(shí)施開(kāi)放的標(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并沒(méi)有如此好的CSS支持程度，但是它將讓你為其做出大量的基礎(chǔ)工作。Internet Explorer 5/Mac對(duì)CSS 1的支持很出色, 但是卻不支持CSS 2。 IE 5.* for Windows的支持性也很好, 但是仍然有一些問(wèn)題值得你去注意。早期版本的IE以及Netscape 6以前的版本就沒(méi)有必要提及了。
因?yàn)楝F(xiàn)在大多數(shù)人都使用IE/WIN，所以你將不得不讓它成為特殊分子。這并不是說(shuō)，你不能或者不應(yīng)該使用有更好支持CSS能力的瀏覽器來(lái)提高他們的設(shè)計(jì)能力。
現(xiàn)在在用的瀏覽器中，并不是所有的瀏覽器都有很好的CSS支持能力，使其能夠具有解釋用CSS布局的優(yōu)秀圖形化站點(diǎn)的能力。幸運(yùn)的是，對(duì)于大多數(shù)網(wǎng)站，只有很小比例的訪(fǎng)問(wèn)者還在使用不能解釋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)付不被支持的瀏覽器。使用邏輯化、語(yǔ)義化的一個(gè)大的好處就是它使文檔在沒(méi)有CSS時(shí)，仍然可以使用和訪(fǎng)問(wèn)。表現(xiàn)（就是文檔看上去的樣子）在一個(gè)支持性好的瀏覽器中也將呈現(xiàn)的不一樣，但是它的內(nèi)容將永遠(yuǎn)不變，大多數(shù)情況，對(duì)于訪(fǎng)問(wèn)網(wǎng)站的人來(lái)說(shuō)，內(nèi)容實(shí)際上比表現(xiàn)的方式更加重要。這就是為什么給那些支持性不好的瀏覽器發(fā)送一個(gè)沒(méi)有樣式的頁(yè)面，要比把他們排斥在外要好的原因。
有好幾種方式去解決這個(gè)問(wèn)題：一種最常見(jiàn)的方法是使用 @import來(lái)鏈接相應(yīng)的的CSS文件。Netscape 4和老的瀏覽器不支持@import所以將不會(huì)導(dǎo)入CSS文件。還有許多方法來(lái)向?yàn)g覽器隱藏CSS。大多數(shù)隱藏CSS的方法是利用了瀏覽器對(duì)CSS解釋時(shí)的漏洞。這意味著總會(huì)存在瀏覽器通過(guò)升級(jí)彌補(bǔ)漏洞的危險(xiǎn)。所以越少的依賴(lài)CSS hacks（CSS漏洞）越好。
很明顯的，你可以使用服務(wù)器端技術(shù)去做一個(gè)瀏覽器檢測(cè)，然后針對(duì)不同的瀏覽器，發(fā)送不同的CSS文件。如果你這么做了，你必須要確保檢測(cè)腳本是通用的，以避免因?yàn)闉g覽器的升級(jí)或者新的瀏覽器發(fā)布導(dǎo)致發(fā)送錯(cuò)誤的CSS文件。
用不同的方法應(yīng)用CSS
有以下幾種方法使一個(gè)HTML文檔中的元素應(yīng)用CSS。
外鏈?zhǔn)?br />
把所有的CSS規(guī)則都寫(xiě)在一個(gè)或幾個(gè)單獨(dú)的文件中，這種做法有許多優(yōu)點(diǎn)。HTML文檔會(huì)變得非常的小，CSS文件被存在瀏覽器的緩存中，僅僅需要下載一次即可，并且你只需要修改一個(gè)文件就可以改變整個(gè)網(wǎng)站的樣式。一個(gè)外鏈?zhǔn)降腃SS文件，見(jiàn)如下:
h1 { font-weight:bold; }
注意:在外鏈的CSS中沒(méi)有<style>標(biāo)簽。
你可以使用 <link>標(biāo)簽來(lái)把一個(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>直接引用
通過(guò)使用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是寫(xiě)在<style>標(biāo)簽中，也是寫(xiě)在文檔的<head>中:
<style type="text/css"> h1 { font-weight:bold; } </style>
這種情況也應(yīng)該盡量避免，最好還是把HTML和CSS用單獨(dú)的文件存放。
CSS的語(yǔ)法
一條CSS的規(guī)則是由一個(gè)選擇器和一個(gè)或多個(gè)聲明組成。選擇器決定了CSS規(guī)則可作用于文檔中的哪個(gè)或哪些元素。一個(gè)屬性和一個(gè)值組成了一個(gè)聲明，聲明要用大括號(hào)（{}）括起來(lái)，并且每個(gè)聲明要用分號(hào)（；）結(jié)束。
一個(gè)簡(jiǎn)單的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è)。
多余的元素和類(lèi)
當(dāng)我們剛開(kāi)始學(xué)CSS時(shí)，很容犯一些錯(cuò)誤：使用不必要的XHTML元素、多余的類(lèi)和額外的 <div>。并不是說(shuō)這些代碼是不規(guī)范的，而是它與一些原則（如結(jié)構(gòu)與表現(xiàn)相分離，使用簡(jiǎn)單的整潔的標(biāo)記）相矛盾。
下面是一個(gè)使用不必要XHTML元素的例子:
<h3><em>Headline</em></h3>
如果你想使標(biāo)題行變成斜體，可以使用CSS來(lái)重新定義 <h3>元素:
h3 { font-style:italic; }
下面是一個(gè)使用多余的類(lèi)的例子:
<div id="main"> <div class="maincontent"> <p class="maincontenttext"> 網(wǎng)頁(yè)教學(xué)網(wǎng)CSS技術(shù) </p> </div> </div>
下面這么寫(xiě)可能更好:
<div id="main"> <div> <p> 網(wǎng)頁(yè)教學(xué)網(wǎng)CSS技術(shù) </p> </div> </div>
為了控制div#main中的元素，你可以在CSS代碼中使用相關(guān)的的選擇器，例如:
div#main p { /* rules */ }
多數(shù)情況下，CSS允許你把想要的樣式來(lái)定義XHTML，而不用增加額外的的標(biāo)記。但是有的時(shí)候，增加一些額外的代碼也是必要的。
CSS小竅門(mén)
很明顯，一旦你去很認(rèn)真的學(xué)習(xí)使用CSS，你一定會(huì)發(fā)現(xiàn)某些問(wèn)題，這些問(wèn)題可能是由誤解造成的，可能是由對(duì)規(guī)則的不了解或者瀏覽器的漏洞造成的。CSS Crib Sheet就是一個(gè)好建議的薈萃，有Dave Shea整理，下面還將有一些重要的而且是Dave沒(méi)有提及的小竅門(mén)。
先校驗(yàn):在調(diào)試的時(shí)候，先由校驗(yàn)開(kāi)始吧，HTML和CSS都要進(jìn)行校驗(yàn)。許多問(wèn)題都是由不規(guī)范代碼引起的。
先在最先進(jìn)的瀏覽器中調(diào)試，然后才輪到其他的瀏覽器: 如果你剛開(kāi)始就用對(duì)CSS支持不好的瀏覽器調(diào)試，那么你所編的CSS將會(huì)逐漸適應(yīng)這種錯(cuò)誤的處理。當(dāng)你繼續(xù)在更先進(jìn)的瀏覽器中測(cè)試，一些你所不希望的內(nèi)容就會(huì)出現(xiàn)了。最好還是首先在一個(gè)有很好標(biāo)準(zhǔn)兼容性的瀏覽器中運(yùn)行，然后再把代碼拿到老一點(diǎn)的瀏覽器中去測(cè)試。
理解CSS的盒模型:為了獲得一個(gè)元素的實(shí)際的寬度和高度，你需要用padding和border來(lái)增加它的 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 為了繞過(guò)這個(gè)問(wèn)題, 你同樣可以使用CSS hack來(lái)給不同的瀏覽器提供不同的值，或者你盡量避免在同一個(gè)元素中同時(shí)定義width 和 padding或者width和border。
為非零的數(shù)值加上單位:CSS要求一些屬性值（如width、height、font-size）必須要有單位。當(dāng)屬性值為0時(shí)是可以例外的。在那種情況下，沒(méi)有單位也是必須的，因?yàn)?就是0，什么單位也都無(wú)所謂了。
理解漂浮物:盡管漂浮物這個(gè)概念很難理解，但是它很重要，因?yàn)镃SS中會(huì)頻繁的使用它來(lái)布局。
“LoVe/HAte?” 按照如下順序?yàn)殒溄佣x偽類(lèi)：Link, Visited, Hover, Active.
“TRouBLed?”當(dāng)使用簡(jiǎn)寫(xiě)來(lái)定義margin、padding和border時(shí), 他們的順序是從上開(kāi)始的順時(shí)針?lè)较? 上、右、下、左。
以其功能給CLASS和ID命名，而不是它的表現(xiàn): 如果你有一個(gè)CLASS名為.smallblue, 過(guò)后你決定用它來(lái)定位文本，使其為大號(hào)、紅色，那么CLASS的名字就會(huì)被弄混淆的。最好能用名字來(lái)描述功能和結(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ù)字和連字符是不可以開(kāi)頭的。
正確的注釋:CSS的注釋是以/*開(kāi)頭，以*/結(jié)尾的:
/* This is a comment */ CSS布局
有很多例子和階梯教程指導(dǎo)您如何使用CSS布局。建議您從簡(jiǎn)單的例子開(kāi)始，學(xué)習(xí)它的原理，然后再去學(xué)習(xí)復(fù)雜的布局。
本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！
為了CSS可以高效的控制布局，結(jié)構(gòu)化、語(yǔ)義化的XHTML是必不可少的。
瀏覽器的支持 在過(guò)去幾年，瀏覽器對(duì)CSS的支持程度已經(jīng)改進(jìn)了很多。不幸的是，瀏覽器的開(kāi)發(fā)商好象對(duì)實(shí)施開(kāi)放的標(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并沒(méi)有如此好的CSS支持程度，但是它將讓你為其做出大量的基礎(chǔ)工作。Internet Explorer 5/Mac對(duì)CSS 1的支持很出色, 但是卻不支持CSS 2。 IE 5.* for Windows的支持性也很好, 但是仍然有一些問(wèn)題值得你去注意。早期版本的IE以及Netscape 6以前的版本就沒(méi)有必要提及了。
因?yàn)楝F(xiàn)在大多數(shù)人都使用IE/WIN，所以你將不得不讓它成為特殊分子。這并不是說(shuō)，你不能或者不應(yīng)該使用有更好支持CSS能力的瀏覽器來(lái)提高他們的設(shè)計(jì)能力。
現(xiàn)在在用的瀏覽器中，并不是所有的瀏覽器都有很好的CSS支持能力，使其能夠具有解釋用CSS布局的優(yōu)秀圖形化站點(diǎn)的能力。幸運(yùn)的是，對(duì)于大多數(shù)網(wǎng)站，只有很小比例的訪(fǎng)問(wèn)者還在使用不能解釋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)付不被支持的瀏覽器。使用邏輯化、語(yǔ)義化的一個(gè)大的好處就是它使文檔在沒(méi)有CSS時(shí)，仍然可以使用和訪(fǎng)問(wèn)。表現(xiàn)（就是文檔看上去的樣子）在一個(gè)支持性好的瀏覽器中也將呈現(xiàn)的不一樣，但是它的內(nèi)容將永遠(yuǎn)不變，大多數(shù)情況，對(duì)于訪(fǎng)問(wèn)網(wǎng)站的人來(lái)說(shuō)，內(nèi)容實(shí)際上比表現(xiàn)的方式更加重要。這就是為什么給那些支持性不好的瀏覽器發(fā)送一個(gè)沒(méi)有樣式的頁(yè)面，要比把他們排斥在外要好的原因。
有好幾種方式去解決這個(gè)問(wèn)題：一種最常見(jiàn)的方法是使用 @import來(lái)鏈接相應(yīng)的的CSS文件。Netscape 4和老的瀏覽器不支持@import所以將不會(huì)導(dǎo)入CSS文件。還有許多方法來(lái)向?yàn)g覽器隱藏CSS。大多數(shù)隱藏CSS的方法是利用了瀏覽器對(duì)CSS解釋時(shí)的漏洞。這意味著總會(huì)存在瀏覽器通過(guò)升級(jí)彌補(bǔ)漏洞的危險(xiǎn)。所以越少的依賴(lài)CSS hacks（CSS漏洞）越好。
很明顯的，你可以使用服務(wù)器端技術(shù)去做一個(gè)瀏覽器檢測(cè)，然后針對(duì)不同的瀏覽器，發(fā)送不同的CSS文件。如果你這么做了，你必須要確保檢測(cè)腳本是通用的，以避免因?yàn)闉g覽器的升級(jí)或者新的瀏覽器發(fā)布導(dǎo)致發(fā)送錯(cuò)誤的CSS文件。
用不同的方法應(yīng)用CSS
有以下幾種方法使一個(gè)HTML文檔中的元素應(yīng)用CSS。
外鏈?zhǔn)?br />
把所有的CSS規(guī)則都寫(xiě)在一個(gè)或幾個(gè)單獨(dú)的文件中，這種做法有許多優(yōu)點(diǎn)。HTML文檔會(huì)變得非常的小，CSS文件被存在瀏覽器的緩存中，僅僅需要下載一次即可，并且你只需要修改一個(gè)文件就可以改變整個(gè)網(wǎng)站的樣式。一個(gè)外鏈?zhǔn)降腃SS文件，見(jiàn)如下:
h1 { font-weight:bold; }
注意:在外鏈的CSS中沒(méi)有<style>標(biāo)簽。
你可以使用 <link>標(biāo)簽來(lái)把一個(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>直接引用
通過(guò)使用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是寫(xiě)在<style>標(biāo)簽中，也是寫(xiě)在文檔的<head>中:
<style type="text/css"> h1 { font-weight:bold; } </style>
這種情況也應(yīng)該盡量避免，最好還是把HTML和CSS用單獨(dú)的文件存放。
CSS的語(yǔ)法
一條CSS的規(guī)則是由一個(gè)選擇器和一個(gè)或多個(gè)聲明組成。選擇器決定了CSS規(guī)則可作用于文檔中的哪個(gè)或哪些元素。一個(gè)屬性和一個(gè)值組成了一個(gè)聲明，聲明要用大括號(hào)（{}）括起來(lái)，并且每個(gè)聲明要用分號(hào)（；）結(jié)束。
一個(gè)簡(jiǎn)單的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è)。
多余的元素和類(lèi)
當(dāng)我們剛開(kāi)始學(xué)CSS時(shí)，很容犯一些錯(cuò)誤：使用不必要的XHTML元素、多余的類(lèi)和額外的 <div>。并不是說(shuō)這些代碼是不規(guī)范的，而是它與一些原則（如結(jié)構(gòu)與表現(xiàn)相分離，使用簡(jiǎn)單的整潔的標(biāo)記）相矛盾。
下面是一個(gè)使用不必要XHTML元素的例子:
<h3><em>Headline</em></h3>
如果你想使標(biāo)題行變成斜體，可以使用CSS來(lái)重新定義 <h3>元素:
h3 { font-style:italic; }
下面是一個(gè)使用多余的類(lèi)的例子:
<div id="main"> <div class="maincontent"> <p class="maincontenttext"> 網(wǎng)頁(yè)教學(xué)網(wǎng)CSS技術(shù) </p> </div> </div>
下面這么寫(xiě)可能更好:
<div id="main"> <div> <p> 網(wǎng)頁(yè)教學(xué)網(wǎng)CSS技術(shù) </p> </div> </div>
為了控制div#main中的元素，你可以在CSS代碼中使用相關(guān)的的選擇器，例如:
div#main p { /* rules */ }
多數(shù)情況下，CSS允許你把想要的樣式來(lái)定義XHTML，而不用增加額外的的標(biāo)記。但是有的時(shí)候，增加一些額外的代碼也是必要的。
CSS小竅門(mén)
很明顯，一旦你去很認(rèn)真的學(xué)習(xí)使用CSS，你一定會(huì)發(fā)現(xiàn)某些問(wèn)題，這些問(wèn)題可能是由誤解造成的，可能是由對(duì)規(guī)則的不了解或者瀏覽器的漏洞造成的。CSS Crib Sheet就是一個(gè)好建議的薈萃，有Dave Shea整理，下面還將有一些重要的而且是Dave沒(méi)有提及的小竅門(mén)。
先校驗(yàn):在調(diào)試的時(shí)候，先由校驗(yàn)開(kāi)始吧，HTML和CSS都要進(jìn)行校驗(yàn)。許多問(wèn)題都是由不規(guī)范代碼引起的。
先在最先進(jìn)的瀏覽器中調(diào)試，然后才輪到其他的瀏覽器: 如果你剛開(kāi)始就用對(duì)CSS支持不好的瀏覽器調(diào)試，那么你所編的CSS將會(huì)逐漸適應(yīng)這種錯(cuò)誤的處理。當(dāng)你繼續(xù)在更先進(jìn)的瀏覽器中測(cè)試，一些你所不希望的內(nèi)容就會(huì)出現(xiàn)了。最好還是首先在一個(gè)有很好標(biāo)準(zhǔn)兼容性的瀏覽器中運(yùn)行，然后再把代碼拿到老一點(diǎn)的瀏覽器中去測(cè)試。
理解CSS的盒模型:為了獲得一個(gè)元素的實(shí)際的寬度和高度，你需要用padding和border來(lái)增加它的 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 為了繞過(guò)這個(gè)問(wèn)題, 你同樣可以使用CSS hack來(lái)給不同的瀏覽器提供不同的值，或者你盡量避免在同一個(gè)元素中同時(shí)定義width 和 padding或者width和border。
為非零的數(shù)值加上單位:CSS要求一些屬性值（如width、height、font-size）必須要有單位。當(dāng)屬性值為0時(shí)是可以例外的。在那種情況下，沒(méi)有單位也是必須的，因?yàn)?就是0，什么單位也都無(wú)所謂了。
理解漂浮物:盡管漂浮物這個(gè)概念很難理解，但是它很重要，因?yàn)镃SS中會(huì)頻繁的使用它來(lái)布局。
“LoVe/HAte?” 按照如下順序?yàn)殒溄佣x偽類(lèi)：Link, Visited, Hover, Active.
“TRouBLed?”當(dāng)使用簡(jiǎn)寫(xiě)來(lái)定義margin、padding和border時(shí), 他們的順序是從上開(kāi)始的順時(shí)針?lè)较? 上、右、下、左。
以其功能給CLASS和ID命名，而不是它的表現(xiàn): 如果你有一個(gè)CLASS名為.smallblue, 過(guò)后你決定用它來(lái)定位文本，使其為大號(hào)、紅色，那么CLASS的名字就會(huì)被弄混淆的。最好能用名字來(lái)描述功能和結(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ù)字和連字符是不可以開(kāi)頭的。
正確的注釋:CSS的注釋是以/*開(kāi)頭，以*/結(jié)尾的:
/* This is a comment */ CSS布局
有很多例子和階梯教程指導(dǎo)您如何使用CSS布局。建議您從簡(jiǎn)單的例子開(kāi)始，學(xué)習(xí)它的原理，然后再去學(xué)習(xí)復(fù)雜的布局。
本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！
本文標(biāo)題：WEB標(biāo)準(zhǔn)中使用CSS的基礎(chǔ)教程
鏈接地址：http://muchs.cn/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)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 5分鐘搭建豐富的內(nèi)容平臺(tái)(Markdown) 2023-12-18
- 高品質(zhì)的新聞稿件對(duì)公司成都網(wǎng)站建設(shè)推廣的實(shí)際意義 2023-12-18
- 建一個(gè)響應(yīng)式網(wǎng)站需要做些什么？ 2023-12-18
- 雍熙干貨分享大型酒店服務(wù)行業(yè)網(wǎng)站建設(shè)有哪些注意事項(xiàng) 2023-12-18
- 化妝品代加工廠做網(wǎng)絡(luò)營(yíng)銷(xiāo)要注意的點(diǎn)有哪些呢？網(wǎng)絡(luò)推廣營(yíng)銷(xiāo)要點(diǎn) 2023-12-18
- 如何讓網(wǎng)站獲得較好的排名? 2023-12-18
- Linux服務(wù)器和Windows服務(wù)器的好處 2023-12-18
- 網(wǎng)站推廣之論壇推廣小妙招 2023-12-18
- H5網(wǎng)站好不好？看看H5網(wǎng)站有哪些特點(diǎn)(極米h5好不好) 2023-12-18
- 快速了解css特異性 2023-12-18
- 網(wǎng)站建設(shè)中如何提高網(wǎng)站效果？ 2023-12-18
- 網(wǎng)站建設(shè)模板站怎么做 2023-12-18
- 關(guān)于提高百度經(jīng)驗(yàn)通過(guò)率的一些方法 2023-12-18
- 成都網(wǎng)站制作怎樣讓新網(wǎng)站快速收錄 2023-12-18
- 成都做網(wǎng)站之網(wǎng)站配色有技巧 2023-12-18
- 成都外貿(mào)推廣要多少錢(qián) 2023-12-18
- 成都英文網(wǎng)站建設(shè)大概多少費(fèi)用 2023-12-18
- 小程序和微信微信官方賬號(hào)有什么區(qū)別？哪一個(gè)能給企業(yè)帶來(lái)時(shí)效性利益？ 2023-12-18
- 什么是網(wǎng)絡(luò)服務(wù)器？網(wǎng)絡(luò)服務(wù)器如何工作？ 2023-12-18