1、css的概念:(CascadingStyleSheet級(jí)聯(lián)樣式表)

優(yōu)點(diǎn)：1.內(nèi)容與表現(xiàn)分離。(用網(wǎng)頁(yè)的內(nèi)容xhtml就可以與表象分開(kāi))

2.表象統(tǒng)一

3.豐富的樣式

4.減少網(wǎng)頁(yè)代碼

5.運(yùn)用獨(dú)立于網(wǎng)頁(yè)的css

2.選擇器

1.標(biāo)簽選擇器

標(biāo)簽名｛屬性:屬性值;｝

2.類(lèi)選擇器

.類(lèi)名｛屬性:屬性值;｝

<標(biāo)簽名 class=”類(lèi)名”>標(biāo)簽內(nèi)容</標(biāo)簽名>

3、id選擇器

#ID名稱(chēng)｛屬性:屬性值;｝

4.并集選擇器

標(biāo)簽名,.類(lèi)名，#ID名稱(chēng)｛屬性:屬性值;｝

5.后代選擇器

后代選擇器的寫(xiě)法是把外層的標(biāo)簽寫(xiě)在前面，內(nèi)層的標(biāo)簽寫(xiě)在后面，之間用空格分開(kāi)。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層的標(biāo)簽就成為外層標(biāo)簽的后代。

P span{ 屬性:屬性值;}

<p>標(biāo)簽內(nèi)嵌套<span>標(biāo)簽。

<span標(biāo)簽是><p>標(biāo)簽的后代，兩者之間用空格隔開(kāi)

6.交集選擇器(注意:交集選擇器之間沒(méi)有空格)這種可以確定是某一個(gè)標(biāo)簽

標(biāo)簽名.類(lèi)名｛｝

7.全局選擇器

*｛樣式；｝

Css中的注釋只能是 /* 注釋 */形式；

3.在HTML中引入css樣式的方法

1.行內(nèi)式，

<h1 style=”font-size:18px”></h1>

2.嵌入式，

將樣式寫(xiě)在head中

<style type=”text/css”>

H1{font-size:18px；}

</style>

3.導(dǎo)入式與鏈接式，(外部css樣式)

鏈接式:

<link href=”style.css” rel=”stylelensheet” type=”text/css”/>

導(dǎo)入式:

<style type=”text/css”> @import”style.css”;</style>

兩者的區(qū)別是:鏈接是先加載樣式后加載頁(yè)面，導(dǎo)入是反之

4.樣式的優(yōu)先級(jí)

基本選擇器之間：ID選擇器>類(lèi)選擇器>標(biāo)簽選擇器

樣式表之間:行內(nèi)樣式>內(nèi)嵌樣式>外部樣式

Css樣式之間:在同一個(gè)選擇器中，兩條相同的聲明，后一條聲明會(huì)覆蓋前一條聲明，

5、盒子模型

盒子模型總尺寸=border-width-padding+margin+內(nèi)容尺寸(寬度或高度)

6、浮動(dòng)屬性

Float:值(left,right,none,inherit(IE不支持不推薦使用))

與float屬性結(jié)合使用的另一個(gè)屬性clear，用于確定元素的那一側(cè)不允許其他浮動(dòng)元素，clear屬性的值有5個(gè)，如下所示:

Left在左側(cè)不允許浮動(dòng)元素

Right:在右側(cè)不允許浮動(dòng)元素

Both:在左右側(cè)均不允許浮動(dòng)元素

None默認(rèn)值，允許浮動(dòng)元素出現(xiàn)在兩側(cè)

Inherit:規(guī)定應(yīng)該從父元素繼承clear屬性的值，IE瀏覽器不支持，不推推薦使用。一般用于清除浮動(dòng)時(shí)，使用both屬性值的情況較多,即：

Clear:both;

7、定位屬性:

1.絕對(duì)定位

position:absolute; z-index:2;(堆疊次序)

background-color：背景色。Transparent表示透明的背景色

background-attachment：確定背景圖片是否跟隨類(lèi)容滾動(dòng)，設(shè)置為fixed為固定的，scroll為滾動(dòng)；

2.相對(duì)定位：position:relative;

8、控制元素顯示方式

1.顯示方式 display:值

2.處理盒子中的溢出：overflow：值

3.設(shè)置光標(biāo)的形狀:cursor:pointer(小手)

4．超鏈接樣式:

a:link{color:#ff0000;}  //未訪問(wèn)的鏈接

a：visited{color:#00CC00}//已訪問(wèn)的鏈接

a：hover{color:#000FF}//鼠標(biāo)指針移動(dòng)到鏈接上

a:active{color:#FF00FF}//選定的鏈接

定義樣式必須是：linkàvisitedàhoveràactive

經(jīng)驗(yàn)：內(nèi)聯(lián)標(biāo)簽可以包含于塊級(jí)標(biāo)簽中，成為它的子元素，而反過(guò)來(lái)則不成立。

display:block；轉(zhuǎn)換為塊級(jí)元素；

以上這篇css前端知識(shí)點(diǎn)總結(jié)(必看篇)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

原文地址：http://www.cnblogs.com/izhongwei/archive/2016/06/09/5572443.html

最新評(píng)論