總結 關於CSS樣式表的基礎知識

2022-02-15 10:53:52 字數 3423 閱讀 2134

一、使用css樣式控制頁面的表現

行內樣式

內嵌式鏈結式

匯入樣式

二、css選擇器

標記選擇器

如:li選擇器,用於宣告頁面中所有標記的樣式風格

類別選擇器 .class

.error

注意:class類別選擇器的另一種更為直觀的使用是直接在標記宣告後按類別名稱來區別該標記。

如:h3.first_class

id選擇器

id selector 與 class selector基本相同,不同之處在於id選擇器在html頁面中只能使用一次,因此針對性更強。

如: #once

選擇器集體宣告,適用於某些選擇器的樣式風格是完全相同或部分相同的情況下。

如:h1, h2, h3, p

h2.special, .special, #once

選擇器的巢狀,巢狀方式可用於對特殊位置的html標記進行宣告。

如: p b

只針對p標記下的b標記才生效,對於p標記之外的b並不生效。

注意:典型的巢狀語句

1).second i /* 只針對使用了second類的標記生效 */

2)#first li /*針對id為first的標記中的標記生效*/

3)ul li

4)td.top, top1 strong /*多重巢狀*/

子選擇器,表示用來選擇乙個父元素的直接子元素,符號為」>」

如:ul.mylist>li>a

link2

/*這句不起效果*/

若改為:ul.mylist>li a , 則所有的標記都生效。

三、技巧

普通常見的網頁寬度為width:960px;

用div實現一行兩列的布局

第一列第二列

注意:1)兩列的寬度之和不能大於父div的寬度;

2)讓其中一列進行 float:left/right;

用div實現一行三列的布局

第一列第二列

第三列注意:1)三列寬度之和不能大於父div的寬度;

2)控制項列的float屬性即可。

談談div與span標記的區別

1)div是塊級元素,它包含的所有元素均會自動換行;

2)span是行內元素,它不換行。

關於margin和padding屬性

1)若屬性連起來寫,則根據順時針按上、右、下、左的順序規則縮寫;

2)當上和下、左和右的屬性值一致時,可簡寫為:margin: 40px 50px;

3)當上下左右的屬性值都一致時,可簡寫為:margin:60px;

將網頁中的元素居中

width:960px;

margin:0 auto;

設定了float的div在ie6下的margin會加倍,這是ie6 的bug

解決辦法:在div的樣式中加上 display:inline

解決div垂直居中的問題

vertial-align:middle

line-height:div』height

id與class的區別

1)id不可以重複,class可以重複使用

2)id的優先順序要高於class的優先順序

3)id在某些情況下節約時間

將flash設為透明

一、使用css樣式控制頁面的表現

行內樣式

內嵌式鏈結式

匯入樣式

二、css選擇器

標記選擇器

如:li選擇器,用於宣告頁面中所有標記的樣式風格

類別選擇器 .class

.error

注意:class類別選擇器的另一種更為直觀的使用是直接在標記宣告後按類別名稱來區別該標記。

如:h3.first_class

id選擇器

id selector 與 class selector基本相同,不同之處在於id選擇器在html頁面中只能使用一次,因此針對性更強。

如: #once

選擇器集體宣告,適用於某些選擇器的樣式風格是完全相同或部分相同的情況下。

如:h1, h2, h3, p

h2.special, .special, #once

選擇器的巢狀,巢狀方式可用於對特殊位置的html標記進行宣告。

如: p b

只針對p標記下的b標記才生效,對於p標記之外的b並不生效。

注意:典型的巢狀語句

1).second i /* 只針對使用了second類的標記生效 */

2)#first li /*針對id為first的標記中的標記生效*/

3)ul li

4)td.top, top1 strong /*多重巢狀*/

子選擇器,表示用來選擇乙個父元素的直接子元素,符號為」>」

如:ul.mylist>li>a

link2

/*這句不起效果*/

若改為:ul.mylist>li a , 則所有的標記都生效。

三、技巧

普通常見的網頁寬度為width:960px;

用div實現一行兩列的布局

第一列第二列

注意:1)兩列的寬度之和不能大於父div的寬度;

2)讓其中一列進行 float:left/right;

用div實現一行三列的布局

第一列第二列

第三列注意:1)三列寬度之和不能大於父div的寬度;

2)控制項列的float屬性即可。

談談div與span標記的區別

1)div是塊級元素,它包含的所有元素均會自動換行;

2)span是行內元素,它不換行。

關於margin和padding屬性

1)若屬性連起來寫,則根據順時針按上、右、下、左的順序規則縮寫;

2)當上和下、左和右的屬性值一致時,可簡寫為:margin: 40px 50px;

3)當上下左右的屬性值都一致時,可簡寫為:margin:60px;

將網頁中的元素居中

width:960px;

margin:0 auto;

設定了float的div在ie6下的margin會加倍,這是ie6 的bug

解決辦法:在div的樣式中加上 display:inline

解決div垂直居中的問題

vertial-align:middle

line-height:div』height

id與class的區別

1)id不可以重複,class可以重複使用

2)id的優先順序要高於class的優先順序

3)id在某些情況下節約時間

將flash設為透明

總結 關於CSS樣式表的基礎知識

寫在前面 大三了,人老了,呆在學校的時間也不長了,暑假要開始走進社會的大熔爐磨練自己了。曾經的讀書方式是把知識點記錄在紙上,看著用過的本子一天天的厚起來心裡就會有一種莫名的興奮,可現在馬上就要離開學校了,又不能帶很多東西,古人有云 出門千里不帶書 所以我就把平時積累的一些東西再次整理一下,做乙個總結...

CSS樣式表 基礎知識

css cascading style sheets,層疊樣式表 作用是美化html網頁。注釋 注釋語法 2.1.1 樣式表分類 1 內聯樣式表 和html聯合顯示,控制精確,但是可重用性差,冗餘多。例 內聯樣式表 2 內嵌樣式表 作為乙個獨立區域內嵌在網頁裡,必須寫在head標籤裡邊。3 外部樣式...

CSS樣式表基礎知識 樣式表的分類及選擇器

一 css基本概念 css cascading style sheet,疊層樣式表 作用是美化html網頁。注釋區域 此為注釋語法 二 樣式表的分類 1 內聯樣式表 和html聯合顯示,控制精確,但是可重用性差,冗餘多 例 內聯樣式表 以上就是乙個簡單的內聯樣式表,用在中的標籤中,相當於style附...