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

CSS 技術(shù)特點

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

2.1 外部樣式表

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

css”/>

.........在網(wǎng)頁設(shè)計過程中，可以通過外部文件，對編輯中的文本進行編輯，但是在編輯中需要注意，不能出現(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)頁設(shè)計中，不需要特殊樣式，通常為簡化，都采用內(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)頁設(shè)計中內(nèi)連樣式表，可以將style 參數(shù)直接加入到HTML中，添加的參數(shù)就是CSS 多屬性與值，內(nèi)嵌的樣式如下：

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

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

3.1 縮寫性質(zhì)

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

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

6px 5px

Border-top： thin solid #000000;｝

此外，在對縮寫性質(zhì)進行應(yīng)用中，屬性之間的間隔通過空白完成。如果屬性之間出現(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 提高代碼重復(fù)率

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

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

第二篇：網(wǎng)頁設(shè)計中針對中文排版CSS心得

網(wǎng)頁設(shè)計中針對中文排版CSS心得

數(shù)月來學習web標準，并遵循標準設(shè)計和制作web頁面。一直想寫點什么，整理一下自己的心得體會。寫這篇文章，主要是針對中文排版設(shè)計，英文排版因為很少做，所以不涉及。

先介紹如何設(shè)定字體、顏色、大小、段落空白等比較簡單的應(yīng)用，后面再介紹下比如首字下沉、首行縮進。最后講一些常用的web頁面中文排版，比如中文字的截斷、固定寬度詞內(nèi)折行（word-wrap和word-break）等等。因為只是寫一些應(yīng)用方面的心得，如果需要完整的CSS屬性介紹，請參考CSS手冊。

1、如何設(shè)定文字字體、顏色、大小 —— 使用font

font-style設(shè)定斜體，比如font-style: italic;

font-weight設(shè)定文字粗細，比如font-weight: bold;

font-size設(shè)定文字大小，比如font-size: 12px;（或者9pt，不同單位顯示問題參考CSS手冊）

line-height設(shè)定行距，比如line-height: 150%;

color設(shè)定文字顏色（注意不是font-color），比如color: red;

font-family設(shè)定字體，比如font-family : “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif;（這是通用的寫法）

以上都可以寫在一行font屬性里（除了color屬性需要單獨寫）：

font: italic bold 12px/150% “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif;

2、如何控制段落排版 —— 使用margin，text-align

中文段落使用

標簽，左右（相當于縮進）、段前段后的空白，都可以用margin。比如：

p{

margin: 18px 6px 6px 18px;/*分別是上、右、下、左，十二點開始的順時針方向*/}

文字的對齊方式用text-align，比如：

p{

text-align: center;/*居中對齊*/

}

對齊方式還有l(wèi)eft、right和justify（兩端對齊）

PS.談起margin，我習慣于在寫CSS的時候為所有的標簽定義margin: 0;因為時而出現(xiàn)由于默認的margin值導(dǎo)致頁面排版問題，而自己找不到原因（特別注意的是ul/ol/p/dt/dd等標簽）

3、豎排文字 —— 使用writing-mode

writing-mode屬性有兩個值lr-tb和tb-rl，前者是默認的左-右、上-下，后者是上-下、右-左。

比如：

p{

writing-mode: tb-rl;

}

可以結(jié)合direction排版。

4、項目符號的問題 —— 使用list-style

在CSS里項目符號有disc（實心圓點）、circle（空心圓圈）、square（實心方塊）、decimal（阿拉伯數(shù)字）、lower-roman（小寫羅馬數(shù)字）、upper-roman（大寫羅馬數(shù)字）、lower-alpha（小寫英文字母）、upper-alpha（大寫英文字母）、none（無）。比如設(shè)定一個列表（ul或

ol）的項目符號為方塊，如：

li{

list-style: square;

}

另外list-style還有一些值，比如可以采用一些小圖片作為項目符號，在list-style下直接寫url(“圖片地址”)就可以了。注意如果一個項目列表的左外補?。╩argin-left）設(shè)為零的時候，list-style-position: outside（默認是outside）的項目符號不會顯示。可惜的是上述的項目符號似乎并不能設(shè)定大小，圓點和方塊始終是那么點。并且不能設(shè)定垂直方向上的對齊。

5、首字下沉 —— 使用:first-letter

偽對象:first-letter配合font-size、float可以制作首字下沉效果。

比如：

p:first-letter{

padding: 6px;

font-size: 32pt;

float: left;

}

6、首行縮進 —— 使用text-indent

text-indent可以使得容器內(nèi)首行縮進一定單位。比如中文段落一般每段前空兩個漢字?？梢赃@么寫：

p{

text-indent: 2em;/*em是相對單位，2em即現(xiàn)在一個字大小的兩倍*/

}

如果font-size是12px的話，那么text-indent: 2em則縮進24px。

7、關(guān)于漢字注音 —— 使用ruby標簽和ruby-align屬性

比如說注音zhu yin，可以利用ruby-align設(shè)置對齊方式。這是在CSS手冊里面看到的，具體可以自行查閱ruby-align項。

8、固定寬度漢字截斷 —— 使用text-overflow

用后臺語言可以對從數(shù)據(jù)庫里的字段內(nèi)容做截斷處理，比如說截12個漢字（之后用省略號）。但是有時還需要html標簽的過濾等，而用CSS來控制則沒有這個問題。比如對列表應(yīng)用以下樣式

第三篇：DIV CSS在計算機網(wǎng)頁設(shè)計中的運用

DIV+CSS在計算機網(wǎng)頁設(shè)計中的運用

【摘 要】互聯(lián)網(wǎng)發(fā)展至今，網(wǎng)絡(luò)已經(jīng)成為人們生活的重要部分，各色網(wǎng)站層出不窮，眾多網(wǎng)頁各有千秋。本文從計算機網(wǎng)頁設(shè)計中的布局入手，分析了傳統(tǒng)網(wǎng)頁布局的局限性，介紹了計算機網(wǎng)頁中典型的 “DIV+CSS”布局方式。通過對DIV 和CSS 技術(shù)的研究，介紹了DIV+CSS布局方法及其優(yōu)勢，為計算機網(wǎng)頁設(shè)計提供思路。

【關(guān)鍵詞】DIV；CSS；計算機網(wǎng)頁；布局

一、前言

傳統(tǒng)的計算機網(wǎng)頁布局的方法主要有框架布局和表格布局?？蚣懿季直容^靈活，若有效運用，則能使網(wǎng)頁更整潔、清晰。但是，對于內(nèi)容多、布局復(fù)雜的網(wǎng)站，不宜采用框架布局，因為，過多的框架會影響網(wǎng)頁下載所需的時間，影響網(wǎng)頁的讀取速度，而且瀏覽器對框架結(jié)構(gòu)的兼容性也不是很好。

表格是計算機網(wǎng)頁設(shè)計制作中的一個重要網(wǎng)頁元素，用來對網(wǎng)頁進行排版，使頁面的信息布局合理、簡潔。但是表格排版也存在以下的問題：

1.用表格排版的頁面很難再修改或升級。當頁面制作完成后，如果要將其中的某些位置對調(diào)，那么表格排版的工作量相當于重新制作一個頁面。而CSS排版利用position和float屬性可以輕松地移動和重新定位各個塊，實現(xiàn)讓用戶動態(tài)選擇界面的功能。

2.用表格排版的頁面在下載時必須等整個表格的內(nèi)容都下載完畢后才會一次性顯示出來，而利用DIV+CSS排版的頁面在下載時，各個子塊可以分別下載顯示，從而提高了頁面的下載速度。

3.復(fù)雜的表格設(shè)計使得設(shè)計極為不易，修改更為復(fù)雜，最后生成的網(wǎng)頁代碼除了表格本身的代碼，還有許多沒有任何意義的圖像占位符及其他元素，文件量龐大，最終導(dǎo)致瀏覽器下載及解析速度變慢，網(wǎng)站的維護和更新困難。

二、DIV和CSS的具體內(nèi)容

DIV元素是用來為HTML文檔內(nèi)大塊的內(nèi)容提供布局的結(jié)構(gòu)和背景。它是HTML中的一個標簽，此標簽的作用就是定位網(wǎng)頁內(nèi)容中的圖片、文字、視頻等相關(guān)信息。一般我們也叫為DIV層定位。

CSS（cascading style sheet），層疊樣式表，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁分離的一種標識性語言。CSS 是 1996由W3C 審核通過，并且推薦使用的。CSS 的引入就是為了使 HTML語言更好的適應(yīng)頁面的美工設(shè)計。它以 HTML語言為基礎(chǔ)，提供了豐富的格式化功能，如字體、顏色、背景和整體排版等，并且網(wǎng)頁設(shè)計者可以針對各種可視化瀏覽器（包括顯示器、打印機、打字機、投影儀和 PDA 等）來設(shè)置不同的樣式風格。CSS的引入引發(fā)了網(wǎng)頁設(shè)計一個又一個的新高潮。使用CSS設(shè)計的優(yōu)秀頁面層出不窮。

DIV+CSS布局方式使網(wǎng)頁結(jié)構(gòu)和外觀相分離，極大地簡化了代碼，而且使站點加載的速度變得快捷、維護也更加方便，無疑對傳統(tǒng)布局的網(wǎng)頁方式造成了極大的沖擊。除此之外，DIV+ CSS布局方式的使用，使傳統(tǒng)的網(wǎng)頁布局的不足得到很好的彌補，當前國內(nèi)多數(shù)比較著名的網(wǎng)站都利用此類方式方法進布局，給用戶帶來了全新的體驗?zāi)Ｊ健?/p>

