CSS概念
- CSS（Cascading Style Sheets）層疊樣式表，又叫級聯(lián)樣式表，簡稱樣式表。
- 后綴名為.css
- CSS用戶HTML文檔中元素樣式的定義
使用css的目的就是讓網(wǎng)頁具有美觀一致的頁面
CSS語法
CSS規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明（即樣式）
<style>
h1{
color:blue;
font-size:12px;
}
</style>
CSS的引入方式
-
內(nèi)聯(lián)樣式（行內(nèi)樣式）
image.png -
內(nèi)部樣式
image.png -
外部樣式（最優(yōu)）
image.png
選擇器
選擇器種類
-
全局選擇器
優(yōu)先級最低，一般用于樣式初始化
image.png -
元素選擇器
image.png
image.png -
類選擇器
image.png -
ID選擇器
image.png
選擇器的優(yōu)先級
優(yōu)先級從高到底：行內(nèi)（內(nèi)聯(lián)）樣式>ID選擇器>類選擇器>元素選擇器
字體屬性
CSS字體屬性定義字體，顏色、大小、加粗、文字樣式
color：文本的顏色（）
font-size：文本大?。╟hrome瀏覽器接受最小字體是12px）
font-weight：設(shè)置文本的粗細
image.png
font-style：指定文本的字體樣式，<i>標(biāo)簽?zāi)J是斜體的
image.png
font-family：指定一個元素的字體（如微軟雅黑）
每個值用逗號分開
如果字體名稱包含空格，它必須加上引號
image.png
背景屬性
CSS背景屬性主要有以下幾個：
cover：使容器填充滿，而圖片中多余的部分看不到
contain：使圖片保持最大比例顯示，容器會有多余部分沒被填充
文本屬性
- text-align:指定元素文本的水平對齊方式，值：left right center
- text-decoration：underline（下劃線）、overline（上劃線）、line-through（刪除線）
-
text-transform：控制文本的大小寫 captialize（每個單詞開頭大寫）、uppercase（全部字母大寫）、lowercase（全部字母小寫）
image.png - text-indent：規(guī)定文本塊中首行文本的縮進（單位px，負值允許）
表格屬性
- 折疊邊框和寬高
表格：table>tr*N>td*N
border-collapse：折疊邊框，將table與td中設(shè)置的邊緣線折疊起來，使看起來是單線條
- 表格文字對齊方式
td{ text-align:right; }
垂直對齊屬性設(shè)置垂直對齊
td{ vertical-align:bottom}
-
表格填充
padding：設(shè)置文本與表格邊緣的距離
image.png
image.png - 背景與字體顏色
background-color
color
關(guān)系選擇器
- 后代選擇器
- 子代選擇器
- 相鄰兄弟選擇器
- 通用兄弟選擇器
CSS盒子模型(Box Model)
盒子模型在設(shè)計和布局時使用
概念：所有HTML元素可以看作盒子，在CSS中，“box model”這一術(shù)語是用來設(shè)計和布局時使用
CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTMl元素，它包括：
外邊距（margin），邊距（border），內(nèi)邊距（padding），和實際內(nèi)容（content）
image.png
Margin（外邊距）：清除邊框外的區(qū)域，外邊距是透明的；如果只設(shè)置一個值，那么默認情況下上下左右外邊距都是這個值，也可以分別設(shè)置各個方向的值；兩個值：第一個上下，第二個左右。同時也可以四個值分開來寫，比如margin-right。
Border（邊框）：圍繞在內(nèi)邊距和內(nèi)容外的邊框
Padding（內(nèi)邊距）：清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的（適應(yīng)內(nèi)容的背景顏色），兩個值：第一個上下，第二個左右。同時也可以四個值分開來寫，比如padding-left。
Content（內(nèi)容）：盒子的內(nèi)容，顯示文本和圖像
padding：第一個值代表上下間距，第二個值代表左右間距。當(dāng)然，還有padding-left、padding-right、padding-top、padding-bottom來設(shè)置各個方向的padding值
margin和padding一樣也具有margin-left等設(shè)置。
- box-sizing：content-box|border-box
1、 content-box：當(dāng)定義width和height時，它的參數(shù)值不包括border和padding。
2、 border-box：當(dāng)定義width和height時，border和padding的參數(shù)值被包含在width和height之內(nèi)。
彈性盒子模型（flex box）
彈性盒子是CSS3的一種新的布局模式
CSS3彈性盒是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素擁有恰當(dāng)?shù)男袨榈牟季址绞?br> 引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排序、對其和分配空白空間
- CSS3彈性盒內(nèi)容
彈性盒子由彈性容器（felx container）和彈性子元素（Flex item）組成
彈性容器通過設(shè)置display屬性的值為flex將其定義為彈性容器
彈性容器內(nèi)包含了一個或多個彈性子元素
默認彈性盒里內(nèi)容橫向擺放
- flex-dicrection屬性
- justify-content屬性（縱向位置調(diào)整，居上、居中、居下）
- align-items屬性（橫向位置調(diào)整，居左、居中、居右）
子元素上的屬性
- flex-grow/flex：簡單理解就是設(shè)置權(quán)重，然后自動為分配的元素分配剩余的空間，這個屬性的優(yōu)先級大于寬高，也就是說一旦設(shè)置了權(quán)重，那么子元素的寬或者高就失效了（具體看flex-dicrection的設(shè)置是橫向還是縱向）
文檔流
文檔流是文檔中可顯示對象在排列時所占用的位置/空間
解決方法：脫離文檔流
- 脫離文檔流：
1、 浮動
2、 絕對定位
3、 固定定位
浮動
增加一個浮層來放置內(nèi)容
flow屬性定義元素在那個方向浮動，任何元素都可以浮動。
image.png
- 浮動的原理
1、 浮動以后使元素脫離文檔流
2、 浮動只有左右浮動，沒有上下浮動
浮動在導(dǎo)航的應(yīng)用
清除浮動
- 浮動的副作用
當(dāng)元素設(shè)置float浮動后，該元素就會脫離文檔流并向左或向右浮動
1、 浮動會造成父元素高度坍塌：當(dāng)父元素沒有設(shè)置高度，由子元素撐起高度時，父元素會包裹子元素，但子元素浮動時，這種撐起效果就消失了，父元素肉眼不見，即父元素坍塌。
2、 后續(xù)元素會造成影響 - 浮動清除方案:
1、 父元素設(shè)置高度
2、 受影響的元素增加clear屬性
當(dāng)clear：both，無論左浮動還是右浮動，都清除
3、 overflow清除浮動（使用較多）
4、 偽對象方式
定位
position屬性指定了元素的定位類型
其中絕對定位和固定定位會脫離文檔流
設(shè)置定位后：可以使用四個方向值進行調(diào)整位置：left、top、right、bottom
| 值 | 描述 |
|---|---|
| relative | 相對定位 |
| absolute | 絕對定位（可以多層覆蓋） |
| fixed | 固定定位（頁面滾動，不會對其位置造成影響，類似于懸浮按鈕） |
注意：設(shè)置定位后，相對定位和絕對定位是相對于具有定位的父級元素進行位置調(diào)整，如果父級元素不存在定位，則繼續(xù)向上逐級尋找，直到頂層文檔。簡單理解：就是父級容器設(shè)置了定位（不管是相對還是絕對），父級容器的位置會影響子級容器的位置。
當(dāng)父級沒有定位時：
- z-index
z-index屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
image.png
CSS3新特性
- 圓角
border-radius屬性 - 陰影
box-shadow：h-shadow v-shadow blur color；
| 值 | 描述 |
|---|---|
| h-shadow | 必選，水平陰影的位置 |
| v-shadow | 必選，垂直陰影的位置 |
| blur | 可選，模糊距離 |
| color | 可選，陰影的顏色 |
動畫
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果，也是CSS3新特性的一種
可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)
用百分比來規(guī)定變化發(fā)生的時間，或用關(guān)鍵詞“from”和“to”，等同于0%和100%
0%是動畫的開始，100%是動畫的完成。
animation執(zhí)行動畫
| 值 | 描述 |
|---|---|
| name | 設(shè)置動畫的名稱 |
| duration | 設(shè)置動畫的持續(xù)時間 |
| timing-function | 設(shè)置動畫效果的速率（如下） |
| delay | 設(shè)置動畫的開始時間（延時執(zhí)行） |
| iteration-count | 設(shè)置動畫循環(huán)的次數(shù)，infinite為無限次數(shù)循環(huán) |
| direction | 設(shè)置動畫播放的方向（如下） |
| animation-play-state | 控制動畫的播放狀態(tài)：running代表播放，而paused代表停止播放 |
| timing-function值 | 描述 |
|---|---|
| ease | 逐漸變慢（默認） |
| linear | 勻速 |
| ease-in | 加速 |
| ease-out | 減速 |
| ease-in-out | 先加速后減速 |
| direction值 | 描述 |
|---|---|
| normal | 默認為normal表示向前播放 |
| alternate | 動畫播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放 |
例子：鼠標(biāo)懸浮于導(dǎo)航時狀態(tài)變化效果
opacity：透明度
媒體查詢
媒體查詢能使頁面在不同終端設(shè)備下達到不同的效果
媒體查詢會根據(jù)設(shè)備的大小自動識別加載不同的樣式
-
設(shè)置meta標(biāo)簽
去掉這段代碼后，在手機端將等比例縮放
image.png - 媒體查詢語法
根據(jù)設(shè)備屏幕的的尺寸不同，發(fā)生變化
雪碧圖
- 優(yōu)點
1、 減少圖片的字節(jié)
2、 減少網(wǎng)頁的http請求，從而大大的提高頁面的性能 - 原理
1、 通過background-image引入背景圖片
2、 通過background-position把背景圖片移動到自己需要的位置
移動圖片，只展示需要的那一部分
可以通過檢查調(diào)整position
字體圖標(biāo)
我們會經(jīng)常用到一些圖標(biāo)。但是我們在使用這些圖標(biāo)時，往往會遇到失真的情況，而且圖片數(shù)量很多的話，頁面加載會就越慢。所以，我們可以使用字體圖標(biāo)的方式來顯示圖標(biāo)，及解決了失真的問題，也解決了圖片占用資源的問題
常用字體圖標(biāo)庫：阿里字體圖標(biāo)庫
優(yōu)點
1、 輕量型：加載速度塊，減少http請求
2、 靈活性：可以利用CSS設(shè)置大小顏色等
3、 兼容性： 網(wǎng)頁字體支持所有現(xiàn)在瀏覽器，包括IE低版本使用字體圖標(biāo)
1、 下載代碼
2、 選擇font-class引用
