CSS網(wǎng)頁布局都要哪些常見的規(guī)范_CSS網(wǎng)頁如何布局規(guī)范

　　CSS為HTML標(biāo)記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設(shè)計領(lǐng)域是一個突破。下面由學(xué)習(xí)啦小編為大家整理的，希望大家喜歡!

　　CSS網(wǎng)頁布局的規(guī)范

　　一.使用css縮寫

　　使用縮寫可以幫助減少你CSS文件的大小，更加容易閱讀。css縮寫的主要規(guī)則請參看《常用css縮寫語法總結(jié)》，這里就不展開描述。

　　二.明確定義單位，除非值為0

　　忘記定義尺寸的單位是CSS新手普遍的錯誤。在HTML中你可以只寫width="100"，但是在CSS中，你必須給一個準(zhǔn)確的單位，比如：width:100px width:100em。只有兩個例外情況可以不定義單位：行高和0值。除此以外，其他值都必須緊跟單位，注意，不要在數(shù)值和單位之間加空格。

　　三.區(qū)分大小寫

　　當(dāng)在XHTML中使用CSS，CSS里定義的元素名稱是區(qū)分大小寫的。為了避免這種錯誤，我建議所有的定義名稱都采用小寫。

　　class和id的值在HTML和XHTML中也是區(qū)分大小寫的，如果你一定要大小寫混合寫，請仔細(xì)確認(rèn)你在CSS的定義和XHTML里的標(biāo)簽是一致的。

　　四.取消class和id前的元素限定

　　當(dāng)你寫給一個元素定義class或者id，你可以省略前面的元素限定，因?yàn)镮D在一個頁面里是唯一的，而clas s可以在頁面中多次使用。你限定某個元素毫無意義。

　　五.默認(rèn)值

　　通常padding的默認(rèn)值為0，background-color的默認(rèn)值是transparent。但是在不同的瀏覽器默認(rèn)值可能不同。

　　六.不需要重復(fù)定義可繼承的值

　　CSS中，子元素自動繼承父元素的屬性值，象顏色、字體等，已經(jīng)在父元素中定義過的，在子元素中可以直接繼承，不需要重復(fù)定義。但是要注意，瀏覽器可能用一些默認(rèn)值覆蓋你的定義。

　　七.最近優(yōu)先原則

　　如果對同一個元素的定義有多種，以最接近(最小一級)的定義為最優(yōu)先，例如有這么一段代碼

　　Update: Lorem ipsum dolor set

　　在CSS文件中，你已經(jīng)定義了元素p，又定義了一個class"update"

　　八.多重class定義

　　一個標(biāo)簽可以同時定義多個class。例如：我們先定義兩個樣式，第一個樣式背景為#666;第二個樣式有10 px的邊框。

