CSS概述
1.CSS樣式簡介
目前互聯網頁面的樣式采用CSS設計為主，使用CSS，可對頁面的布局、字體、顏色、背景和其他效果實現更加精確的控制。使用CSS+Div布局頁面主要優(yōu)點有如下:
結構清晰，容易被搜索引擎搜索到。
縮短改版時間，只要修改CSS文件就可以重新設計頁面。
表現與內容相分離，將設計部分分離出來放一個獨立的樣式文件中。
可方便將網頁的風格格式同時更新。
2.CSS基本語法
CSS語言由標志和屬性構成，樣式的基本語法如下:
樣式名{屬性:屬性值;屬性:屬性值;……}
也可以寫成
樣式名{
屬性:屬性值;
屬性:屬性值;
……; }
3.CSS樣式的分類
3.1. 按選擇器類型分類
樣式按定義時選擇器類型的不同，又可分為如下幾種類型:
類樣式:如.style1
ID樣式:如 #container
標簽樣式:如 p、body等系統(tǒng)定義的樣式
復合樣式:如.style1 img
3.2.按樣式的定義位置分類
CSS樣式按樣式的存放位置分為:
內部樣式:定義在網頁文件里面。
外部樣式:單獨定義在樣式文件里，網頁文件通過引用樣式文件使用樣式。
瀏覽器默認樣式。
html內聯樣式。
4.內部樣式的創(chuàng)建
在網頁的<head>標簽內添加內部樣式標志代碼:
<style type="text/css">
......
</style>
在<style>標簽內定義相關樣式
5.外部CSS樣式文件的引用
在網頁中添加css文件夾中名為style.css的樣式文件，在<head>標簽內的引用樣式代碼如下:
<link href="css/style.css"? rel="stylesheet"? type="text/css" />
通過link元素將外部樣式與網頁實現關聯，代碼具有三個屬性，其中 rel說明文件類型，href指定文件路徑，type 屬性在 html5 網頁中為可選屬性，可以不寫，用于說明文本類型。
6.類樣式的引用
類樣式定義時,樣式名前面加“.”前綴符號，如果不加，則系統(tǒng)自動添加?？蓱糜谌魏蜨TML元素，可在頁面的不同部分不同元素多次引用。連續(xù)的字符、段落和層引用類樣式的寫法如下:
· 連續(xù)的字符引用類樣式:<span class="樣式名">……</span>
· 段落引用類樣式:<p class="樣式名">……</p >
· 層引用類樣式:<div class="樣式名">……</div>
7.ID樣式的引用
樣式定義時,樣式名前面加“#”前綴符號，一個頁面僅應用于一個HTML元素時使用，連續(xù)的字符、段落引用ID樣式的寫法如下:
. 連續(xù)的字符引用樣式:<span id="樣式名">……</span)
· 段落引用樣式:<p id ="樣式名">……</p >
一般用于定義布局層樣式，層Div引用ID樣式寫法如下：
. <div id ="樣式名">……</div>
*-* 標簽樣式和復合樣式一般不需要特別引用
8.標簽樣式
HTML 元素包括布局標簽如 header、nav、footer、article、section和其他標簽如 p、body、標題h1-h6等。標簽一般有默認的樣式，當默認樣式無法滿足要求時，用戶可重新定義這些標簽樣式。如在層中添加的段落，段落有默認的上邊距，為了解決邊距超出層的問題，需要設置段落的上邊距為0px，同樣默認的標題樣式也有上邊距問題，這樣可以一起定義標題和段落的標簽樣式如下:
????h1, h2 , h3 , h4 , h5 , h6 , p? {
????????margin-top:? 0;?? ?}
標簽樣式名前面不加任何符號，以h1樣式名為例，引用方式一般如下:
? ? ? ?<h1> 標題1內容 </h1>
大部分的標簽樣式不需要引用，以<body>標簽為例，重定義<body>標簽后樣式可自動更新。
9.復合內容樣式
如果要定義同時影響兩個或多個標簽、類或ID的復合規(guī)則，應該選擇定義“復合內容”樣式，復合樣式只需要引用前面部分的樣式即可。復合樣式定義舉例如下。
1)如果定義“div?p”樣式，則Div標簽內的所有p元素都將受此規(guī)則影響。
2)如要求一個層中的圖片與文字形成左環(huán)繞效果，假設該層引用類樣式.pic,則可定義復合樣式:
.pic? img { float : left ;?}
3)當圖片設置為鏈接時，會在圖像周圍顯示默認的藍色邊框，可修改圖片鏈接樣式使得圖片無邊框，代碼如下:
a? img? {?border: none;?}
