1、css的概念:(CascadingStyleSheet級聯樣式表) 優點:1.內容與表現分離。(用網頁的內容xhtml就可以與表象分開) 2.表象統一 3.豐富的樣式 4.減少網頁代碼 5.運用獨立於網頁的css 2.選擇器 1.標簽選擇器 標簽名｛屬性:屬性值;｝ 2.類選擇器 .類名｛屬性: ...
1、css的概念:(CascadingStyleSheet級聯樣式表)
優點:1.內容與表現分離。(用網頁的內容xhtml就可以與表象分開)
2.表象統一
3.豐富的樣式
4.減少網頁代碼
5.運用獨立於網頁的css
2.選擇器
1.標簽選擇器
標簽名｛屬性:屬性值;｝
2.類選擇器
.類名｛屬性:屬性值;｝
<標簽名 class=”類名”>標簽內容</標簽名>
3、id選擇器
#ID名稱｛屬性:屬性值;｝
4.並集選擇器
標簽名,.類名，#ID名稱｛屬性:屬性值;｝
5.後代選擇器
後代選擇器的寫法是把外層的標簽寫在前面，內層的標簽寫在後面，之間用空格分開。當標簽發生嵌套時，內層的標簽就成為外層標簽的後代。
P span{ 屬性:屬性值;}
<p>標簽內嵌套<span>標簽。
<span標簽是><p>標簽的後代，兩者之間用空格隔開
6.交集選擇器(註意:交集選擇器之間沒有空格)這種可以確定是某一個標簽
標簽名.類名｛｝
7.全局選擇器
*｛樣式；｝
Css中的註釋只能是 /* 註釋 */形式；
3.在HTML中引入css樣式的方法
1.行內式，
<h1 style=”font-size:18px”></h1>
2.嵌入式，
將樣式寫在head中
<style type=”text/css”>
H1{font-size:18px；}
</style>
3.導入式與鏈接式，(外部css樣式)
鏈接式:
<link href=”style.css” rel=”stylelensheet” type=”text/css”/>
導入式:
<style type=”text/css”> @import”style.css”;</style>
兩者的區別是:鏈接是先載入樣式後載入頁面，導入是反之
4.樣式的優先順序
基本選擇器之間：ID選擇器>類選擇器>標簽選擇器
樣式表之間:行內樣式>內嵌樣式>外部樣式
Css樣式之間:在同一個選擇器中，兩條相同的聲明，後一條聲明會覆蓋前一條聲明，
5、盒子模型
盒子模型總尺寸=border-width-padding+margin+內容尺寸(寬度或高度)
6、浮動屬性
Float:值(left,right,none,inherit(IE不支持不推薦使用))
與float屬性結合使用的另一個屬性clear，用於確定元素的那一側不允許其他浮動元素，clear屬性的值有5個，如下所示:
Left在左側不允許浮動元素
Right:在右側不允許浮動元素
Both:在左右側均不允許浮動元素
None預設值，允許浮動元素出現在兩側
Inherit:規定應該從父元素繼承clear屬性的值，IE瀏覽器不支持，不推推薦使用。一般用於清除浮動時，使用both屬性值的情況較多,即：
Clear:both;
7、定位屬性:
1.絕對定位
position:absolute; z-index:2;(堆疊次序)
background-color：背景色。Transparent表示透明的背景色
background-attachment：確定背景圖片是否跟隨類容滾動，設置為fixed為固定的，scroll為滾動；
2.相對定位：position:relative;
8、控制元素顯示方式
1.顯示方式 display:值
2.處理盒子中的溢出：overflow：值
3.設置游標的形狀:cursor:pointer(小手)
4．超鏈接樣式:
a:link{color:#ff0000;} //未訪問的鏈接
a：visited{color:#00CC00}//已訪問的鏈接
a：hover{color:#000FF}//滑鼠指針移動到鏈接上
a:active{color:#FF00FF}//選定的鏈接
定義樣式必須是：linkàvisitedàhoveràactive
經驗：內聯標簽可以包含於塊級標簽中，成為它的子元素，而反過來則不成立。
display:block；轉換為塊級元素；
