欧美free性护士vide0shd,老熟女,一区二区三区,久久久久夜夜夜精品国产,久久久久久综合网天天,欧美成人护士h版

首頁綜合 正文
目錄

柚子快報激活碼778899分享:前端 CSS3語法及選擇器總結

柚子快報激活碼778899分享:前端 CSS3語法及選擇器總結

http://yzkb.51969.com/

CSS定義

css是一種樣式表語言,用來美化HTML文檔

一.CSS的引用

方式一:內部樣式表(HTML中引用)

在HTML的title標簽下方添加style雙標簽,style標簽里面書寫CSS

*style里面的注釋為/ * … /

CSS的書寫規(guī)則: 選擇器{屬性名:屬性值;}

代碼示例

我的html學習實驗草稿

CSS展示

方式二.外部樣式表(單獨的CSS文件)

將CSS代碼寫在單獨的CSS文件中(.css)在HTML使用link標簽(單標簽)引入

引用語法:

代碼示例

CSS文件

p{

color: red;

font-size: 50px;

}

HTML文件

我的前端學習實驗草稿

CSS外部樣式表引用方式示例

方式三:行內樣式(寫在標簽的style屬性值里)

通常這種方式用來配合JavaScript使用

語法:

展示div標簽使用CSS樣式

代碼示例

我的前端學習實驗草稿

CSS外部樣式表引用方式示例

展示div標簽使用CSS樣式

二.選擇器

選擇器的作用:查找標簽,設置樣式

1.標簽選擇器

使用標簽名作為選擇器,選中同名標簽設置相同樣式,并且無法差異化同名化標簽的樣式

代碼示例

我的前端學習實驗草稿

展示標簽選擇器的作用

標簽p1

標簽p2

標簽p3

div標簽1

div標簽2

div標簽3

2.類選擇器

作用:查找標簽,差異化設置標簽的顯示效果

一個類選擇器可以給多個標簽使用

一個標簽可以使用多個類名,class屬性值寫多個類名使用空格隔開即可

類名如果想命名為多個單詞,可以使用-連接,例如my-news

使用步驟:

定義類選擇器——> .類名使用類選擇器——> 標簽添加class=“類名”

代碼示例

我的前端學習實驗草稿

展示類選擇器的使用

這是第一行,展示第一個類選擇器的使用

這是第二行,沒有使用類選擇器

這是div標簽和第三行,展示使用多個類選擇器

3.id選擇器

作用:查找標簽,差異化設置標簽的顯示效果

場景:id選擇器一般配合JavaScript使用,很少用來設置CSS樣式

使用步驟:

定義id選擇器——> #id名使用id選擇器——> 標簽添加id=“id名”

同一個id選擇器在一個頁面只能使用一次

代碼示例

我的前端學習實驗草稿

展示類選擇器的使用

這是第一行,展示id選擇器的使用

這是第二行,沒有使用選擇器

4.通配符選擇器

作用:查找頁面所有標簽,設置相同樣式

通配符選擇器符號:*

通配符選擇器不需要調用,瀏覽器會自動查找頁面所有標簽,設置相同樣式

代碼示例

我的前端學習實驗草稿

展示通配符選擇器的使用

這是第一行

這是第二行

標簽

  • 列表1
  • 列表2
  • 列表3

加粗標簽

5.復合選擇器

定義:由兩個或多個基礎選擇器,通過不同方式組合而成作用:更準確,更高效的選擇目標元素(標簽)

后代選擇器

作用:選中某元素的后代元素選擇器寫法:父選擇器,子選擇器后代選擇器會選中所有的后代(子標簽,孫子標簽等)

代碼示例

我的前端學習實驗草稿

展示后代選擇器的使用

這是個span標簽

這是個被div包裹的span標簽

子代選擇器

與后代選擇器不同的是,子代選擇器只會選擇子標簽選擇器寫法:父選擇器 > 子選擇器{CSS屬性}

代碼示例:

我的前端學習實驗草稿

展示后代選擇器的使用

這是個span標簽

這是個被div包裹的span子標簽

這個是被div包裹的span孫子標簽

并集選擇器

作用:選中多組標簽設置相同的樣式選擇器寫法:選擇器1,選擇器2,…選擇器N{CSS屬性},選擇器之間用,隔開

我的前端學習實驗草稿

展示并集選擇器的使用

這是一個div標簽

這是一個p標簽

這是一個span標簽

交集選擇器

作用:選中同時滿足多個條件的元素選擇器寫法:選擇器1選擇器2{CSS屬性},選擇器之間連寫,沒有任何復合

代碼示例

我的前端學習實驗草稿

展示并集選擇器的使用

這是一個div標簽

這是一個p標簽

這是一個span標簽

柚子快報激活碼778899分享:前端 CSS3語法及選擇器總結

http://yzkb.51969.com/

參考文章

評論可見,查看隱藏內容

本文內容根據(jù)網(wǎng)絡資料整理,出于傳遞更多信息之目的,不代表金鑰匙跨境贊同其觀點和立場。

轉載請注明,如有侵權,聯(lián)系刪除。

本文鏈接:http://gantiao.com.cn/post/19115629.html

發(fā)布評論

您暫未設置收款碼

請在主題配置——文章設置里上傳

掃描二維碼手機訪問

文章目錄