CSS語法詳解

2021-07-11 14:44:53 字數 1975 閱讀 4448

1.css選擇器

①id選擇器

#slyle1

②類選擇器

.slyle2

③html元素選擇器

body

④萬用字元選擇器 *

2.css選擇器的呼叫

①id選擇器的呼叫方式:你好!

②類選擇器的呼叫方式:你好!

③html元素選擇器:不必手動寫呼叫,所指定的元素會自動呼叫

④萬用字元選擇器:不必手動寫呼叫,不管有沒有指定元素,所有的元素都會自動呼叫

注:乙個html元素可以同時呼叫多個不同的選擇器,其中id選擇器只能有乙個,類選擇器可以有多個

(如:id="slyle1" class="slyle2 slyle3">你好!

),那麼各選擇器之間的優先順序為:id>類》html>萬用字元

1.內部css

①在元素標籤中加入css

你好!②在html頭部加入css

2.外部css

所謂外部css,就是專門建立乙個字尾名為css的檔案,在其中寫入css**,然後在html頁面的頭部(

②import

引入呼叫

1.父子選擇器

.slyle1

.slyle1 table

如果(.slyle1)選擇器給乙個div元素呼叫了,那麼這個div下面的table元素會自動呼叫(.slyle1 table)這個選擇器

2.共同選擇器

.slyle1

.slyle2

如果有兩個選擇器,裡面的屬性值有些是一樣的,那麼可以寫乙個共同選擇器,之後就可以把相同的部分在原來的選擇器中去掉。

.slyle1,.slyle2

四、css盒子布局

css會把每個html元素都看作乙個盒子來布局。盒子布局會有幾個特性

1.margin(邊距)

margin-top:10px;/*上邊距*/

margin-left:10px;/*左邊距*/

margin-bottom:10px;/*下邊距*/

margin-right:10px;/*右邊距*/

2.padding(填充)

padding-top:10px;/*上填充*/

padding-left:10px;/*左填充*/

padding-bottom:10px;/*下填充*/

padding-right:10px;/*右填充*/

3.border(邊框)

border: 1px solid red;/*寬度,樣式,顏色*/

五、浮動

.div1

六、塊元素和行內元素

1.塊元素:指乙個html元素,不管它有多寬,它都會佔一正行的空間,後面的元素,會在下一行顯示。(如:div)

2.行內元素:指乙個html元素,它只佔自身寬度的行空間,後面的元素,會緊跟著這一行顯示。(如:span)

3.css裡可以將塊元素和行內元素可以轉換

例1:display:block;/*可以將元素轉換成塊元素顯示*/

例2:display:inline;/*可以將元素轉換成行內元素顯示*/

七、定位

1.static(靜態定位):標準流,它是預設定位。

2.relative(相對定位):元素從原來的位置脫離,讓出來的空間不會被其他元素占用。

.div

3.absolute(絕對定位):元素從原來的位置脫離,後面的元素會占有讓出的空間。

.div

4.fixed(固定定位):與absolute(絕對定位)一樣,不過它的定位點,都是以body為參照點

CSS語法基礎CSS語法基礎1 基本語法

css語法基礎css語法基礎1.基本語法 css的定義是由三個部分構成 選擇符 selector 屬性 properties 和屬性的取值 value 基本格式如下 selector 選擇符 選擇符是可以是多種形式,一般是你要定義樣式的html標記,例如body p table 你可以通過此方法定義...

css基本語法

最近 要經常用到css,但是語法 老是忘記,先貼起來!摘自http www.webjx.com 1.css的語法 css的定義是由三個部分構成 選擇符 selector 屬性 properties 和屬性的取值 value 語法 selector 選擇符 說明 選擇符是可以是多種形式,一般是你要定義...

CSS基礎語法

css 語法由三部分構成 選擇器 屬性和值 selector選擇器 selector 通常是你希望定義的 html 元素或標籤,屬性 property 是你希望改變的屬性,並且每個屬性都有乙個值。屬性和值被冒號分開,並由花括號包圍,這樣就組成了乙個完整的樣式宣告 declaration body上面...