CSS語法及常用選擇器

2021-10-07 05:17:26 字數 3353 閱讀 3494

css的語法

△css常用選擇器

(1)層疊樣式表(cascading style sheets)是一種用來表現html(標準通用標記語言的乙個應用)或xml(標準通用標記語言的乙個子集)等檔案樣式的計算機語言。css不僅可以靜態地修飾網頁,還可以配合各種指令碼語言動態地對網頁各元素進行格式化。

(2)css 能夠對網頁中元素位置的排版進行畫素級精確控制,支援幾乎所有的字型字型大小樣式,擁有對網頁物件和模型樣式編輯的能力。

我感覺上述呢,有點長篇大論了。

二:我的理解:css可以用來為網頁建立樣式表,通過樣式表可以對網頁進行修飾。

對於我們所看到的網頁,它就是乙個頁面,但是事實並不是這樣,其實整個網頁是一層一層的結構,層次高的覆蓋層次低的,最後形成我們所看到的這個樣子。

(1) 內聯樣式:將css樣式編寫到元素的style屬性中,

例如:< p style="color : red">設定字型是紅色< /p>

說明:內聯樣式將樣式直接編寫到了style屬性中,只對當前元素中的內容起作用,屬於結構與表現耦合,不方便復用。一般不使用

(2)內部樣式表:將css樣式編寫到head的style標籤中

例如:< style type="text/css">< /style>

說明:將內部樣式表編寫到style標籤中,通過css選擇器選中元素,使得網頁的結構與表現進一步分離,也可復用,對於較少的css**推薦使用。

(3)外部的css檔案:可以將樣式表寫到外部的css檔案中,通過link標籤進行外部引用。

例如:< link rel="stylesheet" type="text/css">

說明:將css樣式編寫到外部的css檔案中,使得網頁的結構與表現完全分離,最大限度的使樣式復用。

選擇器 宣告塊

選擇器:通過選擇器可以選中頁面中指定的元素,並且將宣告塊中的樣式應用到選擇器對應的元素上。

宣告塊:宣告塊緊跟在選擇器的後邊,使用括起來,宣告塊中實際上就是一組一組的名值對結構,而這一組組名值對稱之為宣告。

例如:div

一:元素選擇器

作用:通過元素選擇器可以選擇頁面中的所有指定元素。

語法:標籤名

二:id選擇器

作用:通過元素的id屬性值選中唯一的元素。

語法:#id屬性值

三:類選擇器

作用:通過元素的class屬性值選中一組元素。

語法:.class屬性值

四:並集選擇器(選擇器分組)

作用:通過並集選擇器可以同時選中多個選擇器對應的元素。

語法:選擇器1,選擇器2,……選擇器n

五:交集選擇器(復合選擇器)

作用:通過交集選擇器可以選中同時滿足多個選擇器的元素。

語法:選擇器1選擇器2……選擇器n

注意:中間無「,」或者空格。

六:通配選擇器

作用:通過通配選擇器可以選中頁面中的所有元素。

語法:*

接下來涉及到元素之間的關係:

父元素。子元素。祖先元素。後代元素。兄弟元素。概念不說了--------囉嗦,用例子好理解(如圖):

段落

超連結span

< div>是< p>的父元素,是< a>的祖先元素,父元素也可以叫做祖先元素。相反< p>是< div>的子元素。< a>是< div>的後代元素。子元素也屬於後代元素。< p>與< scan>互為兄弟元素。

七:後代元素選擇器

作用:選中指定元素的指定後代元素。

語法:#祖先元素 空格 後代元素

拓展:#祖先元素 空格 後代元素 空格 後代元素 //選擇祖先元素之後的之後的元素。

八:子元素選擇器

作用:選中指定父元素的指定子元素。

語法:#父元素 > 子元素

拓展:#父元素 > 子元素 > 子元素 //選擇父元素之後的之後的元素。

九:偽類選擇器

作用:偽類專門用來表示元素的一種特殊狀態。

比如:訪問過的超連結,未訪問過的超連結,獲取焦點的文字框…………

當我們需要為處在這些特殊狀態的元素設定樣式時,就可以用偽類。

(1)➊ :link -------表示普通的連線,沒有訪問過的鏈結

例如:a:link➋➌➍➎➏

➋ :visited -------表示訪問過的鏈結

例如:a:visited

➎ :focus-------表示獲取焦點的狀態

例如:a:focus

➏ ::selection-------為標籤中選中的內容設定樣式

例如:a::selection

十:偽元素選擇器

作用:使用偽元素選擇器來表示元素中的一些特殊位置。

(1)➊ :first-letter -------為第乙個字元設定特殊的樣式

例如:p:first-letter

➋ :first-line -------為第一行設定特殊的樣式

例如:p:first-line

➌ :before-------表示元素最前邊的部分

例如:a:before

➍ :after-------表示元素最後邊的部分

十一:屬性選擇器

作用:可以根據元素的屬性或屬性值來選取指定的元素。

語法:➊[屬性名]:選取含有指定屬性的元素。

➋ [屬性名=「屬性值」]:選取含有指定屬性的元素。

➌ [屬性名=「屬性值」]:選取含有指定屬性的元素。

➍ [屬性名^=「屬性值」]:選取屬性值以指定內容開頭的元素。

➎ [屬性名$=「屬性值」]:選取屬性值以指定內容結尾的元素。

➏ [屬性名*=「屬性值」]:選取屬性值包含指定內容的元素。

十二:兄弟元素選擇器

(1)(後乙個)兄弟選擇器 (+)

作用:可以選中乙個元素後緊挨著的指定的兄弟元素

語法:前乙個+後乙個

(2)(後所有)兄弟選擇器 (~)

作用:可以選中乙個元素後邊的所有兄弟元素

語法:前乙個~後乙個

十三:否定偽類選擇器

作用:可以從已選定的元素中剔除出某些元素。

語法: :not(選擇器)

標籤1

p標籤2

標籤3p標籤4

例如: p:not(.class) //處理class值為hello的元素外,其餘都是背景色為紅色。

楠哥-------一心想為it行業添磚加瓦,卻總是面向cv程式設計的程式設計師。

css語法選擇器

表示的選擇所有的節點 表示的是id為container的 節點 container選擇所有class屬性是container的節點 li a 選擇所有的li標籤下面的a元素 ul p 選擇ul後面面的第乙個p元素 div container ul 選擇id是container的div的第乙個ul元素...

css語法 選擇器

css 選擇器是用來選擇標籤的,選出來以後給標籤加樣式。標籤選擇器 類選擇器 層級選擇器 後代選擇器 id選擇器 組選擇器 偽類選擇器 根據標籤來選擇標籤,以標籤開頭,此種選擇器影響範圍大,一般用來做一些通用設定。示例 type text css pstyle hellodiv hellop 根據類...

CSS常用 選擇器及樣式

本章僅僅只是對css的乙個彙總,方便查詢使用 css 指層疊樣式表 cascading style sheets 他的作用是為了顯示html元素,優點在於讓定義樣式更加簡單,讓網頁的內容和表現分離,使多個樣式可以層疊使用。css的使用格式是選擇器 宣告 selector p在這裡臨時插入css的三個...