CSS樣式分類及基本格式

2022-01-19 13:33:36 字數 2434 閱讀 4526

1、css樣式分類

a、內聯樣式表

格式:b、內部樣式表

格式:2、css基礎語法

h1h1(選擇器)(宣告塊)

注意:(1)多個宣告用「;」隔開

h1(2)每條宣告由乙個屬性和乙個值組成

h1(3)屬性和值之間用「:」隔開

h1(4)每個宣告用「;」結束

h1(5)屬性可簡寫,根據css3規範建議縮寫

h1(6)多個選擇器公用乙個宣告,用「,」隔開

h1,h2

(7)每個選擇器可以擁有多條宣告

h1(8)不要在屬性值與單位之間留有空格,否則瀏覽器可能不能讀取資料

3、css選擇器

(1)元素選擇器

格式:標籤 元素名

(2)id選擇器

格式:id="名稱" #名稱

(3)類選擇器

格式:class="名稱" .名稱

(4)包含選擇器

格式:元素標籤 外元素 元素

(5)相鄰元素選擇器

格式:元素標籤 元素+元素

(6)子元素選擇器

格式:元素標籤 > 元素

(7)偽類、偽元素

格式:元素標籤:hover/first-line(首行)/first-letter(首字母)/first-child(第一元素)

4、css樣式屬性

(1)背景(background)

可接屬性:background-size:大小,接數字,百分比

background-color:顏色,可接數字,百分比

background-position:位置

background-repeat:重複

background-image:背景

(2)文字(text)

可接屬性:text-color:文字顏色

text-align:對齊方式

text-decoration:文字修飾(上下劃線等)

text-line-height:行高

text-indent:首行縮排

text-transform:字母大小寫

(3)字型(font)

可接屬性:font-size:字型大小

font-family:字型型別(宋體、楷體等)

font-style:字型風格(傾斜等)

font-weight:字型粗細(100-900,bold粗體,bolder更粗,lighter更細)

(4)鏈結(a href="")

可接屬性:a:link-普通的,未被訪問的的鏈結

a:visited - 使用者已訪問的鏈結 

a:hover - 滑鼠指標位於鏈結的上方 

a:active - 鏈結被點選的時刻

(5)列表(ul ol)

可接屬性:list-style簡寫屬性

list-style-image將影象設為表項標誌

list-style-position 設定列表中列表項標誌的位置

list-style-type 設定列表項標誌的型別

(6)**(table)

可接屬性:border-collapse 設定是否把**邊框合併為單一的邊框

border-spacing 設定分隔單元格邊框的距離

caption-side 設定**標題的位置

empty-cells 設定是否顯示**中的空單元格

table-layout 設定顯示單元、行和列的演算法 

(7)輪廓(outline)

可接屬性:outline 在乙個宣告中設定所有的輪廓屬性

outline-color 設定輪廓的顏色

outline-style 設定輪廓的樣式

outline-width 設定輪廓的寬度 

(8)css尺寸

可接屬性:height 設定元素的高度 

line-height 設定行高

max-height 設定元素的最大高度 

max-width 設定元素的最大寬度 

min-height 設定元素的最小高度 

min-width 設定元素的最小寬度 

width 設定元素的寬度 

5、css優先順序及權重值

第一等:內聯樣式,如:style="",權重值為1000(important1000)

第二等:id選擇器,如:#content,權值為0100

第三等:類,偽類選擇器,如:.content,權值為0010

第四等:元素選擇器,如div,p,權值為0001

通用選擇器(*),子選擇器(>)和相鄰同胞選擇器(+)權重值均為0000

注意:權值只能累加,但是不能進製,也即不同等級情況下,第一等最高,第四等最低,相同等級情況下,累加權值大的會優先解析

css基本樣式格式

css就是全網頁統一樣式 注釋語句 css的三種樣式,內聯式,嵌入式,外部式 外聯式 優先順序為 內聯式 嵌入式 外部式 內聯式,就是直接在 中加入語句 例子,若是有多條語句在其中,可以在之間加入分號 style color red p style color red span 嵌入式,就是直接在s...

css樣式分類

就是把css 直接寫在現有的html標籤中,如下面 style color red 這裡文字是紅色。p css樣式 要寫在style 雙引號中,如果有多條css樣式 設定可以寫在一起,中間用分號隔開。如下 style color red font size 12px 這裡文字是紅色。p 就是可以把c...

CSS樣式分類

1,內部樣式表 內嵌式是將css 集中寫在html文件的head頭部標籤中,並且用style標籤定義,其基本語法格式如下 語法中,style標籤一般位於head標籤中title標籤之後,也可以把他放在html文件的任何地方。type text css 在html5中可以省略,寫上也比較符合規範,所以...