前端之CSS介紹 選擇器

2022-05-27 03:03:25 字數 2767 閱讀 1365

一、概述

css我們稱呼層疊樣式表(英文全稱:cascading style sheets)。它是一種用來表現html(標準通用標記語言的乙個應用)或xml(標準通用標記語言的乙個子集)等檔案樣式的計算機語言。css不僅可以靜態地修飾網頁,還可以配合各種指令碼語言動態地對網頁各元素進行格式化。如果html是乙個人,那麼css就相當於衣服,有了它我們可以讓html樣式豐富多彩。

二、編寫css樣式

2.1、在標籤上設定style屬性

小蘇蘇

#style屬性就是設定樣式的

2.2、寫在head裡面這種css的使用方法又叫css選擇器,我們下面重點來說一下,css的注釋方法:/* ..... */

小蘇蘇

#在body裡面使用

三、css選擇器3.1、id選擇器 *說明:在head標籤的style中設定 #id 設定樣式,這個id對應的是標籤的id,但是這個一般不用,因為我們的id是預設不重複的

#id

《標籤 id="id">例項:

蘇蘇

3.2、class選擇器 *****說明:在head標籤的style中設定 .名稱 樣式,在標籤中直接用class='名稱'的方式使用樣式

.名稱

《標籤 class="名稱">例項:

蘇蘇#使用class="樣式名稱使用該樣式"

3.3、標籤選擇器 *****說明:利用標籤設定樣式,這個作用是使此標籤都使用這個樣式

標籤名  

《標籤名》例項

蘇蘇#所有的div都使用此樣式

小蘇蘇蘇蘇呀

3.4、層級選擇器 *****說明:根據層級關係,選擇某個標籤下的所有標籤使用該樣式,層級之間用空格分開

第1層標籤    第2層標籤名  ....  

《第1層標籤》

《第2層標籤》

........

注意:這裡的標籤可以是 class(.c1)、id(#id)、標籤名(div)

例項:

小蘇蘇wqbjdqw

dwqdqd

dqwdwq

蘇蘇

效果圖

3.5、組合選擇器 *****

說明:就是多個標籤使用乙個樣式,標籤之間用逗號隔開

第1個標籤,第2個標籤,第3個標籤,.....  

《第1個標籤》注意了:這裡的標籤跟上面的一樣可以是 class(.c1)、id(#id)、標籤名(div)

例項:

蘇蘇wqbjdqw

dwqdqd

dqwdwq

小蘇蘇

效果

3.6、屬性選擇器 *****

說明:根據標籤的屬性來設定樣式

標籤[屬性名=values]  

《標籤 屬性名=values>注意了:這個屬性是可以css自定義的,也可以是自己定義的。

3.7、css的優先順序1)引入多個樣式說明:我們知道乙個標籤可以有多個css的樣式,就是說乙個class屬性可以寫入多個樣式,中間以空格隔開

2)、多個樣式的優先順序

注意:這邊說的優先順序高,指的是樣式裡面有同乙個樣式,比如上面三個都有color樣式,如果他們存在不同的樣式,則三種樣式不存在優先順序,都所有的樣式都用上。

三、css的存在形式

之前我們寫的樣式都是寫在了head的style裡面,但是這樣只能提供乙個html檔案使用,其他的html檔案就不能很好的重用此樣式了。

那怎麼辦?我想其他的html檔案也想用,所以我們就建立乙個css檔案,然後通過在head標籤裡面的link標籤去匯入就可以了

①建立css檔案

②html檔案中到入css檔案

③使用該css樣式

注意了,這邊link標籤中的href="css的路徑",一般情況下會寫在css資料夾下。

前端學習之 CSS 選擇器

css選擇有三種 html 元素指的是從開始標籤 start tag 到結束標籤 end tag 的所有 元素選擇器通過標籤名選擇元素。p元素 p元素p元素 效果 id選擇器通過id選擇元素,乙個元素的id應該是唯一的。另乙個元素不應該重複使用 p標籤 p1標籤 效果 當需要多個元素,都使用同樣的c...

學習前端之CSS選擇器

css選擇器是個啥子東東?別看它取了個高階的名字,其實就相當於給目標人物取名字,例如 div 我要給上面的div標籤加樣式,首先就要找到它,簡單粗暴的一種,就是直接取div div這樣我們就能給div加樣式了。廢話不多說,選擇器有哪些呢?標籤選擇器 上面的例子就是標籤選擇器,直接是用的標籤名,寫di...

前端基礎css之選擇器

css cascading style sheet,層疊樣式表 定義如何顯示html元素。當瀏覽器讀到樣式表,它就會按照這個樣式來對文件進行格式化 渲染 每個css樣式由兩部分組成 選擇器和宣告。宣告有包括屬性和屬性值。每個宣告之後用分號結束。1,行內樣式 直接寫在標籤裡面style 樣式1 樣式2...