前端攻城獅 css樣式之選擇器

2021-08-20 10:35:27 字數 1634 閱讀 8216

前面我們了解到了html的骨架的組成,還有一些常見的標籤,但是決定乙個網頁的漂不漂亮是需要css來控制,可以說html是乙個人的身體,而css就是乙個人身穿的衣服,那麼接下來我們去了解一下css的奧秘所在。

1.行內式

2.外鏈式(推薦使用)

3.內嵌式(不推薦使用)

段落

css樣式語法格式如下

選擇器

h2 用途:批量處理同乙個標籤 或設定或清空缺省樣式 ,如有序列表前會有小圓點,那麼為了清除所有的小圓點我們就需要寫這麼個樣式。

li
id選擇器

注意,在使用id選擇器的時候,需要給標籤新增id屬性,在style去給對應的id寫樣式的時候,需要在id前加上#.

id選擇器的注意點

1 每個標籤都有id屬性,id屬性值由字母開頭,後面可以為數字 下劃線 橫線  比如demo test  w40  text-center

2 id在頁面中是唯一的

3 劣勢 對多個元素設定統一樣式 需要起多個id,寫多次重複的樣式

類選擇器

在使用類選擇器的時候,需要給標籤新增class屬性,在style去給對應的類寫樣式的時候,需要在類名前加上.

類選擇器注意點

1 class屬性值不是唯一的,不同的標籤可以取相同的class名

2  類選擇器作用,可以用類選擇器去選中一部分樣式相同的標籤

3 乙個標籤的class值是可以有多個,多個類之間用空格隔開

4 與id選擇器區別

id屬性一般用於js 類用於設定樣式

萬用字元選擇器*

*就是萬用字元,代表所有的標籤,但是萬用字元選擇器效率比較低,實際的開發中不常用。

如上所示,為什麼要給所有的標籤加padding和margin,因為很多標籤都會有預設樣式,會造成開發時候效果不準確,故需要取出所有標籤的預設樣式

高階選擇器--後代選擇器

空格表示後代的意思 #mydiv_p .mydiv_c .myp_c表示id是mydiv_p的後代中class是mydiv_p的後代中class是myp_c的標籤

高階選擇器--交集選擇器

交集顧名思義就是要滿足多個條件

asdasdasd

#mydiv p.myp 就用到了後代選擇器和交集選擇器 

#mydiv p表示 id是mydiv的標籤的後代p,p.myp表示 後代p中的類選擇器是myp 

高階選擇器--並集選擇器

前面提到用萬用字元選擇器去設定預設樣式效率不高,那麼我們可以用並集選擇器去設定預設樣式

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul
應用場景

css基本選擇器的已經講完,接下來會來講css繼承性和層疊行,如有表達錯的請諒解和提出錯的點,望能共同進步。

前端攻城獅 css樣式之定位

為什麼要學習定位呢?因為很重要。ps 這不是廢話嘛 這樣子把,假如說我們需要在乙個盒子裡居中顯示乙個小盒子,那麼就是需要定位來坐,定位用的頻率還是非常高的。css定位分為三種 絕對定位 相對定位 固定定位。各位看官不要急,聽我一一道來。相對定位 position relative 相對定位相對誰?相...

Web前端開發 CSS樣式之CSS選擇器

css選擇器可分為標籤選擇器 類別選擇器 id選擇器,這裡的三種型別主要針對內嵌樣式和單獨檔案樣式而言 正文段落 標籤選擇器會作用用該檔案的所有同種標籤,同種標籤需要定義不通過的樣式時可通過下列的型別來定義 類別型別的選擇器在定義的時候,它的名字點開頭,後面帶有的樣式名稱,如測試 中head標籤內的...

CSS樣式選擇器

1.css 選擇器 1 標記選擇器 選擇器 用來指定確定標記的樣式 如 類別選擇器 class 類別名稱 如 對應的 class 選擇器 id選擇器 id id選擇器 如 對應的 id選擇器1id 選擇器2 2.集體宣告 對應的 集體宣告 h4集體宣告 h5集體宣告 p1集體宣告 p2集體宣告 p3...