要附帶說明的是，如果指定了四個合法設定值，則會依序套用于四個補白；如果只有指定一個合法設訂值，則會統(tǒng)一套用于四個補白；若只有指Ｑ291911320定二或三個合法設定值，則未指定的補白會套用對邊的寬度設定值。

DIV { padding: 1pt } →top=1pt;right=1pt;bottom=1pt;left=1pt DIV { padding: 1pt 2pt } →top=1pt;right=2pt;bottom=1pt;left=2pt DIV { padding: 1pt 2pt 3pt } →top=1pt;right=2pt;bottom=3pt;left=2pt

第三篇：【網(wǎng)頁設計-最新經(jīng)典技術文檔】網(wǎng)頁排版CSS教學(三)

網(wǎng)頁排版CSS教學

（三）第三章 ＣＳＳ的應用補充 挑 選 者 特 性 的 應 用

在講挑選者的特性之前，要提一下的是ＣＳＳ繼承的特性。所謂的繼承的特性是指被包在內(nèi)部的標簽將擁有外部標簽的樣式性質(zhì)。繼承的特性最典型的應用通常發(fā)揮在預設整份網(wǎng)頁的樣式，而要指定為其它樣式的部份再依要設定在個別元素里即可。這項特性可以提供網(wǎng)頁設計者更理想的發(fā)揮空間。

接下來就要講挑選者特性的應用！其實這部份應該算是聲明的一種方式，但是在您看過第二章的基本的聲明與應用後，到這邊再講挑選者您會比較有概念點。在ＣＳＳ應用或設計的時候，有幾種依據(jù)元素的關系或性質(zhì)來設定顯示特定性質(zhì)的方法，就是挑選者特性的應用，能讓您在控制與應用上更加靈活。

一、前後文挑選者：依聲明標簽前後文關系顯示特定性質(zhì)的方法。

前後文挑選者便是當瀏覽器在顯示HTML原始碼所指定的內(nèi)容時，會考慮元素標簽的前後關系，而去顯示指定的樣式聲明。也就是說只要HTML原始碼內(nèi)的標簽排列前後順序符合時，該項聲明便會發(fā)生作用了！

元素A(標簽A)元素B(標簽B)元素C(標簽C)...{樣式規(guī)則} 要注意的是，前後文挑選者的聲明跟集體聲明很像，但是集體聲明的元素標簽間要用逗號隔開，而用前後文挑選者聲明時元素標簽間要用空格隔開；而這兩種聲明方式您可以混合使用。

元素A 元素B, 元素C 元素D 元素E,...{樣式規(guī)則} 這樣您就可以用集體聲明的方式，聲明數(shù)組前後文挑選者的樣式規(guī)則。

二、類別挑選者：讓單一或數(shù)個標簽使用同組樣式規(guī)則的方法。

類別(class)可以讓不同的元素標簽共同套用同一組樣式性質(zhì)或相同的元素標簽套用不同組的樣式性質(zhì)。首先介紹的是如何讓不同的元素套用同一組樣式性質(zhì)，如下面范例所寫即可。

<--

.blue { color : BLUE }-->

...

...

...

...

... 要注意在聲明時前面的小點，CLASS名稱可任取。而要讓相同的元素標簽套用不同組的樣式性質(zhì)時，也可以應用類別特性來設定。

標簽之中。

例如：

通常是將整個的 結(jié)構(gòu)寫在網(wǎng)頁的 部份之中。這種用法的優(yōu)點就是在於整篇文件的統(tǒng)一性，只要是有聲明的的元件即會套用該樣式規(guī)則。缺點就是在個別元件的靈活度不足。

三、使用 LINK標簽： 將樣式規(guī)則寫在.css的樣式檔案中，再以標簽引入。

假設我們把樣式規(guī)則存成一個example.css的檔案，我們只要在網(wǎng)頁中加入 即可套用該樣式檔案中所制定好的樣式了。通常是將LINK標簽寫在網(wǎng)頁的 部份之中。這種用法的優(yōu)點就是在於可以把要套用相同樣式規(guī)則的數(shù)篇文件都指定到同一個樣式檔案即可。缺點也是在個別文件或元件的靈活度不足。

