CSS層疊樣式表
三大特性
層疊性：相同的樣式會覆蓋
繼承性：屬性可向下繼承
優先順序：範圍越小權重越高
選擇器
基礎選擇器
標籤選擇器
1 body {
2 color:#fff;
3 }
類選擇器
1 .people‐first {
2 color:green;
3 }
id選擇器
1 #laowang {
2 color:yello;
3 }
萬用字元選擇器
* {
2 margin: 0 ;
3 padding: 0 ;
4 }
高階選擇器
後代選擇器
1 ul li {
2 list‐style;none;
3 }
子選擇器
1 h3>a {
2 line‐height:36px;
3 }
並集選擇器
1 div,
2 p {
3 font‐size:14px;
4 }
偽類選擇器
1 a::hover {
2 background‐color:springgreen;
3 }
a::link
a::visited
a::hover
a::active
input::focus
相鄰兄弟選擇器
h1 + p {
margin-top:50px
}
font屬性
1 font‐style:italic;
2 font‐weight: 400 ;
3 font‐size:16px;
4 font‐family:"Microsoft Yahei";
5 font:italic 400 16px "Microsoft Yahei";
字型圖示的下載與使用
text屬性
1 color:pink;
2 text‐align:center;
3 text‐decoration:none;
4 text‐indent:2em;
5 line‐height:26px;
塊元素
例如h p div ul li
- 獨佔一行
- 寬 高 內外邊距 可控
- 寬度預設繼承
- 主要作為容器
行內元素
例如 a strong b em
- 一行可以是多個
- 寬高無法設定
- 預設寬度為自身寬度
- 很內元素只能容納文字或其他行內元素
注：連線標籤裡不能放連結
注：連結裡可放塊級元素，但最好把a轉換成塊級元素安全
行內塊元素
例如 img input td
- 可以一行多個（有縫隙）
- 可以設定寬高
- 寬度為預設
- 元素顯示模式轉換
1 display:block;
2 display:inline;
3 display:inline‐block;
background背景
1 background‐color:transparent;
2 background‐img:url(./xx);
3 background‐repeat:repeat | no‐repeat | repeat‐x | repeat‐y;
4 background‐position:center center;
5 background‐attachment:scroll | fixed;
6 background:pink url(./) no‐repeat fixed center top;
1 background‐size:500px 200px;//cover等比完全覆蓋，contain等比寬高覆蓋
精靈圖的具體操作與使用
盒子模型
border or margin
1 border‐width:5px;
2 border‐style:solid; // dashed(虛線) dotted(點線)
3 border‐color:black;
4
5 border:5px solid black;
1 margin:0 auto;//可使盒子水平居中
2 margin‐left:‐1px;//用於消除緊挨著的邊框
border-collapse
border-collapse: collapse;
border collapse 屬性設定表格的邊框是否被合併為一個單一的邊框，還是象在標準的
HTML 中那樣分開顯示。
圓角邊框
1 border‐radius:10px;
2 border‐radius:1px 2px 3px 4px;//右上角開始
3 border‐top‐left‐radius:...;
盒子陰影
1 box‐shadow: 10px 10px 5px ‐5px rgba(0,0,0,.3);
2 水平陰影 垂直陰影 [模糊 尺寸 顏色 外部或內部]
文字陰影
1 text‐shadow:10px 10px 5px rgba(0,0,0,.3);
float浮動
1 float:left;
浮動特性：
-
脫離標準流
-
一行顯示，頂部對齊
-
具備行內塊的特性
清除浮動
1 . 額外標籤法
1 <div>
2 <div>盒子</div>
3 <div class="clearfix"></div>
4 </div>
1 .clearfix {
2 clear: both;
3 }
2 . 父級新增overflow
1 <div class="clearfix">
2 <div>盒子</div>
3 </div>
1 .clearfix {
2 overflow:hidden;
3 }
3 . :after偽元素
1 <div class="clearfix">
2 <div>盒子</div>
3 </div>
1 .clearfix::after {
2 content: "";
3 display: block;
4 height: 0 ;
5 clear: both;
6 visibility: hidden;
7 }
8
9 .clearfix {
10 *zoom: 1 ;
11 }
4 . 雙偽元素清楚浮動
1 <div class="clearfix">
2 <div>盒子</div>
3 </div>
1 .clearfix:before,
2 .clearfix::after {
3 content: "";
4 display: table;
5 }
6
7 .clearfix::after {
8 clear: both;
9 }
10
11 .clearfix {
12 *zoom: 1 ;
13 }
定位
靜態定位（瞭解）
1 position:static;
相對定位
1 position:relative;
絕對定位
1 position:absolute;
固定定位
1 position:fixed;
粘性定位（瞭解）
1 position:stycky;
邊偏移
top
bottom
left
right
優先順序
1 z‐index:2;
元素顯示與隱藏
顯示模式
1 display:block | inline | none ;
2 塊級 行內 無
可視能力
1 visibility:inherit | visible | hidden;
2 繼承 可視 隱藏
溢位部分
1 overflow:visible | hidden | scroll | auto;
2 不剪下,不加滾動條 隱藏 滾動條 自動
使用者介面樣式
滑鼠樣式
1 cursor:default;
1 cursor:pointer;
1 cursor:move;
1 cursor:text;
1 cursor:not‐allowed;
表單樣式
1 input {
2 outline:none;
3 }
文字域樣式
1 textarea {
2 resize:none;
3 }
對齊方式
1 vertical‐align:baseline | top | bottom | middle;
2 基線對齊 頂線 底線 中線
圖片採用基線對齊後，底部有白色縫隙
文字省略
單行文字溢位顯示省略號必須滿足三個條件
1 white‐space:nowrap;
2 overflow:hidden;
3 text‐overflow:ellipis;
CSS3新增特性
選擇器
屬性選擇器
選擇具有value的input
1 input[value]{}
選擇value="text"的input
1 input[value="text"]{}
選擇icon開頭的div
1 div[class^=icon]{}
選擇data結尾的div
1 div[class$=data]{}
選擇含有iii的div
1 div[class*="iii"]{}
結構偽類選擇器
1 :first‐child{}
2 :last‐child{}
3 :nth‐child(n){}//n可為數字 1 ， 2 ， 3 關鍵字even 偶數，odd奇數
1 :first‐of‐type
2 :last‐of‐type
3 :nth‐of‐type(on)
偽元素選擇器
1 div::before{
2 content="";
3 }
4 div::after{
5 content="";
6 }
C3盒子模型
1 box‐sizing:conten‐box;//傳統盒子模型
2 box‐sizing:border‐box;//邊框不佔用大小，而是擠壓內容
濾鏡
1 filter:blur(5px);//進行布林模糊
其他
1 width:calc(100%‐800px);
過渡
1 transition:all 1s;//所選屬性 花費時間 運動曲線 何時開始
轉換
1 transform:translate(100px,‐50px);//純移動，保留源
2 transform:rotate(45deg);//順時針旋轉45°
3 transform:scale(2,2);//長和寬變為原來的 2 倍
4
5 transform:translate() rotate() scale();//簡寫
3D轉換
1 transform‐style:flat | preserve;//開啟3D空間（預設不開啟）
2 prespective:500px;//開啟透視 設定透視高度
3
4 transform:translate3d(x,y,x);//3d移動
動畫
1 animation‐name:動畫名稱;
2 animation‐duration:3s;//動畫時間
3 animation‐timing‐function:ease;//運動曲線
4 animation‐delay:5s;//五秒之後開始
5 animation‐iteration‐count:ifinite;//重複次數 無限
6 animation‐direction:alternate;//逆向
7 animation‐fill‐mode:forwards;//保持
8
9 animation:動畫名稱 動畫時間 [速度曲線 何時開始 播放次數 是否反向 結束狀態];
標準viewport視口設定
1 <meta name="viewport"
2 content="width=device‐width,
3 initial‐scale=1.0,
4 user‐scalable=no,
5 maximum‐scale=1.0,
6 minimum‐scale=1.0">
流式佈局（百分）
寬度為百分比
flex佈局
1 display:flex;
設定主軸方向
1 flex‐direction: row;
2 row‐reverse//右到左
3 column//上到下
4 column‐reverse//下到上
設定主軸的子元素排列方式
1 justify‐content:flex‐start;// 左對齊（預設）
2 flex‐end 右對齊
3 center 居中
4 space‐around 平均分配
5 space‐between 先兩側貼邊然後平均分
設定子元素是否換行
1 flex‐wrap:nowrap;//不換行（預設）
2 wrap;//換行
設定側軸上的子元素排列方式（單行）
1 align‐items:flex‐start;// 左對齊
2 flex‐end 右對齊
3 center 居中
4 stretch 拉伸（預設值）
設定側軸上的子元素排列方式（多行）
1 align‐content:flex‐start;// 左對齊
2 flex‐end 右對齊
3 center 居中
4 space‐around 平均分配
5 space‐between 先兩側貼邊然後平均分
6 stretch 拉伸（預設值）
flex子屬性
1 flex:50%;
2 align‐self:flex‐start;子項在側軸的排列方式（瞭解）
rem適配佈局
em 父級字型大小
rem HTML字型大小
媒體查詢
1 @media screen and (min‐width:500px){ //如果螢幕大於等於500px
2 html{
3 font‐size:14px;
4 }
5 }
less
1 @color1: skyblue;
2 @font14: 14px;
3 body{
4 background‐color:@color1;
5 font‐size:@font14;
6 a{
7 text‐decration:none;
8 &:hover{
9 background‐color:@color1;
10 font‐size:14px+16;
11 }
12 }
13 }
14 @import"common"//多個less合併在一起共同生成一份css檔案