CSS及常用樣式

2021-08-22 16:16:32 字數 3853 閱讀 7351

選擇器如何使用css樣式

css樣式優先順序

常用css樣式屬性

第一種:該種樣式表只能定義在style標籤或css檔案中,每個style標籤或css檔案可定義多個css樣式表;

選擇器
第二種:該種樣式表只能定義在style標籤屬性;html文件中每個標籤都有乙個style標籤屬性。

style= " declaration1; declaration2;…"

注意 :

1、無論使用哪一種方式定義css樣式表,樣式表中的declaration都由乙個樣式屬性和乙個樣式屬性值組成,樣式屬性和樣式屬性值使用冒號分開;宣告之間使用分號間隔

2、如果乙個樣式屬性有多個樣式屬性值,則樣式屬性值之間使用逗號間隔

3、在css中樣式屬性及其樣式屬性值對大小寫不敏感,且不忽略空格

4、如果屬性值由多個單詞組成,則建議使用單引號引起來

標籤名
. class標籤屬性的屬性值
注意:

1、id標籤屬性的屬性值不能以數字開頭;

2、id標籤屬性的屬性值在html文件中必須唯一;class標籤屬性的屬性值可以不唯一

# id標籤屬性的屬性值
注意: 選擇器之間用空格隔開。

父代選擇器1 子父代選擇器2 子父代選擇器3 ….子代選擇器
選擇器1,選擇器2,選擇器3…
*   

舉例*

1、子標籤會繼承父標籤的css樣式;

2、但如果子標籤重新設定了父標籤中的樣式屬性,則對於子標籤來說以子標籤中重新設定的樣式屬性為準,

3、儘管有可能子標籤css樣式在父標籤css樣式的前面。

在html中,插入css樣式有3種方式:外部樣式表,內部樣式表,內聯樣式。

1、id選擇器優先順序最高,標籤選擇器優先順序最低,如下所示:id選擇器 > 類選擇器 > 標籤選擇器。

2、注意:選擇器優先順序不考慮選擇器的先後順序

內聯樣式優先順序最高,外部樣式表優先順序最低,如下所示:內聯樣式 > 內部樣式表 > 外部樣式表。

1、border—width:為元素的所有邊框設定寬度,或者單獨地為各邊邊框設定寬度。(px為單位)

2、border—style:用於設定元素所有邊框的樣式,或者單獨地為各邊設定邊框樣式。(點狀:dotted;虛線:dashed;實線:solid;沒有:none)

3、border—color:用於設定乙個元素的所有邊框顏色,或者為4個邊框分別設定不同的顏色。

注意:邊框簡寫屬性:border寫出上下左右四個邊的屬性;

按照寬度、樣式和顏色的順序進行設定

注意:輪廓線是在標籤邊框邊緣繪製一條線,該線不會佔據空間,也不一定是矩形,主要起到突出標籤的作用

與border基本類似,簡寫時剛好與其順序相反

即outline-color、outline-style和outline-width)

3、background-repeat:設定標籤背景重複模式。

分為none,no-repeat,repeat-x,repeat-y.

4、background-attachment:設定標籤背景是否隨著頁面的其餘部分的滾動而滾動。分為scroll(預設值滾動),fixed(不隨著滾動)

5、background-position:設定標籤背景位置。

6、background-origin:設定background-position樣式屬性設定的背景相對於什麼位置來定位。

7、background-clip:指定背景繪製區域。

8、background-size:設定單張背景的尺寸,預設值為auto。

簡寫時沒有順序要求4、6、7、不常用

順序:中間用空格隔開

1、font-style:設定字型的風格。(正常:normal;斜體:italic)

2、font-variant:設定是否以小型大寫字母的字型顯示文字(不常用)

3、font-weight:設定字型的粗細(bold加粗;normal正常)

4、font-size/line-height:設定字型大小(px為單位)

5、font-family:設定字型系列,使用逗號分割每種字型。如果瀏覽器不支援第乙個字型則會嘗試第二個字型;如果字型系列中的所有字型都不支援,則使用瀏覽器預設支援的字型。

1、letter-spacing屬性:設定字元間距,樣式屬性值可以為負值,但這時字元之間更加「擁擠」。

2、line-height樣式屬性:設定行間距(即行高),不能為負值。

3、text-align樣式屬性:設定標籤內文字的水平對齊方式

4、text-transform樣式屬性:設定文字的大小寫。

5、text-indent樣式屬性:設定文字塊中首行文字的縮排,如果樣式屬性值為負值,則首行會被縮排到左邊。

6、text-decoration樣式屬性:設定文字裝飾。比如是否有下劃線及劃線顯示的位置。(underline,none,overline,line-through)

順序

1、list-style-type:設定列表項標記的型別。

(dsic,circle,square,阿拉伯數字,羅馬數字,英文本母等等)

2、list-style-position:設定列表項標記相對於列表項內容的位置。

(inside,outside)

3、list-style-image:將列表項標記設定為指定的,一般和乙個 「list-style-type」樣式屬性一起使用,以防不可用。使用【url儲存路徑】得小。

選擇器 : 偽類

順序::link、:visited、:hover和:activecursor:pointer游標呈現為指示鏈結的指標(乙隻手)

css之常用樣式及display樣式

常用樣式 一 背景 背景可以為純色,也可以通過以下屬性的修飾變得絢麗多彩 1.設定背景色 background color 3.設定背景是否重複 background repeat,其值有四個 a.repeat 背景圖重複,即平鋪 預設值 b.repeat x 橫向平鋪 c.repeat y 縱向平...

css 常用樣式

css 說的通俗一點就是 給標籤加樣式的。什麼玩意是樣式呢。你們可以理解為人穿的衣服,化妝之類的修飾,讓自己的寫的標籤變的好看一點 那麼這個css 怎麼加到對應的標籤上面去呢 有3種方法 分別是 外部樣式 內頁樣式 行內樣式。那麼這個css 怎麼加到對應的標籤上面去呢 有3種方法 分別是 外部樣式 ...

css常用樣式

格式調整 標籤的位置調整 text align center 絕對元素生成 position absolute margin right 微調上下左右 浮動 float 上下左右 width 寬 height 高 樣式調整 字型粗細 font weight size 字型格式 text decora...