四、使用@import引入： 跟LINK用法很像，但必 放在 中。

例如：

要注意的是，行末的分號是絕對不可少的！切記切記！

很明顯的，不管是LINK還是@import的用法都可能可以直接套用他人現(xiàn)有的樣式表。不過，基於網(wǎng)路的禮儀，這種事別做的好，至少也應該知會 對方一聲，要先取得人家的同意才行！

而四種應用方法各有其優(yōu)缺點，您可以綜合地使用，并不會相互抵觸。但是如果相同的性質(zhì)屬性遇上重復的聲明的話，就要考量套用優(yōu)先權的問題了！一般來講，優(yōu)先權的順序有以下的幾點原則：

網(wǎng)頁設計者的樣式設定 ＞ 使用者的樣式設定 ＞ 瀏覽器的樣式設定 STYLE屬性的樣式設定 ＞ STYLE標簽樣式設定 ＞ 鏈結(jié)進來的樣式設定 後面聲明的樣式設定 ＞ 前面的樣式設定

所謂『鏈結(jié)進來的樣式設定』指的就是用上面提到過的LINK標簽與@import引入這兩種應用方式所鏈結(jié)進來的的樣式設定。

以上就是ＣＳＳ最基本的聲明與應用的方法介紹，有了這些基本的認識與方法，您已經(jīng)可以開始建立您的樣式表！除了上面提到的Ｑ291911320基本的聲明與應用的方法之外，還有其它的聲明與應用的方法，將為您在下一章中再作介紹。

第五篇：網(wǎng)頁設計中的CSS 技術及優(yōu)化分析論文

CSS 技術特點

互聯(lián)網(wǎng)剛興起時，網(wǎng)頁缺少動感，布局內(nèi)容也有許多因素限制，設計起來難度較多。即使專業(yè)的HTML 技術人員，在網(wǎng)頁設計中也需要通過不斷測試，才能掌握網(wǎng)頁中的信息排版，在這樣的背景下，樣式表應時而生，CSS技術具有以下特點。對網(wǎng)頁中的元素進行精準定位。網(wǎng)頁設計者在網(wǎng)頁設計中，如同導演，網(wǎng)頁中圖片、文字就是演員，網(wǎng)頁設計人員依據(jù)要求使“演員”扮演好自己的角色，操控起來十分簡單。將網(wǎng)頁中的格式控制與網(wǎng)頁中的內(nèi)容分離。網(wǎng)頁瀏覽者在瀏覽過程中，面對是網(wǎng)站內(nèi)容結(jié)構(gòu)，為了幫助瀏覽者更好地查看網(wǎng)頁中的信息，在設計中需要合理利用格式控制，將的內(nèi)容與格局分離，從而對網(wǎng)頁布局進行更加合理的控制，即將CSS 代碼獨立，從另一角度實現(xiàn)對頁面布局和外觀的控制。頁面布局的控制。通過CSS 技術，能夠事項對HTML的有效控制，并且可以在網(wǎng)頁中對圖像的位置進行準確定位。制作體積加載更快。體積更小的網(wǎng)頁，CSS 樣式只是簡單的文本，在設計中不需要執(zhí)行程序、圖像、插件，在執(zhí)行上就如同HTML 中的指令一樣快。CSS 技術在網(wǎng)頁設計中的應用

2.1 外部樣式表

外部樣式主要適用網(wǎng)頁中存在多個副面，外部樣式表一文件存儲的情況，通常情況下文件的擴展名為.css。網(wǎng)絡頁面中應用外部樣式，可以將多個網(wǎng)頁與.css 文件進行連接，通過改變一個.css 文件中的內(nèi)容對整個網(wǎng)站的布局進行調(diào)整。例如m.css 需要將 添加到文檔頭部，將去作為標簽，具體方式代碼如下：

css”/>

.........在網(wǎng)頁設計過程中，可以通過外部文件，對編輯中的文本進行編輯，但是在編輯中需要注意，不能出現(xiàn)任何HTML中的代碼，例如：

