關於css前端的知識點總結

下面為大家帶來一篇css前端知識點總結。內容還挺不錯的，現在就分享給大家，也給大家做個參考。

1、css的概念:(CascadingStyleSheet級聯樣式表)

優點：1.內容與表現分離。 (用網頁的內容xhtml就可以與表象分開)

2.表象統一

#3.豐富的樣式

4.減少網頁程式碼

5.運用獨立於網頁的css

2.選擇器

#1.標籤選擇器

標籤名稱｛屬性:屬性值;｝

2.類別選擇器

.類別名稱｛屬性:屬性值;｝

0997168001333abf1cf66c768d36a772

#3、id選擇器

#ID名稱｛屬性:屬性值;｝

4.並集選擇器

標籤名,.類別名，#ID名稱｛屬性:屬性值;｝

5.後位選擇器

後位選擇器的寫法是把外層的標籤寫在前面，內層的標籤寫在後面，之間用空格分開。當標籤發生嵌套時，內層的標籤就成為外層標籤的後代。

P span{ 屬性:屬性值;}

e388a4556c0f65e1904146cc1a846bee標籤內嵌套45a2772a6b6107b401db3c9b82c049c2標籤。

addb2ace9c4c65de47b8358a559820f8e388a4556c0f65e1904146cc1a846bee標籤的後代，兩者之間用空格隔開

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；轉換為區塊級元素；

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

#

以上是關於css前端的知識點總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！