淺談css3

DeronTan發表於2017-10-25
CSSS3

css3

1.CSS3的選擇器

1）E:last-child 匹配父元素的最後一個子元素E。
2）E:nth-child(n)匹配父元素的第n個子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒數第n個子元素E。

2. @Font-face 特性

Font-face 可以用來載入字型樣式，而且它還能夠載入伺服器端的字型檔案，讓客戶端顯示客戶端所沒有安裝的字型。

   @font-face {   
    font-family: BorderWeb;   
    src:url(BORDERW0.eot);   
    }   
    @font-face {   
    font-family: Runic;   
    src:url(RUNICMT0.eot);   
    }   
    .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }   
    .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }複製程式碼

淘寶網字型使用

@font-face {  
        font-family: iconfont;  
        src: url(//at.alicdn.com/t/font_1465189805_4518812.eot);                
}複製程式碼

3. 圓角

border-radius: 15px;

4. 多列布局 （multi-column layout）

多列布局的幾個重要屬性來設定多列布局的樣式 但是多列布局有相容性問題 所以不建議使用
5.陰影（Shadow）
box-shadow: 10px 10px 5px #888888;
6.css彈性盒子模型
父級定義

father { display: box; }複製程式碼

似乎也可以是：

father { display: inline-box; }複製程式碼

後，即為允許子級元素按盒模型分配空間
子級元素可以這樣分配資源

first_boy { box-flex: 2; }
second_boy { box-flex: 1; }
three_boy { box-flex: 1; }複製程式碼

也可以這樣

first_boy { box-flex: 2; }
second_boy { box-flex: 1; }
three_boy { width：300px；}複製程式碼

7. CSS3製作特效

1) Transition 物件變換時的過渡效果

  • transition-property 物件參與過渡的屬性
  • transition-duration 過渡的持續時間
  • transition-timing-function 過渡的型別
  • transition-delay 延遲過渡的時間

2) Transforms 2D轉換效果
主要包括 translate（水平移動）、rotate（旋轉）、scale（伸縮）、skew（傾斜）
3) Animation動畫特效

transforms與animation的區別：

其實可以將animation理解為有好多幀的動畫，而transform是隻有兩個幀的特殊的animation

BFC塊原理（塊級格式上下文）

Box是CSS佈局的物件和基本單位， 直觀點來說，就是一個頁面是由很多個Box(即boxes)組成的。元素的型別和display屬性，決定了這個Box的型別。 不同型別的Box， 會參與不同的Formatting context(一個決定如何渲染文件的容器)，因此Box內的元素會以不同的方式渲染。常見的盒子型別block-level box: display屬性為block, list-item, table的元素，會生成block-level box。並且參與block fomatting context。 inline-level box: display屬性為inline, inline-block, inline-table的元素，會生成inline-level box。並且參與inline formatting context。
　　這裡我們也通俗的理解一下：
　　BFC就是“塊級格式化上下文”的意思，建立了 BFC的元素就是一個獨立的盒子，不過只有Block-level box可以參與建立BFC， 它規定了內部的Block-level Box如何佈局，並且與這個獨立盒子裡的佈局不受外部影響，當然它也不會影響到外面的元素。

less是如何寫css檔案的：

客戶端
我們可以直接在客戶端使用 .less（LESS 原始檔），只需要從 lesscss.org下載 less.js 檔案，然後在我們需要引入 LESS 原始檔的 HTML 中加入如下程式碼：

<link rel="stylesheet/less" type="text/css" href="styles.less">複製程式碼

LESS 原始檔的引入方式與標準 CSS 檔案引入方式一樣：

<link rel="stylesheet/less" type="text/css" href="styles.less">複製程式碼

需要注意的是：在引入 .less 檔案時，rel 屬性要設定為“stylesheet/less”。還有更重要的一點需要注意的是：LESS 原始檔一定要在 less.js 引入之前引入，這樣才能保證 LESS 原始檔正確編譯解析。

伺服器端

@import “variables.less”;複製程式碼

.less 檔案也可以省略字尾名，像這樣：

@import “variables”;複製程式碼

引入 CSS 同 LESS 檔案一樣，只是 .css 字尾名不能省略。

變數
LESS 允許開發者自定義變數，變數可以在全域性樣式中使用，變數使得樣式修改起來更加簡單。

@border-color : #b5bcc7; 

.mythemes tableBorder{ 
  border : 1px solid @border-color; 
}複製程式碼

LESS 中的變數和其他程式語言一樣，可以實現值的複用，同樣它也有生命週期，也就是 Scope（變數範圍，開發人員慣稱之為作用域），簡單的講就是區域性變數還是全域性變數的概念，查詢變數的順序是先在區域性定義中找，如果找不到，則查詢上級定義，直至全域性。下面我們通過一個簡單的例子來解釋 Scope。
清單 5. LESS 檔案

@width : 20px; 
#homeDiv { 
 @width : 30px; 
 #centerDiv{ 
 width : @width;// 此處應該取最近定義的變數 width 的值 30px 
 } 
} 
#leftDiv { 
 width : @width; // 此處應該取最上面定義的變數 width 的值 20px 

}複製程式碼

經過編譯生成的 CSS 檔案如下：
清單 6. CSS 檔案

#homeDiv #centerDiv { 
 width: 30px; 
} 
#leftDiv { 
 width: 20px; 
}複製程式碼

繼承
less也有繼承方法，這樣可以我們的css也可以像js檔案一樣避免程式碼的冗餘，更高效的開發。

巢狀的規則
在我們書寫標準 CSS 的時候，遇到多層的元素巢狀這種情況時，我們要麼採用從外到內的選擇器巢狀定義，要麼採用給特定元素加 CLASS 或 ID 的方式。在 LESS 中我們可以這樣寫：
清單 16. HTML 片段

<div id="home"> 
<div id="top">top</div> 
<div id="center"> 
<div id="left">left</div> 
<div id="right">right</div> 
</div> 
</div>複製程式碼

清單 17. LESS 檔案

#home{ 
  color : blue; 
  width : 600px; 
  height : 500px; 
  border:outset; 
  #top{ 
       border:outset; 
       width : 90%; 
  } 
  #center{ 
       border:outset; 
       height : 300px; 
       width : 90%; 
       #left{ 
         border:outset; 
         float : left; 
 width : 40%; 
       } 
       #right{ 
         border:outset; 
         float : left; 
 width : 40%; 
       } 
   } 
}複製程式碼

相關文章