DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> css前端知識點總結(必看篇)
css前端知識點總結(必看篇)
編輯:前端技巧     

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

以上這篇css前端知識點總結(必看篇)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved