柚子快報邀請碼778899分享：html 前端 【CSS基礎】

http://yzkb.51969.com/

???點進來你就是我的人了博主主頁：???戳一戳,歡迎大佬指點!

歡迎志同道合的朋友一起加油喔鷺鷺鷺

目錄

一、CSS是什么？

語法規(guī)范

引入方式

1. 內(nèi)部樣式表

2.?行內(nèi)樣式表

3. 外部樣式

二、CSS 代碼風格

1. 展開

2. 緊湊

3. 注意代碼的寫法

三、CSS 基礎選擇器 ( 重要 )

3.1?基礎選擇器

3.1.1 元素選擇器

3.1.2 類選擇器(class選擇器)

3.1.3 id選擇器

3.1.4 通配符選擇器

3.2復合選擇器

3.2.1 后代選擇器

3.2.2?子選擇器

3.2.3?并集選擇器

3.2.4?偽類選擇器

3.3.5 復合選擇器總結(jié)

3.3.6 選擇器優(yōu)先級

四、常見元素屬性

4.1 ? 字體屬性

? 4.1.1 字體樣式

4.2??? 文本屬性

4.2.1 設置文本顏色

4.2.2? 文本水平對齊

4.2.3? 文本修飾線

4.2.4? 文本縮進

4.2.5? 行高

4.3 列表樣式

4.4 表格樣式

五、背景屬性

背景顏色 (background-color)

背景圖片（background-image）

背景平鋪（background-repeat:）

背景位置 （background-position）

?背景尺寸（?background-size）

?背景圖固定

六、邊框圓角矩形(border-radius)

七、元素的顯示模式

7.1 常見的塊級元素

7.2 常見的行內(nèi)元素包括

7.3 常見的行內(nèi)塊元素包括

7.4 行內(nèi)元素和塊級元素區(qū)別

7.5 改變顯示模式(塊級元素轉(zhuǎn)換)

八、CSS盒子模型

8.1? 邊框(border)

8.2 設置邊框不撐大盒子

8.3? 內(nèi)邊距 (padding)

8.4 外邊距 (margin)

8.5 塊級元素水平居中(版心水平居中)

8.6 清除默認樣式

8.7 盒子模型-元素溢出(滾動條)

九、彈性布局

1. flex 布局基本概念

2. 開啟彈性布局(默認水平排列)

3. 修改彈性布局為垂直排列(修改主軸方向)

4. justify-content(按照主軸進行對齊,默認水平方向)

5. align-items(按照側(cè)軸進行對齊,默認垂直方向)

6. flex彈性伸縮比

7. 彈性盒子換行

8. 設置行對齊方式(對單行彈性盒子不生效)

十、Emmet語法

一、CSS是什么？

CSS(Cascading Style Sheet)：樣式層疊器，用于控制頁面表現(xiàn)，簡單來說就是用于美化頁面的效果。

語法規(guī)范

選擇器(指明要修改誰) + 若干屬性聲明(修改為什么)

選擇器 {

屬性名1：屬性值1;

屬性名2：屬性值2;

... ...

}

冒號后面帶空格選擇器和 { 之間也有一個空格css 不區(qū)分大小寫，開發(fā)時統(tǒng)一使用小寫每一對屬性需要使用 ； 隔開，最后一對屬性可以不加；

?我們的style標簽可以放在任何位置，一般我們放在head標簽里。

/* css注釋 */

我們需要注意CSS注釋的格式，也可以通過ctrl + /快速注釋

引入方式

1. 內(nèi)部樣式表

內(nèi)部樣式表是寫在當前編輯的 html 中的 style 標簽內(nèi)，理論上來說 style 標簽可以放到 html 的任意位置，但我們一般都是習慣放到 head 標簽中。其中 p { } 表示選擇器。

welcome to the world

2.?行內(nèi)樣式表

行內(nèi)樣式表是通過 style 屬性，來直接指定某個標簽的樣式。

welcome to the world

?注意：行內(nèi)樣式表的優(yōu)先級更高

welcome to the world

注意:?由于行內(nèi)樣式表的優(yōu)先級高于內(nèi)部樣式表，所以 style 屬性會覆蓋 p 選擇器中的一些設置。 在我們使用 CSS 的時候，一個元素最終的樣式，其實可以是 " 多方疊加 " 的效果，也就是說，一個元素的樣式可以由很多地方同時設置，最終是一個疊加效果，但在這個過程中，有些設置的樣式能夠生效，有些可能不會生效，這取決與語法實現(xiàn)。展示效果:

3. 外部樣式

(1) 創(chuàng)建一個 css 文件，在 css 文件中，編輯樣式。 (2) 在 html 文件中，使用 link 標簽，并通過路徑引入 css 文件。

stylesheet 這個值告訴瀏覽器，鏈接的資源是一個 CSS 樣式表,用于為文檔提供樣式。通過這種方式,你可以將 CSS 樣式與 HTML 文檔分離,使代碼更易于維護和管理。 href="demo1.css" 則是指定外部樣式表的 URL 地址,它告訴瀏覽器從何處加載 CSS 文件。在這個例子中,CSS 文件名為 "demo1.css",通常與 HTML 文件位于同一目錄中。

?css 文件

??html 文件

?展現(xiàn)效果:

注意:使用外部樣式的時候，可能在修改內(nèi)容后，不會生效。造成這種情況的原因：受到瀏覽器緩存的影響。

關于緩存： 這是計算機中一種常見的提升性能的技術手段，網(wǎng)頁依賴的資源 ( 圖片/CSS/JS等 ) 通常是從服務器上獲取的，而如果用戶頻繁訪問該網(wǎng)站，那么這些外部資源就沒必要反復從服務器獲取。所以計算機就將緩存先存起來 ( 就是存在本地磁盤上了 )，從而提高訪問效率。

在使用瀏覽器的時候，如果真的遇到修改內(nèi)容不生效的這種情況，就可以通過 Ctrl + F5 強制刷新頁面，即強制瀏覽器重新獲取 css 文件。

二、CSS 代碼風格

1. 展開

p {

color: red;

font-size: 30px;

}

開發(fā)階段，一般建議寫成展開風格，使得代碼可讀性更高。

2. 緊湊

p { color: red; font-size: 30px;}

部署階段，一般建議使用緊湊風格。

因為 CSS 的作用是對頁面進行美化，此外，在編寫 css 代碼的時候，和 html 一樣，空格、換行在代碼中是不生效的。而當我們將所編寫的 css 代碼全部確認后，就可以寫在一起，這樣就能減少不必要的空格、縮進、換行等，從而達到節(jié)省帶寬的效果。我們在前面提到，CSS 是從服務器下載到瀏覽器中的，CSS 代碼越長，要下載的內(nèi)容就越多，所以就會消耗帶寬。

而由于 CSS 和 JS 都是從服務器下載到瀏覽器的本地的，所以對應的 css 文件 和 js 文件中的代碼一般都會使用專業(yè)的工具進行壓縮。

3. 注意代碼的寫法

在 CSS中，對于更復雜的代碼，一般都是使用 " 脊柱命名法 "

編程語言常見的命名風格：

① 駝峰命名法：形如 【fontSize】 ( Java / JS / C++)

② 蛇形命名法：形如 【font_size】( C / C++ )

③ 脊柱命名法：形如 【font-size】( CSS )，比較少見。

④ 匈牙利命名法：類似于駝峰，但會先加上一個前綴，表示類型。 形如 【ifrontSize】( 整型變量 ) 形如 【sfrontSize】( 字符串類型變量 ) ( 比較少見，當下時代基本不這么寫了，Windows API 中很多都是這么搞的 )

三、CSS 基礎選擇器 ( 重要 )

3.1?基礎選擇器

元素選擇器類選擇器id 選擇器通配符選擇器

3.1.1 元素選擇器

語法 : 標簽名{}

作用 : 選中對應標簽中的內(nèi)容

能快速將同一類型的標簽都選擇出來但是不能差異化

例:p{} , div{} , span{} , ol{} , ul{} ......

3.1.2 類選擇器(class選擇器)

語法 : .class屬性值{}

類名用 .開頭 通過類屬性來指定元素樣式，一個標簽可以有多個類名 可以讓多個標簽都使用一個類

(注意此處的類名跟java的類沒有任何關系,也沒有封裝,繼承,多態(tài))

作用 : 選中對應class屬性值的元素

例子 :

段落1

? ? ? ? ?

段落1

? ? ? ? ?

段落1

? ? ? ? ? .A{} , .B{} , .C{} ......

注意:class里面的屬性值不能以數(shù)字開頭,如果以符號開頭,只能是'_'或者'-'這兩個符號,其他的符號不可以,一個class里面可以有多個屬性值

3.1.3 id選擇器

語法 : #id屬性值{}

以 #開頭表示 id選擇器id 值是唯一的，只能有一個，就像身份證號一樣

作用 : 選中對應id屬性值的元素

例子 :

段落1

? ? ? ? ?

段落1

? ? ? ? ?

段落1

? ? ? ? ? #A{} , #B{} , #C{} ......

注意 : id的屬性值只能給1個,可以重復利用,不能以數(shù)字開頭

3.1.4 通配符選擇器

語法 : *{}

作用 : 讓頁面中所有的標簽執(zhí)行該樣式,通常用來清除間距

例子 : *{

? ? ? ? ? ? ?margin: 0; ?//外間距

? ? ? ? ? ? ?padding: 0; ?//內(nèi)間距

}

上面通配符選擇器會讓頁面中所有的內(nèi)容都會變成紅色?

基礎選擇器的優(yōu)先級：

id 選擇器 > 類選擇器 > 標簽選擇器

基礎選擇器總結(jié)

作用作用標簽選擇器能選出所有相同標簽能選出一個標簽標簽選擇器能選出一個或多個標簽根據(jù)需求選擇,?最靈活,?最常用.id?選擇器能選出一個標簽根據(jù)需求選擇,?最靈活,?最常用.通配符選擇器能選出一個標簽根據(jù)需求選擇,?最靈活,?最常用.

3.2復合選擇器

3.2.1 后代選擇器

元素1 元素2 {

設置樣式

}

注意：

① 只對元素2 進行設置樣式，不影響元素1 ② 元素1 是父級，元素2 可以是子級，或?qū)O子級，或重孫子級… ③ 元素1 和 元素2 可以是標簽選擇器、類選擇器、id 選擇器…

