前端入門基礎知識大全（一）-CSS基礎（1）
阿新 • • 發佈：2018-12-20
個人學習筆記，僅供想入前端大門小夥伴學習
一、什麼是CSS
Cascading Style Sheets : 樣式表
CSS用於HTML元素的樣式的定義
能夠實現內容(HTML頁面元素) 與 表現(CSS展示效果)相分離
能夠提升程式碼的可重用性 和 可維護性
二、CSS 與 HTML 之間的關係
HTML 負責搭建網頁結構
CSS 負責頁面的樣式的設定
HTML元素屬性 與 CSS樣式 衝突時 使用原則 :
儘量使用 CSS 樣式 來取代 HTML 屬性
三、使用CSS樣式表的三種方式
1、內聯方式
又稱為 行內樣式 或 行內方式
2、內部樣式表
將樣式內容定義在網頁的 <head> 中
3、外部樣式表
將樣式內容定義在外部的 CSS 檔案中(***.css)
在HTML頁面中引入 ***.css 去使用樣式內容
四、CSS樣式表特徵
1、繼承性
大部分的樣式屬性是可以被繼承的
即在父元素中定義好的樣式 可以直接被子元素使用
2、層疊性
允許為一個元素定義多個樣式規則，如果樣式規則中的樣式屬性不衝突的時候，他們則都可以被應用到元素上
3、優先順序
在層疊性基礎上，如果樣式屬性宣告衝突時，會按照不同使用方式的優先順序來應用樣式 低 ：瀏覽器預設設定 中 ：內部樣式表 和 外部樣式表 就近原則 - 後定義者優先 高 ：內聯樣式 最高：!important 顯示調整 樣式的優先順序 屬性名稱:值 !important;
五、CSS基礎選擇器
1、選擇器的作用
規範了頁面中哪些元素能夠使用宣告好的樣式
選擇器是為了匹配頁面上的元素的
2、選擇器詳解
1、通用選擇器
作用：為了匹配頁面中所有的元素 語法：* { … }
ex:想設定頁面中所有的文字的大小為12px
方案1：
*{
font-size:12px;
}
方案2：
body{
font-size:12px;
}
在網頁中，推薦使用方案2的繼承性來取代 通用選擇器
2、元素選擇器
作用：使用元素名稱來充當選擇器，目的是為了匹配頁面中指定元素名稱的所有標記 語法：元素名稱 { … }
div{ ... } p{ ... } ul{ ... }
3、類選擇器(重點)
作用：定義好之後，允許被任意元素的 class 屬性進行引用的選擇器
1、基本類選擇器
語法：.類名{ … } 引用類選擇器：
<ANY class="類名">
類名規範： 1、字母，數字，_,-組成 2、不能以數字開頭
<style>
.important{
font-size:24px;
color:red;
}
</style>
<div class="important">
引用了 important 的元素
</div>
2、多類選擇器的引用方式：
允許讓一個元素同時引用多個類選擇器 多個類選擇器之間，使用 空格 隔開即可
<ANY class="類1 類2 類3">
3、分類選擇器的定義方式：
分類選擇器，允許將類選擇器和元素選擇器結合起來使用，從而實現對某種元素中不同樣式的細分控制
元素選擇器.類選擇器{ ... }
div.important{ color:green; }
以上選擇器匹配的是頁面中 class屬性值為 important 的 div 元素
<div class="important"></div>
4、ID選擇器
作用：為了匹配頁面中指定ID值的元素 語法：#IDValue{ … }
<div id="main"></div>
<style>
#main{ ... }
</style>
5、群組選擇器
作用：選擇器的宣告，是一個以 , 隔開的選擇器列表，為了定義多個選擇器中的公共樣式 語法： 選擇器1,選擇器2,選擇器3{ … … } *
#main,div.redColor,.important,.red{
color:red;
}
等同於
#main{color:red;}
div.redColor{color:red;}
.important{color:red;}
.red{color:red;}
6、後代選擇器
後代：只要具備層級關係的元素，被巢狀的都可以被稱之為 後代 語法：選擇器1 選擇器2{ … }
1、div span{ }
匹配 所有div 中的 span 元素
2、#main span{ ... }
匹配 id為main的元素中的 所有 span元素
3、#main div.left-side{ ... }
匹配 id為mian 的元素中 class為left-side 的div元素
<div id="main">
<div class="left-side"></div>
</div>
7、子代選擇器
子代：在層級元素中，只具備一層層級關係，被巢狀的元素稱之為 子代元素 語法：選擇器1>選擇器2{}
<div>
<p>
<span></span>
</p>
</div>
p 是div的 子代元素 span 是p的 子代元素 span 是div的 後代元素
<div>
<span>div中的span</span>
<p>
<span>div 中的 p 中的 span</span>
</p>
</div>
8、偽類選擇器
作用：為了匹配頁面元素不同的"狀態" 語法： :偽類{ … } 選擇器:偽類{}
偽類選擇器的分類：
1、連結偽類
1、:link , 匹配未被訪問的超連結的狀態
2、:visited,匹配訪問過的超連結的狀態
2、動態偽類
1、:hover,匹配滑鼠懸停在元素上的狀態
2、:active,匹配元素被啟用時的狀態
3、:focus,匹配元素獲取焦點時的狀態
3、目標偽類
4、結構偽類
5、否定偽類
六、尺寸 與 邊框
1、CSS單位
1.1、尺寸單位
1、px (pixel)
2、% ：相對單位
3、pt ：磅(point)
多數用於描述 文字大小 1pt = 1/72 in
4、in ：英寸(inch)
1in=2.54cm
5、cm ：釐米
6、mm ：毫米
7、em ：字型大小，使用父元素字型大小的倍數
#main{ font-size:2em; }
8、rem ：字型大小,使用html根元素字型大小的倍數
#main{ font-size:2rem; }
1.2、顏色單位
1、rgb(r,g,b)
r:red (0~255)
g:green (0~255)
b:blue (0~255)
ex:
color:rgb(112,76,98);
2、rgb(r%,g%,b%)
3、rgba(r,g,b,alpha);
alpha:透明度 0~1 之間的數字
0 : 完全透明
1 : 完全不透明
4、#rrggbb
由6位十六進位制的數字來組成的顏色
十六進位制：0~9 A~F 組成
#123456;
#654321;
#aabbcc;
#e4393c;
5、#rgb
#rgb 是 #rrggbb的縮寫
#rrggbb每兩位數字都相同的情況下，可以使用#rgb的方式取代
#112233 -> #123;
#ff0000 -> #f00
6、表示顏色的英文單詞
red,green,blue,yellow,pink,purple,
2、尺寸屬性
2.1、頁面元素的預設尺寸
塊級：
寬度：佔父元素寬度的 100%
高度：以內容為準
行內：
寬度：以內容為準
高度：以內容為準
2.2、尺寸屬性
1、寬度
width
min-width
max-width
2、高度
height
min-height
max-height
2.3、在HTML中，允許設定尺寸屬性的元素
1、所有的塊級元素 全部都可以設定
2、行內塊中的大部分元素可以設定
除 radio 和 checkbox 以外的行內塊元素
3、HTML元素本身就具備 width 和 height屬性的可以設定尺寸，其餘則不可以
<img> 可以設定尺寸
<table> 可以設定尺寸
特殊：除<img>以外的其它行內元素時不允許設定尺寸的
2.4、溢位
2.4.1、什麼是溢位
使用尺寸屬性設定元素大小時，如果內容所需要的空間大於元素空間大小時，則會產生溢位的效果
2.4.2、溢位處理屬性
屬性：
overflow
overflow-x
overflow-y
取值：
1、visible
預設值，溢位可見
2、hidden
隱藏
3、scroll
顯示滾動條，但是溢位時可用
4、auto
3、邊框屬性
3.1、簡寫方式屬性
通過一個屬性 將元素的四個方向的邊框的所有的操作一起設定 語法：
border:width style color;
width:邊框寬度，以px為單位
style:邊框樣式
solid:實線
dotted:虛線(.......)
dashed:虛線(-------)
color:邊框顏色
可以取值為 transparent(透明)
border 可以
取值為 none 或 0;
3.2、單邊定義
只單獨設定某一條邊的寬度，樣式，顏色
屬性：border-方向:width style color;
方向：top / right / bottom / left
ex:
1、border-left:2px dotted red;
2、border-bottom:1px dashed blue;
特殊：border-方向:none / 0;
3.3、單屬性設定
設定四個方向邊框的某一具體屬性值
屬性：border-屬性:值;
屬性：width / style / color
3.4、單邊單屬性設定
設定某個方向的邊框的某一具體屬性
屬性：border-方向-屬性:值;
ex:
1、border-top-color:blue;
2、border-left-style:dotted;
4、邊框倒角屬性
屬性：
border-radius
取值：
以px為單位的數值 或 %
單角屬性：
border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius:
ex:
1、border-radius:5px;
2、border-radius:50%;
將矩形元素變為圓形(正圓，橢圓)
3、border-radius:5px 10px 15px 20px;
左上角倒角半徑：5px
右上角倒角半徑：10px
右下角倒角半徑：15px
左下角倒角半徑：20px
5、邊框陰影屬性
屬性：box-shadow
取值：
h-shadow v-shadow blur spread color inset
h-shadow:陰影的水平偏移距離，取值為正，陰影向右偏移，取值為負，陰影向左偏移
v-shadow:陰影的垂直偏移距離，取值為正，陰影向下偏移，取值為負，陰影向上偏移
blur:可選，陰影的模糊大小
spread:可選，陰影的大小
color:可選，顏色
inset:可選，將預設的外陰影改為內陰影
6、輪廓屬性
輪廓：繪製與元素邊框外圍的一條線
屬性：outline
取值：width style color;
outline-widht:
outline-style:
outline-color:
輪廓的常用方式：
outline:none / 0;
七、框模型
1、什麼是框模型
框：頁面元素皆為框
框模型：Box Model 定義了元素處理(計算)尺寸，邊框，內邊距 和 外邊距的 一種方式
有框模型的屬性介入到元素中的時候，元素實際佔地面積就會發生改變
元素實際佔地寬度=左右外邊距+左右邊框+左右內邊距 + width;
元素實際佔地高度=上下外邊距+上下邊框+上下內邊距 + height;
2、外邊距
2.1、什麼是外邊距
圍繞在元素邊框周圍的空白區域就是外邊距
外邊距也是體現兩個元素之間距離的一種表現方式
2.2、語法
2.2.1、屬性
margin:設定四個方向的外邊距值;
margin-top/right/bottom/left:設定單一方向外邊距值;
2.2.2、取值
1 、取值為 px 的具體值
2、%
3、auto
自動，自動計算左右外邊距的值，前提要求元素必須有寬度
4、負數
目的是為了移動元素
margin-top 設定資料為正數時，元素向下移動
margin-left 設定資料為正數時，元素向右移動
margin-top 設定資料為負數時，元素向上移動
margin-left 設定資料為負數時，元素向左移動
5、margin 的簡寫方式
1、margin:value;
四個方向外邊距是相同的
2、margin:v1 v2;
v1:上下外邊距
v2:左右外邊距
ex:
margin:0 auto;
3、margin:v1 v2 v3;
v1:上外邊距
v2:左右外邊距
v3:下外邊距
4、margin:v1 v2 v3 v4;
上 右 下 左
2.2.3、頁面中具備預設外邊距的元素
在頁面中
body,p,h1,h2,h3,h4,h5,h6,ol,ul,dl,dd,pre
以上元素會具備預設的外邊距
在網頁開發中，通常會通過 CSS Reset(重寫)的方式，將預設的外邊距全部都設定為0
2.2.4、外邊距的特殊效果
1、外邊距的合併
當兩個垂直外邊距相遇時，他們將合併成一個，取兩者間較大的值，作為他們的外邊距
2、外邊距的溢位
在某些特殊的條件下，為子元素設定外邊距時，會作用到父元素上
特殊條件：
1、父元素不能有上邊框
2、為第一個子元素設定上外邊距時
解決方案：
1、為父元素增加上邊框即可
弊端：父元素的高度會發生改變
2、為父元素設定上內邊距來取代子元素的上外邊距
弊端：父元素的高度會發生改變
3、在子元素之上再增加一個空<table></table>
弊端：在頁面上會多一個空子元素
4、... ...
3、為行內元素 和 行內塊元素設定垂直外邊距時
1、行內元素
對垂直外邊距，無效，img 除外
2、行內塊元素
整行元素都跟著發生改變
3、內邊距
3.1、什麼是內邊距
內容區域 與 邊框(邊緣)之間的空間
注意：內邊距會擴大元素邊框的佔用區域
3.2、語法
1、屬性
padding:值;
padding-top/right/bottom/left:值;
2、取值
1、為 px 具體值
2、為 % 的相對資料
3、簡便寫法
1、padding:value;
四個方向外邊距相同
2、padding:v1 v2
上下 左右
3、padding:v1 v2 v3;
上 左右 下
4、padding:v1 v2 v3 v4;
上 右 下 左
3.3、特殊效果
1、為行內元素 和 行內塊 元素設定垂直內邊距時
只會影響自己，並不會影響其它元素
3.4、box-sizing
頁面中 元素邊框內 的尺寸計算方式 元素邊框內寬度=左右邊框+左右內邊距+width
div{
width:400px;
border:2px solid red;
border-left-widt:17px;
padding-left:32px;
padding-right:16px;
}
屬性：box-sizing
作用：重新指定元素框模型的計算模式
取值：
1、content-box
預設值，採用預設的計算模式
元素邊框內寬度=左右邊框+左右內邊距+width
元素邊框內高度=上下邊框+上下內邊距+height
2、border-box
新計算模式，會將元素的border以及padding算在 width 和 height 之中
4、背景屬性
4.1、背景顏色
屬性：background-color
取值：
合法顏色值 或 transparent
注意：
1、背景色會填充到元素的內容，內邊距，以及邊框上的
2、如果邊框為透明色，則邊框位置處顯示的顏色與背景色一致
4.2、背景影象
屬性：background-image
取值：url(影象URL)
注意：
1、背景圖是從元素的左上方出現的
2、如果背景的尺寸大於元素的尺寸的話，那麼落在元素內的圖片是可見的，元素外的圖是不可見的
3、如果元素的尺寸大於背景圖的尺寸，預設是以平鋪(重複)的方式出現的
4.3、背景影象重複
屬性：background-repeat
取值：
1、repeat
在垂直和水平方向都平鋪,預設值
2、repeat-x
僅在水平方向平鋪
3、repeat-y
僅在垂直方向平鋪
4、no-repeat
不平鋪
4.4、背景圖片尺寸
屬性：background-size
取值：
1、width height
2、width% height%
3、cover
覆蓋，將背景圖等比放大，直到背景圖能覆蓋到當前元素的所有區域為止
4、contain
包含，將背景圖等比放大，直到背景圖的右邊或下邊碰到元素邊緣為止
4.5、背景圖片固定
屬性： background-attachment
取值：
1、scroll
預設值，背景圖會隨著滾動條而滾動
2、fixed
固定,背景圖不會隨著滾動條的滾動而改變位置
4.6、背景圖片定位/位置
作用：改變背景影象在元素中的預設位置
屬性：background-position
取值：
1、x y
x ：背景影象水平偏移距離，取值為正，背景圖向右偏移，取值為負，背景圖向左偏移
y ：背景影象垂直偏移距離，取值為正，背景圖向下偏移，取值為負，背景圖向上偏移
2、x% y%
背景圖在元素的大體的哪個位置處
3、關鍵字
x : left / center / right
y : top / center / bottom
CSS Sprites
雪碧圖，精靈圖
將若干幅小圖片拼合一幅大圖片中的實現方式
4.7、背景屬性
屬性：background
取值：color url() repeat attachment position
ex:
1、background:red;
2、background:url(a.jpg) -10px 125px;