目錄二:scc**書寫位置(引入方式實戰)
三:css注釋管理
四:基本選擇器(重要)
五:組合選擇器(重點)
六:屬性選擇器
七:分組與巢狀
八:偽類選擇器
一:css
1.什麼是css？
css（cascading style sheet，層疊樣式表)定義如何顯示html元素。
當瀏覽器讀到乙個樣式表，它就會按照這個樣式表來對文件進行格式化（渲染）。
css3就是css語言，數字3是該語言的版本號
css語言開發的檔案是以.css為字尾，通過在html檔案中引入該css檔案來控制html**的樣式（css語言**也可以直接寫在html檔案中）
採用的語言是級聯樣式表 （cascading style sheet），也屬於標記語言。
2.css3語法
每個css樣式由兩個組成部分：選擇器和宣告。宣告又包括屬性和屬性值。每個宣告之後用分號結束。
3.語法結構
選擇器/*注釋內容*/css是來控制頁面標籤的樣式，但是可以根據實際情況書寫在不同的位置，放在不同位置有不同的專業叫法，可以分為行內式、內部式和外部式三種。1.style內部直接編寫css**
嵌入式是將css樣式集中寫在網頁的標籤對的標籤對中。格式如下：
2.link標籤引入外部css檔案
外部樣式就是將css寫在乙個單獨的檔案中，然後在頁面進行引入即可。推薦使用此方式。
3.標籤內直接書寫
三:css注釋管理
/*導航條樣式*/
/*側邊欄樣式*/
/*核心樣式*/
/*右側樣式*/
四:基本選擇器(重要)
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
前端CSS基礎
頁面布局要學習三大核心,盒子模型,浮動 和 定位。學習好盒子模型能非常好的幫助我們布局頁面 網頁布局過程 先準備好相關的網頁元素，網頁元素基本都是盒子 box 利用 css 設定好盒子樣式，然後擺放到相應位置。往盒子裡面裝內容 網頁布局的核心本質 就是利用 css 擺盒子 所謂盒子模型 就是把htm...
前端基礎 css筆記
css的四種引入方式 1.行內式 顯示優先順序最高 hello 2.嵌入式3 鏈結式 4.匯入式注意 匯入式會在整個網頁裝載完後再裝載css檔案，因此這就導致了乙個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是匯入式固有的乙個缺陷。使用鏈結式時與匯入式不同的是...
前端基礎 CSS樣式
css樣式分為3種 優先順序 行內樣式 內嵌樣式 外部樣式 1.行內樣式 width 300px height 300px background green 2.內嵌樣式 head中間新增樣式 3.外部樣式 lesson.css樣式檔案 div 引用方式 stylesheet href lesson...