網站美化常見CSS

伴隨網絡時代突飛猛進的發展，用戶不只僅知足於軟件系統的功能需求，對軟件系統的頁面顯示效果以及交互模式的要求也逐漸提升。尤爲是展現性質的平臺頁面對於界面美化效果要求更高，有一句話說的好：Html是結構，CSS是裝飾，JS是膠水（動態設定CSS）。今天咱們來介紹一些網站美化常見的CSS樣式以及處理手法。

1  基礎教程

1.1 基礎語法

選擇器

選擇器一般爲須要改變樣式的元素；

1) 元素選擇器 ：例如：html {color:red;} 說明：將html設置爲紅色

2) 類選擇器：例如：.ul .li{ color:red;} 說明：將ul於li標籤設置爲紅色

3) ID選擇器：例如：#member{font-weight:bold;} 說明：將id爲member的標籤屬性的字體加粗

4) 屬性選擇器：例如：a[href][title]{color:red;} 說明：將同時擁有href以及title的a標籤的文本設置爲紅色

一條/多條聲明

每條聲明由一個屬性和一個值組成；

例如：h1 {color:red; font-size:14px;}；

說明：其中h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值；本例子是將 h1 元素內的文字顏色定義爲紅色，同時將字體大小設置爲 14 像素。

1.2 僞類說明

Anchor（錨）僞類

例如：a:link {color:#FF0000;} 說明：將未訪問的連接設置爲紅色

例如：a:visited {color:#00FF00;} 說明：已訪問的連接設置爲綠色

例如：a:hover {color:#FF00FF;} 說明：當鼠標劃過連接設置爲紫色

例如：a:active {color:#0000FF;} 說明：已選中的連接設置爲藍色

注意：a:hover 必須被置於 a:link 和 a:visited 以後，纔是有效的；a:active 必須被置於 a:hover 以後，纔是有效的；且僞類的名稱不區分大小寫。

first - child僞類

first-child 僞類來選擇元素的第一個子元素

例如：p:first-child 說明：選擇器匹配做爲p元素的第一個子元素的

例如：p > i:first-child 說明： 選擇相匹配的全部

元素的第一個 元素：

例如：p:first-child i 說明：選擇器匹配全部做爲元素的第一個子元素的

元素中的全部 元素

1.3 層次級別

優先級

1) 相同權值

內聯樣式表（標籤內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）

2) 權值不一樣

標籤的權值爲1，類選擇符的權值爲10，ID選擇符的權值最高爲100。

例如：

注意：在網站設置樣式是有一些特殊狀況能夠用importal來解決 如：

P{color:red !important;} important是一個優先級樣式權值最高

強層次

Div > ul >li > p 使用「>」指定 div下的ul下的li下的p標籤 只有頁面層次關係知足當前層次要求是纔會被應用樣式，能夠理解爲java中的equals

弱層次

Div ul li p 是「空格」指定 在div下包含的ul，li，p標籤的均會引用該樣式，不是強制要求定義格式循序，能夠理解爲java中的模糊查詢

2  樣式擴充

2.1 背景填充

經常使用屬性：

例如：background-image 說明：添加背景圖片

樣例：background-image:url('paper.gif');

演示效果：

例如：background-size 說明：指定背景圖像的大小

樣例：background-size:80px 60px;

演示效果：

例如：background-origin 說明：屬性指定了背景圖像的位置區域

注意：content-box, padding-box,和 border-box區域內能夠放置背景圖像。

樣例：background-origin:content-box;

演示效果：

2.2 按鈕樣式

按鈕顏色

樣例代碼：

演示效果：

圓角按鈕

樣例代碼：

演示效果：

鼠標懸停

注意：transition-duration 屬性能夠設置 "hover" 效果的速度

樣例代碼：

演示效果：

按鈕陰影

樣例代碼：

演示效果：

2.3 圓角處理

屬性說明

樣例代碼：

演示效果：

2.4 經常使用樣式

3  頁面佈局

3.1 Table佈局

優勢

1) 簡單易用：比較適合初學者 。

2) 可讀性好：語句編寫較爲簡便，主要代碼就是<TABLE></TABLE>、<TR></TR>、<TD></TD>等語句。

3) 開發速度較快：能夠利用工具 DW中直接拖入TABLE比編寫DIV要快速不少。

缺點：

1) 代碼冗餘：< /TABLE>這是構成一個表格的最基本元素（此爲一行一列的表格），相對

編寫來講，代碼繁多。

2) 網頁打開速度較慢：後臺代碼太多，致使網站打開速度慢。

3.2 Div+CSS佈局

優勢：

1) 代碼簡潔：

較TABLE來講代碼精簡許多。

2) 速度較快： 對於同一個頁面視覺效果，採用CSS+DIV重構的頁面容量要比TABLE編碼的頁面文件容量小得多，前者通常只有後者的1/2大小。

3) 佈局靈活：DIV+CSS使得頁面佈局方便操做靈活，改版時只需改CSS樣式便可實現頁面從新佈局，而不用改動程序，從而下降了網站改版的成本。頁面效果豐富，包括視覺效果和用戶體驗好比拖拉。

缺點：

1) 可讀性差：用戶在編輯的時候並不能當即看到編輯效果，須要預覽纔可看到。

2) 操做繁瑣：相對於初學者或是對代碼不是很瞭解的人來講，操做起來非常麻煩。

3.3 Div+Table佈局

對於前端新手來講想讓頁面佈局工整一般會採用table來進行佈局，但這樣控制CSS樣式又不如div版式靈活，因此咱們綜合二者頁面佈局採用Div+Table進行頁面排版這樣能夠靈活的設置樣式，也避免了徹底用CSS控制頁面工整換行對齊等佈局控制上的繁瑣。

4  動態樣式

在現有的網站顯示僅限於CSS的靜態控制樣式顯示，更多的是CSS與JS結合動態控制頁面顯示樣式，下面咱們經過一個例子來簡要說明CSS與JS結合的精妙之處。

CSS 代碼：

JS代碼：

HTML代碼：

演示效果：

點擊按鈕添加CSS後

5  我的總結

筆者做爲一名軟件項目開發人員以前也是一直注重於軟件的功能性，並不注重效果展現，但對於軟件使用人員來講第一接觸的就是界面，尤爲是面向最終用戶的網站，交互界面是第一感觀，筆者做爲一名初步接觸前端CSS與JS樣式控制顯示的小白總結此篇文章與你們分享，若是有更多的交流歡迎加入數通暢聯官方QQ羣(299719843)中一塊兒探討，也能夠百度查找數通暢聯瞭解更多相關信息。