p{color: red;font-size:14px;}

body{background-color:#FFDFFD}

其中color 為屬性，red 為值;font-size 為屬性，14px 為值;background-color 為屬性，#FFDFFD 為值。

2.2 內(nèi)部樣式表

如果一個在網(wǎng)頁設計中，不需要特殊樣式，通常為簡化，都采用內(nèi)部樣式，可以將

p{color:red;font-size:14px;}

body{background-color:#FFDFFD}

??

內(nèi)部樣式與外部樣式相比，更加簡單實用，在網(wǎng)站頁面頭部，輸入同一樣式，可使網(wǎng)站中所有頁面都呈現(xiàn)統(tǒng)一的樣式。

2.3 內(nèi)聯(lián)樣式表

網(wǎng)頁設計中內(nèi)連樣式表，可以將style 參數(shù)直接加入到HTML中，添加的參數(shù)就是CSS 多屬性與值，內(nèi)嵌的樣式如下：

設計中，內(nèi)聯(lián)樣式表與其它兩種樣式相比，使用率相對少，主要這種方式不容易在網(wǎng)頁中重復使用，如果上述的p 元素在網(wǎng)頁設計中重復式樣，網(wǎng)頁會將p 元素定義為完全重復，樣式屬性也會出現(xiàn)重復，會加大對網(wǎng)頁的維護和閱讀難度。優(yōu)化CSS 代碼

在網(wǎng)頁設計中，為了使網(wǎng)站能夠快速的顯示出來，Web創(chuàng)建者在實際操作中，需要對網(wǎng)站中的圖像文件進行壓縮。CSS 樣式表是純文本文件，所占內(nèi)存較小，在設計中不需要進行壓縮，但在應用過程中，也有一些方法可以使其格式縮小20% ～ 50%。

3.1 縮寫性質(zhì)

利用專用性質(zhì)名取代相關性質(zhì)集合。例如，paddingtop、padding-left 等性質(zhì)在CSS 帶面中就可以進行縮寫。在網(wǎng)頁設計中可以通過以下代碼代替復雜的代碼。

.body{margin:12px 18px 20px 24px;padding:4px 8px

6px 5px

Border-top： thin solid #000000;｝

此外，在對縮寫性質(zhì)進行應用中，屬性之間的間隔通過空白完成。如果屬性之間出現(xiàn)類似值時，要注重連續(xù)屬性的順序，屬性由頂部開始，依照順時針順序進行。如果縮寫性質(zhì)相同，可以簡單羅列單個屬性，將后面的三項屬性縮寫。

3.2 通過樣式覆蓋簡化代碼

如下CSS 樣式

.a,.b,.c {font-size;10px;padding:10px;width:200px;

background-color:black }

.a {border:2px solid red;}

.b {border:2px solid blue;}

對以上這段CSS 樣式進行分析，可以發(fā)現(xiàn)，三個樣式邊框?qū)傩裕祟伾馄溆嗖⒄`差別，因此可以將無差別的屬性進行歸納在一起，對顏色進行單獨控制，優(yōu)化的樣式如下：

.a,.b,.c {font-size;10px;padding:10px;width:200px;

background-color:black;border:2px solid：red}

.2 {border:2px solid blue;}

.3 {border:2px solid black;}

優(yōu)化后代碼能夠?qū)崿F(xiàn)與原代碼一樣的效果，代碼的屬性變得更加簡單。

3.3 提高代碼重復率

重復使用代碼是CSS 在網(wǎng)頁設計上的主要優(yōu)勢，多數(shù)網(wǎng)站設計中，對CSS 中的代碼已經(jīng)進行了重復利用，但受設計者自身影響，并沒有得到合理的重復使用。在CSS 代碼編寫中，應當盡力避免重復的元素屬性值多次編寫。結(jié) 語

現(xiàn)代網(wǎng)頁設計中對CSS 技術的應用十分廣泛，在應用CSS 技術過程中，不僅需要注意應用的合理性，同時應當通過分析，采取相應的方式，簡化CSS 代碼，使其變得更加合理、簡潔。