我要學前端 css常用選擇器與樣式

2021-10-24 14:09:17 字數 2334 閱讀 7251

選擇器優先順序

css常用樣式

選擇符注意:

1.當乙個屬性有多個屬性值時,屬性值與屬性值不分先後順序

2.空格換行等不影響屬性顯示

選擇符表示要定義樣式的物件,可以是元素本身,也可以是一類元素或者制定名稱的元素

主要分為:

1.元素選擇符

2.id選擇符

3.類選擇符

4.萬用字元選擇符

5.群組選擇器

6.包含選擇器

7.偽類選擇器

元素選擇符也就是已經存在的標籤的元素名稱;(比如已存在

標籤)語法:

div
當結構要體現單一樣式時,就使用id選擇符;在整個html檔案當中id選擇符是唯一的,主要是為了後續使用js時不報錯;

語法:

#id名
在整個html檔案當中如果某一類標籤想要使用同乙個樣式時則使用類選擇符;

語法:

.class名
在整個html檔案當中如果想要選中所有元素,則用通配選擇符;但通常使用去掉所有邊距,比如:*語法:

*
在整個html檔案當中,如果多組樣式,但有部分相同的樣式,則可以提取出來寫在乙個樣式中,並且選擇符與選擇符之間用逗號隔開,就是群組選擇器;

語法:

選擇符1,選擇符2,
在整個html檔案當中,當我們為某便簽下的子標籤新增樣式時,就可以使用包含選擇器,注意父選擇符與子選擇符之間用空格隔開;

語法:

父選擇符 子選擇符
在整個html檔案當中,當我們向某些選擇器新增特殊的效果,就可以使用偽類選擇器;

語法(通常與a標籤一起使用):

a:link     /*未訪問的鏈結*/

a:visited /*已訪問的鏈結*/

a:hover /*滑鼠移動到鏈結上*/

a:active /*選定的鏈結*/

css常用的樣式:

常用文字樣式

列表相關屬性

背景圖屬性

浮動屬性

font-size文字大小預設16px

font-family字型font-style是否傾斜italic-傾斜normal-正常(通常用於去傾斜)

font-weight是否加粗bold-加粗normal-正常

line-height行高第二行底部到第一行底部的高度

text-decoration文字修飾underline-下劃線overline-上劃線line-throug**本穿過的線none-預設無線

text-indent首行縮排每個字型大小*縮排個數(僅對第一行有作用,可以取負值)color文字顏色

1.顏色名表示-例如:red

2.rgb表示-例如:rgb(255,0,0)->255255255表示紅色(注:不常用)

3.rgba表示-相對於rgb來說加了透明度rbga(255,0,0,0.6)

4.16進製制數值表-比如:#ff0000表示紅色

list-style-type:disc-實心圓square-正方形circle-空心圓none-無

list-style-image:url(相對路徑)

list-style-position:outside(外邊),inside(裡邊)

list-style:none(最常用)

background-color:顏色值;

background-image:url(相對路徑);

注意:當容器尺寸=尺寸->剛好

當容器尺寸》尺寸->平鋪

當容器尺寸《尺寸->僅顯示容器以內的背景圖

background-repeat:no-repeat不平鋪;repeat平鋪;repeat-x橫向平鋪;repeat-y縱向平鋪;

background-position:水平(left/center/right)垂直(top/center/bottom);上面四個屬性縮寫為乙個(常用):

background:背景色url(背景圖相對路徑)no-repeatcentertop;

浮動主要為了脫離文件流(垂直排列)

語法:選擇符

特點:1.div塊元素失去「塊狀」換行顯示特徵,變為行內元素

2.緊貼上乙個浮動元素(同方向)或父級元素的邊框,如寬度不夠將換行顯示

3.佔據行內元素(文字段落)的空間,導致行內元素圍繞顯示

CSS選擇器 我要找到你

什麼是選擇器,在web開發中如果你要想將css樣式應用於特定的html元素,首先需要找到該目標元素。在css中,執行這一任務的樣式規則部分被稱為選擇器 選擇符 css選擇器主要有 id選擇符 類選擇器 標籤選擇器 下面我們一一介紹這幾種選擇器,問我用的是vs2107,在這樣的開發環境下操作演示,建立...

WEB前端 CSS常用選擇器

1.1 標籤選擇器 就是用標籤名來當做選擇器。1 所有標籤都能夠當做選擇器,比如body h1 dl ul span等等 2 不管這個標籤藏的多深,都能夠被選擇上。3 選擇的是所有的,而不是某乙個。所以是共性,而不是特性。1 a 表示選擇id 1 lj1 2 同乙個頁面內id不能重複,即使不一樣的標...

前端 css 選擇器

css 為了修飾頁面作用,讓頁面好看 css的引入方式 1,行內樣式 body裡面 2,內接樣式 在html裡面的 style 裡面 3,外接樣式 兩種 鏈結式 匯入式 優先順序 行內優先順序 最高 內接的優先順序 外接優先順序 引入 id 的優先順序 比 class 的優先順序要高 標籤選擇器 d...