CSS @ 符號

CSS程式碼中經常會有@命令的應用，且功能多樣。

語法結構基本是一致的，@後面緊跟一個關鍵字，用於規定各自的功能。

本文對常見的@用法進行一下總結羅列，需要的朋友可以做一下對比參考。

不會對每一個具體命令做詳細介紹，更多內容可以參閱對應的文章。

一.@keyframes：

用來規定CSS3動畫的關鍵幀，可以對動畫進行更為詳細的控制。

下面你是一段簡單的程式碼片段：

[CSS] 純文字檢視 複製程式碼
@keyframes pulse {
  0% {
      background-color: #001f3f;
  }
  100% {
    background-color: #ff4136;
  }
}

更多關於@keyframes用法可以參閱CSS3 @keyframes一章節。

二.@import：

此命令可以引入一個外部CSS檔案，看一個程式碼片段：

[CSS] 純文字檢視 複製程式碼
@import 'global.css';

功能上與使用<link>標籤引入外部CSS檔案比較類似，但是區別也是很大的。

特別說明：實際應用中，不推薦使用此方式引入外部CSS檔案。

關於@import具體用法參閱CSS @import一章節。

三.@media：

當前市場上顯示終端多種多樣，大小不一。

為了能夠讓一套程式碼比較完美的應用於各種終端，則需要根據不同的終端，制定出不同的規則。

@media命令可以為不同的螢幕尺寸規定對應的樣式，簡單程式碼如下：

[CSS] 純文字檢視 複製程式碼
@media screen and (min-width:900px){
  .wrapper{width: 980px;}
}

上述程式碼規定，當前螢幕尺寸大於或者等於900px的時候，應用其中的樣式類.wrapper{width: 980px;}。

關於此命令的具體用法可以參閱CSS3 媒體查詢一章節。

四.@page：

此命令用於列印，可以為將要列印的頁面定義單獨的樣式。

尤其是，它能為頁面偽元素設定外邊距：:first、:left和:right

簡單程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
@page :first {
  margin: 1in;
}

五.@supports：

此命令可能很多朋友比較陌生，CSS3新增。

從其名稱可以有理由猜測，它的功能是檢測支援度有關。

事實也是如此，它可以檢測當前瀏覽器是否支援某個特性，由於它自身存在較大瀏覽器支援問題。

所以當前應用還不夠廣泛，也許會在將來得到廣泛應用，程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
/* Check one supported condition */
@supports (display: flex) {
  .module { display: flex; }
}
/* Check multiple conditions */
@supports (display: flex) and (-webkit-appearance: checkbox) {
  .module { display: flex; }
}

上述程式碼會可以檢測當前瀏覽器知否支援彈性佈局或者-webkit-appearance屬性。

關於@supports的用法可以參閱CSS3 @supports一章節。

五.@font-face：

當前頁面所呈現的字型，必須有字型庫支援。

本機所自帶預設的字型庫可能無法滿足需求，那麼就需要自定義字型庫。

通過@font-face可以在頁面載入自定義字型，簡單程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

關於@font-face更多內容參閱@font-face的用法一章節。

六.@charset：

對於此命令大家可能都不會陌生，經常會在CSS檔案的首行見到它。

它可以定義瀏覽器使用的字符集，HTTP頭部的字符集將會覆蓋@charset規則。

簡單程式碼演示如下：

[CSS] 純文字檢視 複製程式碼
@charset "UTF-8";

上數數程式碼放置於CSS檔案的頂部即可。

當然還有其他@的應用，由於使用頻率較低，或者說一輩子都可能遇不到。

本文就不再介紹，感興趣的朋友可以查閱網上的其他文件，也歡迎朋友在文章底部留言反饋。