?展示效果:

?1.后代選擇器，元素2不一定是兒子，還可以是孫子

?2.后代選擇器可以是任意基礎選擇器的組合. (包括類選擇器, id?選擇器)

3.2.2?子選擇器

元素1>元素2 { 樣式聲明 }

使用大于號分割 只選兒子?,?不選孫子元素

1. 張三
2. 李四
3. 王五

3.2.3?并集選擇器

元素1, 元素2 { 樣式聲明 }

• 張三

1. 張三
2. 李四

3.2.4?偽類選擇器

此處只演示?hover、active

3.3.5 復合選擇器總結(jié)

選擇器 作用注意事項后代選擇器選擇后代元素可以是孫子元素子選擇器選擇子元素只能選兒子,?不能選孫子并集選擇器選擇相同樣式的元素更好的做到代碼重用偽類選擇器選擇不同狀態(tài)的鏈接重點掌握?hover、active

3.3.6 選擇器優(yōu)先級

四、常見元素屬性

4.1 ? 字體屬性

? 4.1.1 字體樣式

4.2??? 文本屬性

4.2.1 設置文本顏色

color 屬性值的三種寫法：

預定義的顏色值 (單詞) [?最常用?]?十六進制形式 RGB 方式

認識 RGB：

我們使用 R (red), G (green), B (blue) 的方式表示顏色 ( 色光三原色 ). 三種顏色按照不同的比例搭配 , 就能混合出各種五彩斑斕的效果.計算機中針對 R, G, B 三個分量 , 分別使用一個字節(jié)表示 (8 個比特位 , 表示的范圍是 0-255, 十六進制表示為 00-FF).數(shù)值越大 , 表示該分量的顏色就越濃 . 255, 255, 255 就表示白色 ; 0, 0, 0 就表示黑色

4.2.2? 文本水平對齊

text-align屬性主要用于設置文本的水平對齊方式。這個屬性只對行內(nèi)元素和文本內(nèi)容生效。對于塊級元素，它不會改變其對齊方式，但是會影響其內(nèi)部的文本內(nèi)容和行內(nèi)元素的對齊方式。如果想讓塊級元素居中顯示，常見的做法是使用margin: 0 auto;（前提是已設定了該塊級元素的寬度）

?展示效果:

4.2.3? 文本修飾線

text-decoration 屬性允許對文本設置某種效果，如加下劃線。

四個取值的效果：

underline?下劃線?. [?常用?] none?啥都沒有?.?可以給?a?標簽去掉下劃線 overline?上劃線?. [?不常用?] line-through 刪除線 [ 不常用 ]

展示效果:

4.2.4? 文本縮進

text-indent: [值];

單位可以使用 px 或者 em，一個文字大小就是 1em。

4.2.5? 行高

line-height: [值];

行高 = 文字高度 + 行間距

也可以是兩行文字的頂線之間的距離、中線之間的距離、基線之間的距離或者底線之間距離。

4.3 列表樣式

4.4 表格樣式

五、背景屬性

背景顏色 (background-color)

設置的值和文本顏色差不多，默認情況下是 transparent（透明）的

背景圖片（background-image）

比 image 更方便控制位置，url 里可以放相對路徑、絕對路徑，網(wǎng)絡路徑

背景平鋪（background-repeat:）

重要的四個取值，repeat（平鋪），no-repeat（不平鋪），repeat-x（水平平鋪），repeat-y（垂直平鋪）。默認情況下是 repeat。

背景位置 （background-position）

?背景尺寸（?background-size）

可以填具體數(shù)值，例如：50px，還可以是使用 cover（把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域）和 contain（把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內(nèi)容區(qū)域. ）

?背景圖固定

六、邊框圓角矩形(border-radius)

通過 border-radius 使邊框帶圓角效果.

基本用法：border-radius: length;

七、元素的顯示模式

7.1 常見的塊級元素