CSS基本樣式與元素選擇器

2021-10-02 17:43:11 字數 2762 閱讀 3463

層疊樣式表(cascading style sheets,簡寫css),是一種用來為html文件新增樣式(字型、間距、位置、顏色、角度等顯示效果)的計算機語言

html是內容的展示,而css是內容的裝飾

行內樣式

在開始標籤的內部可以設定乙個叫做style的屬性,屬性的雙引號內存放該元素**的css樣式。

"存放該元素的css樣式"

>

<

/div>內部樣式

在head標籤中間新建乙個style標籤,該標籤內部存放的就是網頁檔案中的css**

css中的**注釋格式採用的是:/* 注釋文字 */

/*層疊樣式表:css,專門用來修飾網頁內容的顯示效果*/

...<

/style>

<

/head>

外部樣式

在head標籤中間新建乙個link標籤,通過href屬性設定外部css檔案位址。

rel是relationship的縮寫(指定當前文件與被鏈結文件的關係)rel=「stylesheet」表示我們引用的是乙個樣式表(css)檔案

"stylesheet" href=

"這裡寫css檔案的位址"

>

/*引入網頁檔案外部的乙個css檔案*/

class命名(別稱:類名)

class命名:誰都可以取,可以取任意次(就像人的姓名似的)

class命名的元素使用: . + 元素名稱,來找到乙個元素

id命名

id命名:只能是唯一的,一旦被使用了一次,其他人再也不能用(就像是人的身份證號)

id命名的元素使用: # + 元素名稱,來找到乙個元素

此外直接寫上標籤的名稱:如,div,p,h1等也可以直接找到元素

交集選擇器

由兩個選擇器構成,其中第乙個為標籤選擇器,第二個為class選擇器,兩個選擇器之間不能有空格,如h3.special。 即同時帶有兩個選擇器的才能使用你的交集選擇器所規定屬性

並集選擇器

並集選擇器(css選擇器分組)是各個選擇器通過逗號連線而成的

任何形式的選擇器(包括標籤選擇器、class類選擇器id選擇器等),都可以作為並集選擇器的一部分。如果某些選擇器定義的樣式完全相同,或部分相同,就可以利用並集選擇器為它們定義相同的css樣式。

ps:並集選擇器是你所寫的css屬性,都會額外新增到你選的選擇器中去

後代元素選擇器

後代元素選擇器是乙個空格,空格前後各有乙個選擇器
作用是:找到空格前的選擇器所選中的元素的後代元素中符合空格後選擇器的要求的元素

ps:乙個標籤中a標籤包含b標籤,b標籤包含c標籤,那麼b,c都叫做a的後代

子代元素選擇器

子代元素選擇器是乙個大於號,大於號前後各有乙個選擇器
作用是:找到大於號的選擇器所選中的元素的子元素中大於號後選擇器的要求的元素

ps:乙個標籤中a標籤包含b標籤,b標籤包含c標籤,那麼b叫做a的子代,c叫做b的子代,只要是子代都會滿足子代選擇器所新增的屬性

相鄰元素選擇器

相鄰元素選擇器是乙個+號

作用是:找到加號前的選擇器所選中的元素緊跟其後第乙個符合+號後選擇器選中的元素

ps:注意如果相鄰的沒有你算選的選擇器,相鄰選擇器將沒有目標,也就沒有作用了

兄弟元素選擇器

兄弟元素選擇器是乙個~號

作用是:找到號前的選擇器所選中的元素緊跟其後所有符合號後的選擇器選中的元素

!important是最重要的,加在任何地方都是頂級重要的 。設定權重為:無窮大

行內樣式,權重1000

id選擇器,單個權重100

類名選擇器,屬性選擇器,偽類選擇器,單個權重10

標籤選擇器,偽元素選擇器,單個權重1

萬用字元選擇器,關係選擇器(+,>,~,""),否定偽類,權重0

復合選擇器中要注意注意:這裡0+0還是還是0,10個1相加不等於10,永遠比1小,以此類推

css 基本樣式與元素選擇器以及命名規範

1.什麼是css 層疊樣式表,是一種為html文件新增樣式的計算機語言 網頁的衣服 2.css的引用方式 1 內部樣式 在head標籤中間新建乙個style標籤,用來存放css 3 行內樣式 在開始標籤內部設定乙個style屬性,用來存放css style width 200px height 20...

03 CSS基本樣式和元素選擇器

前三個常用 1.交集選擇器 連著寫 1.交集選擇器 son h1標籤中有乙個類名叫son h1.son h1標籤中有乙個id名叫red h1 red 類名為son的標籤中,有乙個id名為red son red2.並集選擇器 逗號 p,green color green 3.後代選擇器 空格 包含父與...

CSS選擇器的基本樣式

作用是什麼 設定如何顯示 html 標籤。語法結構是什麼 第一種 選擇器 說明 這種方式的css樣式表由選擇器以及一條或多條宣告兩個部分組成 該種樣式表只能定義在style 標籤或css 檔案中,每個style標籤或css檔案可定義多個css樣式表 第二種 style declaration1 de...