　　.one{width:200px;background:#666;}

　　.two{border:10px solid #F00;}

　　九.使用子選擇器(descendant selectors)

　　CSS初學(xué)者不知道使用子選擇器是影響他們效率的原因之一。子選擇器可以幫助你節(jié)約大量的class定義。

　　十.不需要給背景圖片路徑加引號

　　為了節(jié)省字節(jié)，我建議不要給背景圖片路徑加引號，因?yàn)橐柌皇潜仨毜?。例如?/p>

　　background:url("images/***.gif") #333;

　　可以寫為

　　background:url(images/***.gif) #333;

　　如果你加了引號，反而會引起一些瀏覽器的錯誤。

　　手寫css的方法

　　1. CSS字體屬性簡寫規(guī)則

　　一般用CSS設(shè)定字體屬性是這樣做的：

　　font-weight: bold;

　　font-style: italic;

　　font-varient: small-caps;

　　font-size: 1em;

　　line-height: 1.5em;

　　font-family: verdana,sans-serif

　　但也可以把它們?nèi)繉懙揭恍猩先ィ?/p>

　　font: bold italic small-caps 1em/1.5em verdana,sans-serif

　　真不錯!只有一點(diǎn)要提醒的：這種簡寫方法只有在同時指定font-size和font-family屬性時才起作用。而且，如果你沒有設(shè)定font-weight, font-style, 以及 font-varient ，他們會使用缺省值，這點(diǎn)要記上。

　　2. 同時使用兩個類

　　一般只能給一個元素設(shè)定一個類(Class)，但這并不意味著不能用兩個。事實(shí)上，你可以這樣：

　　...

　　同時給P元素兩個類，中間用空格格開，這樣所有text和side兩個類的屬性都會加到P元素上來。如果它們兩個類中的屬性有沖突的話，后設(shè)置的起作用，即在CSS文件中放在后面的類的屬性起作用。

　　3. CSS border的缺省值

　　通?？梢栽O(shè)定邊界的顏色，寬度和風(fēng)格，如：

　　border: 3px solid #000

　　這位把邊界顯示成3像素寬，黑色，實(shí)線。但實(shí)際上這里只需要指定風(fēng)格即可。

　　如果只指定了風(fēng)格，其他屬性就會使用缺省值。一般地，Border的寬度缺省是medium，一般等于3到4個像素;缺省的顏色是其中文字的顏色。如果這個值正好合適的話，就不用設(shè)那么多了。

　　4. CSS用于文檔打印

　　許多網(wǎng)站上都有一個針對打印的版本，但實(shí)際上這并不需要，因?yàn)榭梢杂肅SS來設(shè)定打印風(fēng)格。

　　也就是說，可以為頁面指定兩個CSS文件，一個用于屏幕顯示，一個用于打印：

　　第1行就是顯示，第2行是打印，注意其中的media屬性。

　　但應(yīng)該在打印CSS中寫什么東西呢?你可以按設(shè)計普通CSS的方法來設(shè)定它。設(shè)計的同時就可以把這個CSS設(shè)成顯示CSS來檢查它的效果。也許你會使用 display: none 這個命令來關(guān)掉一些裝飾圖片，再關(guān)掉一些導(dǎo)航按鈕。要想了解更多，可以看“打印差異”這一篇。

　　5. 圖片替換技巧

　　一般都建議用標(biāo)準(zhǔn)的HTML來顯示文字，而不要使用圖片，這樣不但快，也更具可讀性。但如果你想用一些特殊字體時，就只能用圖片了。

　　6. CSS box模型的另一種調(diào)整技巧

　　這個Box模型的調(diào)整主要是針對IE6之前的IE瀏覽器的，它們把邊界寬度和空白都算在元素寬度上。比如：

　　#box

　　{

　　width: 100px;

　　border: 5px;

　　padding: 20px

　　}

　　7. 塊元素居中對齊

　　如果想做個固定寬度的網(wǎng)頁并且想讓網(wǎng)頁水平居中的話，通常是這樣：

　　#content

　　{

　　width: 700px;

　　margin: 0 auto

　　}

　　8. 用CSS來處理垂直對齊

　　垂直對齊用表格可以很方便地實(shí)現(xiàn)，設(shè)定表格單元 vertical-align: middle 就可以了。但對CSS來說這沒用。如果你想設(shè)定一個導(dǎo)航條是2em高，而想讓導(dǎo)航文字垂直居中的話，設(shè)定這個屬性是沒用的。

　　CSS方法是什么呢?對了，把這些文字的行高設(shè)為 2em：line-height: 2em ，這就可以了。

　　9. CSS在容器內(nèi)定位

　　CSS的一個好處是可以把一個元素任意定位，在一個容器內(nèi)也可以。比如對這個容器：

　　#container

　　{

　　position: relative

　　}

　　10. 直通到屏幕底部的背景色

　　在垂直方向是進(jìn)行控制是CSS所不能的。如果你想讓導(dǎo)航欄和內(nèi)容欄一樣直通到頁面底部，用表格是很方便的，但如果只用這樣的CSS：

　　#navigation

　　{

　　background: blue;

　　width: 150px

　　}

　　DIVCSS常見錯誤是什么

　　1. 檢查HTML元素是否有拼寫錯誤、是否忘記結(jié)束標(biāo)記

　　即使是老手也經(jīng)常會弄錯div的嵌套關(guān)系?？梢杂胐reamweaver的驗(yàn)證功能檢查一下有無錯誤。

　　2. 檢查CSS是否正確

　　檢查一下有無拼寫錯誤、是否忘記結(jié)尾的 } 等?？梢岳肅leanCSS來檢查 CSS的拼寫錯誤。CleanCSS本是為CSS減肥的工具，但也能檢查出拼寫錯誤。

　　3. 確定錯誤發(fā)生的位置

　　假如錯誤影響了整體布局，則可以逐個刪除div塊，直到刪除某個div塊后顯示恢復(fù)正常，即可確定錯誤發(fā)生的位置。

　　4. 利用border屬性確定出錯元素的布局特性

　　使用float屬性布局一不小心就會出錯。這時為元素添加border屬性確定元素邊界，錯誤原因即水落石出。

　　5. float元素的父元素不能指定clear屬性

　　MacIE下假如對float的元素的父元素使用clear屬性，四周的float元素布局就會混亂。這是MacIE的聞名的bug，倘若不知道就會走彎路。

　　6. float元素務(wù)必指定width屬性

　　很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內(nèi)容如何，一定要為其指定width屬性。

　　另外指定元素時盡量使用em而不是px做單位。

　　7. float元素不能指定margin和padding等屬性

　　IE在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性(可以在float元素內(nèi)部嵌套一個div來設(shè)置margin和padding)。也可以使用hack方法為IE指定非凡的值。

　　8. float元素的寬度之和要小于100%

　　假如float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小于99%。

　　9. 是否重設(shè)了默認(rèn)的樣式?

　　某些屬性如margin、padding等，不同瀏覽器會有不同的解釋。因此最好在開發(fā)前首先將全體的margin、padding設(shè)置為0、列表樣式設(shè)置為none等。

　　10. 是否忘記了寫DTD?

　　假如無論怎樣調(diào)整不同瀏覽器顯示結(jié)果還是不一樣，那么可以檢查一下頁面開頭是不是忘了寫下面這行