前端基礎之SCC

2022-09-19 07:21:09 字數 3415 閱讀 5900

目錄二:scc**書寫位置(引入方式實戰)

三:scc注釋管理

四:基本選擇器(重要)

五:組合選擇器(重點)

六:屬性選擇器

七:分組與巢狀

八:偽類選擇器

一:scc

1.什麼數scc?

css(cascading style sheet,層疊樣式表)定義如何顯示html元素。

當瀏覽器讀到乙個樣式表,它就會按照這個樣式表來對文件進行格式化(渲染)。

css3就是css語言,數字3是該語言的版本號

css語言開發的檔案是以.css為字尾,通過在html檔案中引入該css檔案來控制html**的樣式(css語言**也可以直接寫在html檔案中)

採用的語言是級聯樣式表 (cascading style sheet),也屬於標記語言。

2.css3語法

每個css樣式由兩個組成部分:選擇器和宣告。宣告又包括屬性和屬性值。每個宣告之後用分號結束。

3.語法結構

選擇器
4.注釋語法
/*注釋內容*/
5.css**書寫位置(引入方式)
css是來控制頁面標籤的樣式,但是可以根據實際情況書寫在不同的位置,放在不同位置有不同的專業叫法,可以分為行內式、內部式和外部式三種。
二:scc**書寫位置(引入方式實戰)

1.style內部直接編寫css**

嵌入式是將css樣式集中寫在網頁的標籤對的標籤對中。格式如下:

2.link標籤引入外部css檔案

外部樣式就是將css寫在乙個單獨的檔案中,然後在頁面進行引入即可。推薦使用此方式。

3.標籤內直接書寫

三:scc注釋管理

/*導航條樣式*/	

/*側邊欄樣式*/

/*核心樣式*/

/*右側樣式*/

四:基本選擇器(重要)

1.css是用來調節標籤樣式的 那為什麼需要學選擇器呢?

因為同乙個頁面上有很多相似的標籤 並且這些標籤在不同的位置有不同的樣式 所以為了能夠區分 我們肯定先需要學習如何查詢指定的標籤
2.標籤選擇器》:通過標籤名直接查詢
/*查詢所有的div標籤*/

div

3.類選擇器(關鍵符號為句點符.)>>>:通過class值查詢標籤
/*查詢所有含有c1樣式類的標籤*/

.c1

4.id選擇器(關鍵符號為警號#)>>>:通過id值查詢標籤
/*查詢id為d1的標籤*/

#d1

5.通用選擇器(了解)
/*body內所有的標籤*/

*

五:組合選擇器(重點)

span是p的兒子 是div的孫子也可以說是div的後代

p是div的兒子也是div後代 是span的父親

div是p的父親是span的爺爺 也可以說是他們的祖先

1.後代選擇器(特徵為空格)空格的意思是後代
/*查詢div內部所有的後代span*/
2.兒子選擇器(特徵》)
/*查詢div內部所有的兒子span*/
3.毗鄰選擇器(特徵為+)
/*查詢同級別***挨著的第乙個span(不能有其他標籤間隔)*/
4.弟弟選擇器(特徵為~)
/*查詢同級別下面所有的span(不需要緊挨著)*/
六:屬性選擇器
123

1./查詢含有name屬性名的標籤/
[name]
2./查詢含有name屬性名並且值為jason的/
[name='jason']
3./查詢含有name屬性名並且值為jason的p/
p[name='jason']
七:分組與巢狀

1.多個相同選擇器並列使用

2.多個不同選擇器並列使用
3.不並列同樣可以使用組合選擇器
4.直接篩選
5.查詢class為c1的div標籤
6.總結(巢狀分組選擇器)
d1>div>.c1>span.c2
1    234

5

77

7.解析題目
查詢id為d1的標籤內部的兒子div

並且在兒子div內部查詢class為c1的兒子標籤

並且在該兒子內部查詢class為c2的兒子span

八:偽類選擇器

1.滑鼠懸浮在上面

a:hover
"""a標籤預設的顏色會變化 第一次是紅色 後面是紫色"""

2.focus(聚焦狀態)

3.未訪問的鏈結
a:link
4.選定的鏈結
a:active
5.已訪問的鏈結
a:visited

前端基礎之HTML

html 作為超文字標記語言主要是用來製作靜態頁面 html有標準 html4 標籤 原生標籤.標籤 橫線.結構標籤 字型標籤 使用 文字 標籤的屬性 標籤 屬性名 屬性值 屬性名 屬性值 段落標籤 p標籤 字型加粗標籤 b標籤 字型斜體標籤 i標籤 字型下劃線 u標籤 居中標籤 標籤 html的標...

前端基礎之css

css 規則由兩個主要的部分構成 選擇器,以及一條或多條宣告。selector 例如 2.1 行內式 行內式是在標記的style屬性中設定css樣式。這種方式沒有體現出css的優勢,不推薦使用。hello michael 2.2 嵌入式 嵌入式是將css樣式集中寫在網頁的標籤對的標籤對中。格式如下 ...

前端基礎之HTML

目錄web服務的本質 響應格式 響應狀態碼 請求方式 post請求 xml也可以書寫前端頁面,主要用於odoo框架中,書寫企業內部管理軟體 html注釋 由於html頁面結構比較複雜,內容比較多,不便於後期的維護,修改,通常在寫頁面的時候,習慣用下面的方式來人為的劃分 區域 html文件結構 hea...