三、DIV+CSS設(shè)計計算機網(wǎng)頁布局

采取DIV和CSS的網(wǎng)頁布局結(jié)構(gòu)，首先需要用DIV來分塊，定義語義結(jié)構(gòu)；然后用CSS來定位和添加樣式，如浮動、位置、對齊屬性、加入背景等；最后在這個CSS定義的各個塊中添加相應(yīng)的樣式，如文字、圖片等。下面通過一個布局實例介紹使用DIV+CSS布局網(wǎng)頁的基本方法。

首先，把網(wǎng)頁區(qū)分成不同的三個區(qū)塊，包括header、content（其中有main主體區(qū)域，并將main主體部分分為兩個區(qū)域lside和rside）、footer三個區(qū)域，分別作為網(wǎng)頁的頭部、內(nèi)容和版權(quán)區(qū)域。編寫HTML部分文檔代碼如下：

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

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

（五）第五章 文字性質(zhì)的ＣＳＳ

本 章 Ｃ Ｓ Ｓ 的 主 要 作 用

本章要介紹的是文字相關(guān)的ＣＳＳ指令。通 常一個網(wǎng)站的內(nèi)容最多的就是文字了，透過這些文字相關(guān)的ＣＳＳ指令，您可以將您的 網(wǎng)頁內(nèi)容排版得美美的。本章將分兩個部份為您介紹，第一部份是字型性質(zhì)的ＣＳＳ指令，用以控制文字字型的各種樣式；第二部份介紹的是文字性質(zhì)的ＣＳＳ指令，用以控 制文字段落的外觀及擺設(shè)方式。

