第一篇：網頁設計中的CSS 技術及優化分析論文

CSS 技術特點

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

2.1 外部樣式表

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

css”/>

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

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

body{background-color:#FFDFFD}

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

2.2 內部樣式表

如果一個在網頁設計中，不需要特殊樣式，通常為簡化，都采用內部樣式，可以將

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

body{background-color:#FFDFFD}

??

內部樣式與外部樣式相比，更加簡單實用，在網站頁面頭部，輸入同一樣式，可使網站中所有頁面都呈現統一的樣式。

2.3 內聯樣式表

網頁設計中內連樣式表，可以將style 參數直接加入到HTML中，添加的參數就是CSS 多屬性與值，內嵌的樣式如下：

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

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

3.1 縮寫性質

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

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

6px 5px

Border-top： thin solid #000000;｝

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

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 樣式進行分析，可以發現，三個樣式邊框屬性，除了顏色之外其余并誤差別，因此可以將無差別的屬性進行歸納在一起，對顏色進行單獨控制，優化的樣式如下：

.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;}

優化后代碼能夠實現與原代碼一樣的效果，代碼的屬性變得更加簡單。

3.3 提高代碼重復率

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

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

第二篇：網頁設計中針對中文排版CSS心得

網頁設計中針對中文排版CSS心得

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

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

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

font-style設定斜體，比如font-style: italic;

font-weight設定文字粗細，比如font-weight: bold;

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

line-height設定行距，比如line-height: 150%;

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

font-family設定字體，比如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;/*居中對齊*/

}

對齊方式還有left、right和justify（兩端對齊）

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

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

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

比如：

p{

writing-mode: tb-rl;

}

可以結合direction排版。

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

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

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

li{

list-style: square;

}

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

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

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

比如：

p:first-letter{

padding: 6px;

font-size: 32pt;

float: left;

}

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

text-indent可以使得容器內首行縮進一定單位。比如中文段落一般每段前空兩個漢字。可以這么寫：

p{

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

}

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

7、關于漢字注音 —— 使用ruby標簽和ruby-align屬性

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

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

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

第三篇：DIV CSS在計算機網頁設計中的運用

DIV+CSS在計算機網頁設計中的運用

【摘 要】互聯網發展至今，網絡已經成為人們生活的重要部分，各色網站層出不窮，眾多網頁各有千秋。本文從計算機網頁設計中的布局入手，分析了傳統網頁布局的局限性，介紹了計算機網頁中典型的 “DIV+CSS”布局方式。通過對DIV 和CSS 技術的研究，介紹了DIV+CSS布局方法及其優勢，為計算機網頁設計提供思路。

【關鍵詞】DIV；CSS；計算機網頁；布局

一、前言

傳統的計算機網頁布局的方法主要有框架布局和表格布局。框架布局比較靈活，若有效運用，則能使網頁更整潔、清晰。但是，對于內容多、布局復雜的網站，不宜采用框架布局，因為，過多的框架會影響網頁下載所需的時間，影響網頁的讀取速度，而且瀏覽器對框架結構的兼容性也不是很好。

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

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

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

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

二、DIV和CSS的具體內容

DIV元素是用來為HTML文檔內大塊的內容提供布局的結構和背景。它是HTML中的一個標簽，此標簽的作用就是定位網頁內容中的圖片、文字、視頻等相關信息。一般我們也叫為DIV層定位。

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

DIV+CSS布局方式使網頁結構和外觀相分離，極大地簡化了代碼，而且使站點加載的速度變得快捷、維護也更加方便，無疑對傳統布局的網頁方式造成了極大的沖擊。除此之外，DIV+ CSS布局方式的使用，使傳統的網頁布局的不足得到很好的彌補，當前國內多數比較著名的網站都利用此類方式方法進布局，給用戶帶來了全新的體驗模式。

三、DIV+CSS設計計算機網頁布局

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

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

第四篇：【網頁設計-最新經典技術文檔】網頁排版CSS教學(五)

網頁排版CSS教學

（五）第五章 文字性質的ＣＳＳ

本 章 Ｃ Ｓ Ｓ 的 主 要 作 用

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

字 型 性 質 的 Ｃ font-family 設定文字字型

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

字型名稱

預設值：視瀏覽器而定 繼承性：有

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

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

italic 斜體字

oblique 斜體字

預設值：normal 繼承性：有

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

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

bold 粗體字

bolder 相對于父元素稍粗

lighter 相對于父元素稍細

Ｓ 指 令

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

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

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

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

長度單位，請參考第一章基本單位的相關說明

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

預設值：medium 繼承性：有

一般范例：SPAN { font-size : 12pt } 同軸范例： font-variant 設定文字轉換

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

small-caps 將小寫文字轉換為大寫

預設值：normal 繼承性：有

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

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

設定字體樣式

設定文字轉換

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

設定文字字型

預設值：無 繼承性：有

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

文 字 性 質 的 Ｃ Ｓ Ｓ 指 令

line-height 設定列高

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

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

以元素字型大小乘以該數即為列高

設定長度，請參考第一章基本單位的相關說明

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

預設值：normal 繼承性：有

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