技術標籤：前端學習筆記

CSS3

一、概念

Cascading Style Sheets 層疊樣式表，用來展現HTML、XHTML的頁面標籤的外觀風格

二、CSS的作用

用來美化頁面元素 - 美化外觀
用來佈局頁面元素 - 佈局定位
用來實現內容和外觀的分離 - 方便維護和修改

三、CSS三種基礎選擇器

3.1 選擇器分類

元素選擇器：用於設定相同標籤的共性風格
類選擇器：用於設定不同標籤的共性風格
ID選擇器：用於設定特定元素的風格（因為id選擇器的權重過高，儘量少用甚至不用）

3.2 選擇器優先順序

ID選擇器 > 類選擇器 > 元素選擇器
同樣優先順序的選擇器選中同樣的目標，後面的會覆蓋前面的

四、CSS樣式屬性

4.1 字型

font-size 字型大小

font-weight 字型粗細

font-style 字型風格

font 字型所有屬性

示例：font: italic bold 24px Consolas,'宋體',sans-serif;

順序不能調整

4.2 文字

color 文字顏色

text-align 文字水平對齊方式

text-decoration 文字修飾線
可選值 | 說明
none | 預設值
無
underline | 下劃線
overline | 上劃線
line-through | 刪除線

示例：text-indent:2em;
所有單位都可以使用，但一般只使用em表示縮排幾個字的寬度

line-hei|ght 文字行高

示例：line-height:1.5em;
所有單位都可以使用，但一般使用em，一般預設為1.35em，推薦使用1.5em

vertical-align 行級元素垂直方向對齊線

white-space 文字卷行處理方式

text-overflow 文字溢位處理方式

示例：text-overflow:ellipsis;
多餘文字使用省略號顯示

五、常用偽類樣式

** :hover**

滑鼠懸停在元素上的效果

** :active**

元素處於啟用狀態時的效果（單擊未釋放的超連結樣式）

** :focus**

元素獲得焦點時

** ::placeholder**

輸入框提示文字

** ::before**

在元素內部的最前面新增一個文字節點

p::before {
	content: '';
}

** ::after**

在元素內部的最後面新增一個文字節點

p::after {
	content: '';
	display: 'block';
	clear:both;
}

六、尺寸屬性

1. width
2. min-width
3. max-width
4. height
5. min-height
6. max-height

尺寸屬性只對塊級元素及行塊級元素起效果
對行級元素無效

補充尺寸單位

七、顯示屬性

設定元素的顯示佈局方式

八、背景屬性

background-color 背景顏色

可選值和color屬性一致
特殊值：transparent 預設值，透明

background-image 設定背景影象

示例：background-image:url('./img/bg.jpg');
相對地址為css檔案的地址

background-repeat 背景平鋪方式

background-position 背景偏移值或位置

可使用此功能實現大圖片裁切小圖片的功能

background 複合屬性

background: #000 url("") 205px 10px no-repeat
順序可調整

opacity 透明度

0~1
0表示完全透明
1表示完全顯示

九、盒子模型

盒子模型結構：

content 內容
border 邊框
padding 內邊距
margin 外邊距

border-color 邊框顏色
border-width 邊框寬度
border-style 邊框樣式

border 邊框複合屬性
padding 內邊距
margin 外間距

可利用margin設定塊級元素居中顯示

margin-left: auto;
margin-right: auto;

以上的屬性都可以單獨設定某個方向

十、CSS3 新特性

text-shadow 文字陰影效果
text-shadow: none | <length> <length> <length> <color>[,<more-shadow>];

第一個：用於設定元素的陰影水平偏移值，可以為負值
第二個：用於設定元素的陰影垂直偏移值，可以為負值
第三個：用於設定元素的陰影模糊值，不可以為負值
color：用於設定陰影的顏色
常用的尺寸單位：px，em，rem
more-shadow是多個陰影的意思，需要用逗號進行分隔

box-shadow 邊框陰影
box-shadow: none | <length> <length> <length> <length> <color> inset[,<more-shadow>];

第一個length：用於設定元素的陰影水平偏移值，可以為負值
第二個length：用於設定元素的陰影垂直偏移值，可以為負值
第三個length：用於設定元素的陰影模糊值，不可以為負值
第四個length：用於設定元素的陰影外延值，不可以為負值，可以省略
color：用於設定陰影的顏色
inset：用於設定陰影為內陰影，可以省略，若省略則為外陰影
常用單位：px、em、rem
more-shadow是多個陰影的意思，需要用逗號隔開

border-radius 邊框圓角
border-radius: <length>;

• 第一個length：用於設定水平半徑，一共4個引數，引數數量可以是1個、2個、3個、4個
  • 若只有1個引數，那麼數值作用於4個角
  • 若只有2個引數，那麼第一個作用於上左、下右，第二個作用於上右、下左
  • 若只有3個引數，那麼第一個作用於上左，第二個作用於上右、下左，第三個作用於右下
  • 若有4個引數，那麼分別作用於上左、上右、下右、下左
  • 常用單位：px、em、rem、%
  • 第二個length：用於設定垂直半徑，可以省略，若省略，大小與水平半徑一致（一般都不會設定）