字 型 性 質(zhì) 的 Ｃ font-family 設(shè)定文字字型

支 持：ＩＥ３、ＩＥ４ 適 用：所有元素 可能值：

字型名稱

預(yù)設(shè)值：視瀏覽器而定 繼承性：有

一般范例：SPAN { family-name : “標楷體” } 同軸范例： font-style 設(shè)定字體樣式

支 持：ＩＥ３、ＩＥ４、ＮＣ４ 適 用：所有元素 可能值： normal 普通字

italic 斜體字

oblique 斜體字

預(yù)設(shè)值：normal 繼承性：有

一般范例：SPAN { font-style : italic } 同軸范例： font-weight 設(shè)定字型份量

支 持：ＩＥ３、ＩＥ４、ＮＣ４ 適 用：所有元素 可能值： normal 普通字

bold 粗體字

bolder 相對于父元素稍粗

lighter 相對于父元素稍細

Ｓ 指 令

Ｓ100,200,300, 400,500,600, 700,800,900.數(shù)字由小到大代表筆畫由細到粗 normal=400 bold=700 預(yù)設(shè)值：normal 繼承性：有

一般范例：SPAN { font-weight : bolder } 同軸范例： font-size 設(shè)定文字大小

支 持：ＩＥ３、ＩＥ４、ＮＣ４ 適 用：所有元素 可能值：

絕對大小，可用的參數(shù)由小到大分別有七項 xx-small, x-small, small, medium, large, x-large, xx-large 相對大小，可用的參數(shù)為larger, smaller兩項 以父元素字型大小為基準

長度單位，請參考第一章基本單位的相關(guān)說明

百分比，以父元素字型大小為基準

預(yù)設(shè)值：medium 繼承性：有

一般范例：SPAN { font-size : 12pt } 同軸范例： font-variant 設(shè)定文字轉(zhuǎn)換

支 持：ＩＥ３、ＩＥ４、ＮＣ４ 適 用：所有元素 可能值： normal 普通字

small-caps 將小寫文字轉(zhuǎn)換為大寫

預(yù)設(shè)值：normal 繼承性：有

一般范例：SPAN { font-variant : small-caps } 同軸范例： font 綜合設(shè)定字型性質(zhì)

支 持：ＩＥ３、ＩＥ４、ＮＣ４ 適 用：所有元素 可能值：

設(shè)定字體樣式

設(shè)定文字轉(zhuǎn)換

設(shè)定字型份量 設(shè)定文字大小與列高（請參考設(shè)定文字列高部份）

設(shè)定文字字型

預(yù)設(shè)值：無 繼承性：有

一般范例： SPAN { font : bolder small-caps 12pt/120% Arial } 同軸范例：< SPAN style=“font : bolder small-caps 12pt/120% Arial”>

文 字 性 質(zhì) 的 Ｃ Ｓ Ｓ 指 令

line-height 設(shè)定列高

支 持：ＩＥ３、ＩＥ４、ＮＣ４ 適 用：所有元素 可能值：

normal 普通列高，根據(jù)字體變化合理高度，視瀏覽器而定

以元素字型大小乘以該數(shù)即為列高

設(shè)定長度，請參考第一章基本單位的相關(guān)說明

百分比，相對于元素字型大小為比例

預(yù)設(shè)值：normal 繼承性：有

一般范例：DIV { line-height : 120% } 同軸范例：