CSS複習筆記

CSS個別記憶力不熟的標籤:

1.scrolling="no" 取消滾動條

2.frameborder=“no” 取消邊框

3.line-height:"  px"上下間距

4.text-align:center 文字居中

5.class是類選擇器代表標點:點

6.id是id選擇器代表標點:#

7.font-weight:bold;    css加粗

8.font-font-style:italic;  css 斜體

9.a:hover  僞元素

 

 

課堂上的CSS複習:

由於樣式和html內容寫在一起,導致代碼特別紊亂,於是提出思想:

Html內容 和 顯示 相分離

Html 只負責寫內容,搭建框架

CSS只負責裝飾內容,裝飾框架

舉例子:html 比喻房子    css比喻修飾、裝飾房子(掛一幅畫、粉刷顏色...

Css----  cascade style sheet  層疊樣式表

1CSS的基本語法

(1)CSS是由  選擇器 和 聲明來組成的

(2)每一條聲明裏面 有屬性、值

選擇器{屬性:值;屬性:值....}

選擇器:找到某個標籤的一種方法/機器

Css屬性的單位:

 顏色值:

 大小值:

瀏覽器默認的字體大小,16px 

Px----像素(pixel-----

電腦的分辨率:1366x768像素

整個屏幕 是由 1366像素點組成   縱向是由 768個像素點組成,像素點 一個一個的顏色值

16px 是什麼意思?

所以像素 是一個相對的長度,和瀏覽器的分辨率相關

他是分辨的百分比  16/瀏覽器所佔的大小

2CSS的四種樣式表

(1)內聯樣式表 

缺點是如果給很多元素設置樣式太繁瑣

2)嵌套樣式表

缺點:如果其他文件也需要這種樣式的話,需要反覆再去寫同樣的樣式

(3)外部樣式表

最常用的

多個文件需要同一種樣式的時候,我們可以將共同的樣式 封裝起來,保存成一個css文件

通過link標籤 加載的

<link rel=”stylesheet” type=”text/css” href=”layout.css”/>

(4)輸入樣式表

(1)在CSS文件中通過 @import 加載  

(2)在html文件<style>標籤中嵌套:

CSS樣式的優先級:

1,就近原則,

2,加載順序,後加載的會修改之前的樣式

<link rel="stylesheet" href="css/border.css"/>

<style>

p{

border:2px solid green;

}

</style>

2CSS選擇器

分類:

1,類選擇器,就是通過class屬性找到某個標籤的方法

任何html的標籤至少會有 class屬性、idnamestyle

Class屬性的xxx標籤

2id選擇器,通過id屬性來找到某個標籤的方法

3,關聯選擇器,又稱上下文關係選擇器。通過上下文關係來確定標籤的位置

意思:找到ul標籤裏面 class 爲 vegetableli標籤

4,組合選擇器

就是組合 多個 html 標籤,來設置樣式

需求:

給 class='vegetable'id="div1", class="p1"設置樣式,讓其字體爲 30px,顏色爲藍色

注意:

同一個標籤,只能有一個 id屬性,因爲id是唯一的

Class屬性可以有多個,爲了區別其他的,建議這樣寫:標籤名.class屬性名  p.p1

5,僞元素選擇器

僞元素,就是 同一個html標籤,在不同的狀態下,有不同的效果,這樣的元素稱爲僞元素

目前,支持僞元素的,只有 a標籤 和 p標籤

僞元素的狀態:

超鏈接:

    A:hover   鼠標移上去的時候

A:link    默認狀態

A:visited   訪問過之後

A:active   

由於僞元素選擇器 兼容性不好,不建議大家使用,可以以後通過javascript來實現

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章