選擇器如何使用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...