background-size 背景圖大小
background-size: auto | cover | contain | <length>;

預設值為auto
cover：設定背景影象等比縮放到完全覆蓋容器，背景影象可能超出容器（圖片顯示不全）
contain：將背景影象等比縮放到寬度或高度與容器的寬度或高度相等，背景影象始終被包含在容器內

linear-gradient 背景顏色線性漸變
linear-gradient(position,color1,color2,...);

• position：設定漸變的角度，以deg為單位。也可以設定預設的方向值（預設to bottom）
  • to bottom:從上至下
  • to left：從右至左
  • to right：從左至右
  • to top left：從右下至左上
  • to top right：從左下至右上
  • to bottom left：從右上至左下
  • to bottom right：從坐上至右下
• color1：起點顏色
• color2等等：中間以及終點顏色

漸變色參考網址

box-sizing 盒子模型
box-sizing: content-box | border-box | inherit;

content-box：預設值 盒子的實際佔位寬度 = 左右外邊距 + 左右邊框寬度 + 左右內邊距（填充寬度） + 內容寬度
border-box：盒子的寬度或高度等於元素內容的寬度或高度。（盒子的實際佔位寬度 = 左右外邊距 + width；盒子的實際佔位高度 = 上下外邊距 + height）
inherit: 此值使元素繼承父元素的盒子模型模式

transform 2D變換

translate 位移
scale 縮放
rotate 旋轉

transition 過渡效果

其是一個複合屬性：transition: [transition-property transition-duration transition-timing-function transition-delay]
transition-property 過渡屬性

可用逗號間隔選中多個，但如果多箇中有transform，則無效

transition-duration 過渡時間
transition-timing-function 過渡動畫函式

transition-delay 過渡延遲時間

正值：元素過渡效果不會立即觸發，當過了設定的時間值後才會被觸發
負值：元素過渡效果會從該時間點開始顯示，之前的動作被截斷（用的少，甚至不用）
0：預設值，元素過渡效果立即執行

animation 動畫

@keyframes IDENT {
    from {/*CSS樣式寫在這裡*/}
    percentage {/*CSS樣式寫在這裡*/}
    to {/*CSS樣式寫在這裡*/}
}

@keyframes IDENT {
    0% {/*CSS樣式寫在這裡*/}
    percentage {/*CSS樣式寫在這裡*/}
    100% {/*CSS樣式寫在這裡*/}
}

IDENT是一個動畫名稱，可以取一個任意定義的動畫名稱，當然語義化一點會更好，使用小寫，單詞之間使用-分割

animation 屬性

animation-name 動畫名稱
animation-duration 持續時間
animation-delay 延遲時間
animation-iteration-count 播放次數

animation-direction 播放方向

animation-play-state 設定動畫的狀態為執行/暫停（由CSS來控制）

animation-fill-mode 播放前後 動畫效果是否可見

animation-timing-function 設定動畫速度曲線

十一、高階選擇器

關係選擇器

E F 包含選擇器
E>F 包含選擇器
E+F 相鄰選擇器
E~F 兄弟選擇器

屬性選擇器

E[attr] 具有attr屬性的E元素
E[attr=val] attr屬性等於val的E元素
E[attr=val] attr屬性包含val的E元素*
E[attr^=val] attr屬性開頭為val的E元素
E[attr$=val] attr屬性結尾為val的E元素

偽類選擇器

** seleter:first-child 第一個子元素**
** seleter:last-child 最後一個子元素**
** seleter:nth-child(n) 第n個子元素**
** seleter:first-of-type 既是第一個子元素 又符合前面選擇器**
** seleter:last-of-type 既是最後一個元素 又符合前面選擇器**
** seleter:nth-of-type(n) 既是第n個子元素 又符合前面選擇器**

選擇器權重比較規則

第一等：代表內聯樣式，如: style=””，權值為1,0,0,0
第二等：代表ID選擇器，如：#content，權值為0,1,0,0
第三等：代表類，偽類和屬性選擇器，如.content，權值為0,0,1,0
第四等：代表元素和偽元素選擇器如div p，權值為0,0,0,1
萬用字元、子選擇器、相鄰選擇器等如*、>、+,權值為0,0,0,0
繼承的樣式沒有權值
!important為強制優先（破壞權重，慎用）

十二、字型圖示

其底層是一個字型，其內部不是英文或者中文，而是一個個小圖示
我們可以通過名稱，來獲取對應的圖示
因為其本質是字型，因此我們可以通過font-size控制大小、color控制顏色等
通常我們使用i標籤來實現字型圖示
常用的字型圖示FontAwesome地址