CSS指層疊樣式表 (Cascading Style Sheets)，大家知道網(wǎng)站的前端是離不開CSS樣式的，那如何能學(xué)好這個(gè)技術(shù)呢?下面由學(xué)習(xí)啦小編為大家整理的CSS網(wǎng)頁設(shè)計(jì)方法，希望大家喜歡!

　　CSS網(wǎng)頁設(shè)計(jì)方法

　　一.使用css縮寫

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

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

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

　　三.區(qū)分大小寫

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

　　class和id的值在HTML和XHTML中也是區(qū)分大小寫的，如果你一定要大小寫旌閑矗?胱邢溉啡夏閽贑SS的定義和XHTML里的標(biāo)簽是一致的。

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

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

　　div#content?{?/*?declarations?*/?}?

　　fieldset.details?{?/*?declarations?*/?}?

　　可以寫成

　　#content?{?/*?declarations?*/?}?

　　.details?{?/*?declarations?*/?}?

　　這樣可以節(jié)省一些字節(jié)。

　　五.默認(rèn)值

　　通常padding的默認(rèn)值為0，background-color的默認(rèn)值是transparent。但是在不同的瀏覽器默認(rèn)值可能不同。如果怕有沖突，可以在樣式表一開始就先定義所有元素的margin和padding值都為0，象這樣:

　　*?{

　　margin:0;

　　padding:0;

　　}

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

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

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

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

　　Update: Lorem ipsum dolor set

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

　　p?{

　　margin:1em?0;

　　font-size:1em;

　　color:#333;

　　}

　　.update?{

　　font-weight:bold;

　　color:#600;

　　}

　　這兩個(gè)定義中，class="update"將被使用，因?yàn)閏lass比p更近。你可以查閱W3C的《 Calculating a selector’s specificity》 了解更多。

　　八.多重class定義

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

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

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

　　在頁面代碼中，我們可以這樣調(diào)用

　　這樣最終的顯示效果是這個(gè)div既有#666的背景，也有10px的邊框。是的，這樣做是可以的，你可以嘗試一下。

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

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

　　Item 1>

　　Item 1

　　Item 1

　　這段代碼的CSS定義是:

　　div#subnav?ul?{?/*?Some?styling?*/?}

　　div#subnav?ul?li.subnavitem?{?/*?Some?styling?*/?}

　　div#subnav?ul?li.subnavitem?a.subnavitem?{?/*?Some?styling?*/?}

　　div#subnav?ul?li.subnavitemselected?{?/*?Some?styling?*/?}

　　div#subnav?ul?li.subnavitemselected?a.subnavitemselected?{?/*?Some?styling?*/?}

　　你可以用下面的方法替代上面的代碼

　　Item 1

　　Item 1

　　Item 1

　　樣式定義是:

　　?? 　#subnav?{?/*?Some?styling?*/?}

　　#subnav?li?{?/*?Some?styling?*/?}

　　#subnav?a?{?/*?Some?styling?*/?}

　　#subnav?.sel?{?/*?Some?styling?*/?}

　　#subnav?.sel?a?{?/*?Some?styling?*/?}

　　用子選擇器可以使你的代碼和CSS更加簡潔、更加容易閱讀。

　　十.不需要給背景圖片路徑加引號(hào)

　　為了節(jié)省字節(jié)，我建議不要給背景圖片路徑加引號(hào)，因?yàn)橐?hào)不是必須的。例如:

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

　　可以寫為

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

　　如果你加了引號(hào)，反而會(huì)引起一些瀏覽器的錯(cuò)誤。

　　CSS簡寫的方法

　　色彩縮寫

　　色彩的縮寫最簡單，在色彩值用16進(jìn)制的時(shí)候，如果每種顏色的值相同，就可以寫成一個(gè)：

　　color：#113366

　　可以簡寫為

　　color：#136

　　所有用到16進(jìn)制色彩值的地方都可以使用簡寫，比如background-color、border-color、text-shadow、box-shadow等。

　　盒子大小

　　這里主要用于兩個(gè)屬性：margin和padding，我們以margin為例，padding與之相同。盒子有上下左右四個(gè)方向，每個(gè)方向都有個(gè)外邊距：

　　margin-top:1px;

　　margin-right:1px;

　　margin-botton:1px;

　　margin-left:1px;

　　這四個(gè)值可以縮寫到一起：

　　margin:1px 1px 1px 1px;

　　縮寫的順序是上->右->下->左。順時(shí)針的方向。相對的邊的值相同，則可以省掉：

　　margin:1px;//四個(gè)方向的邊距相同，等同于margin:1px 1px 1px 1px;

　　margin:1px 2px;//上下邊距都為1px，左右邊距均為2px，等同于margin:1px 2px 1px 2px

　　margin:1px 2px 3px;//右邊距和左邊距相同，等同于margin:1px 2px 3px 2px;

　　margin:1px 2px 1px 3px;//注意，這里雖然上下邊距都為1px，但是這里不能縮寫。

　　邊框(border)

　　border是個(gè)比較靈活的屬性，它有border-width、border-style、border-color三個(gè)子屬性。

　　border-width:數(shù)字+單位;

　　border-style: none || hidden || dashed || dotted || double || groove || inset || outset || ridge || solid ;

　　border-color: 顏色 ;

　　它可以按照width、style和color的順序簡寫：

　　border:5px solid #369;

　　list-style也有三個(gè)屬性：

　　list-style-type:none || disc || circle || square || decimal || lower-alpha || upper-alpha || lower-roman || upper-roman

　　list-style-position: inside || outside || inherit

　　list-style-image: (url) || none || inherit

　　CSS應(yīng)該注意哪些

　　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

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

　　2. 同時(shí)使用兩個(gè)類

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

　　...

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

　　3. CSS border的缺省值

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

　　border: 3px solid #000

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

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

　　4. CSS用于文檔打印

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

　　也就是說，可以為頁面指定兩個(gè)CSS文件，一個(gè)用于屏幕顯示，一個(gè)用于打?。?/p>

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

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

　　5. 圖片替換技巧

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

　　比如你想整個(gè)賣東西的圖標(biāo)，你就用了這個(gè)圖片：

　　這當(dāng)然可以，但對搜索引擎來說，和正常文字相比，它們對alt里面的替換文字幾乎沒有興趣這是因?yàn)樵S多設(shè)計(jì)者在這里放許多關(guān)鍵詞來騙搜索引擎。所以方法應(yīng)該是這樣的：

　　Buy widgets

　　但這樣就沒有特殊字體了。要想達(dá)到同樣效果，可以這樣設(shè)計(jì)CSS：

　　h1

　　{

　　background: url(widget-image.gif) no-repeat;

　　height: image height

　　text-indent: -2000px

　　}

　　注意把image height換成真的圖片的高度。這里，圖片會(huì)當(dāng)作背景顯示出來，而真正的文字由于設(shè)定了-2000像素這個(gè)縮進(jìn)，它們會(huì)出現(xiàn)在屏幕左邊2000點(diǎn)的地方，就看不見了。但這對于關(guān)閉圖片的人來說，可能全部看不到了，這點(diǎn)要注意。