CSS中'@'符號的用途是什麼？

Question

我只是碰到this question迷迷糊糊地我發現用戶正在使用一些符號我以前從未見過：

@font-face { 
    /* CSS HERE */ 
} 

因此，這是@象徵東西CSS3，或舊的東西新的，我已經在某種程度上忽略了？這有點像你使用#，其中有一個ID，並與一類使用.？谷歌沒有給我任何與此相關的好文章。在CSS中@符號的用途是什麼？

Answer 1

@已自的CSS1 @import的日子裏，雖然這可以說是越來越普遍在最近@media（CSS2，CSS3）和@font-face（CSS3）結構。不過，正如我所提到的那樣，語法本身並不是新的。

這些在CSS全稱爲在規則。他們是特殊說明的瀏覽器，沒有直接關係的樣式（X）HTML /使用規則和屬性，雖然他們控制的風格是如何應用中發揮重要作用的Web文檔的XML元素。

的某些代碼示例：

/* Import another stylesheet from within a stylesheet */ 
@import url(style2.css); 

/* Apply this style only for printing */ 
@media print { 
    body { 
     color: #000; 
     background: #fff; 
    } 
} 

/* Embed a custom web font */ 
@font-face { 
    font-family: 'DejaVu Sans'; 
    src: local('DejaVu Sans Regular'), url(/fonts/DejaVuSans.ttf); 
} 

• @font-face rules定義自定義字體的使用在設計中並不總是適用於所有電腦，所以瀏覽器從服務器下載的字體，並設置文本該自定義字體就好像用戶的計算機具有該字體一樣。

• @media rules，與media queries（以前只media types）一起，控制其樣式應用和不基於什麼媒體被顯示在頁面上。在我的代碼示例中，打印文檔，只有當所有應文本被設置爲黑色而不是白色（紙張）背景。您可以使用媒體查詢來過濾掉打印介質，移動設備等，以及樣式頁。

按規則與selectors什麼都沒有關係。由於它們性質不同，不同的規則在許多不同的模塊中以不同的方式定義。更多的例子包括：

• Conditional rules
• Keyframe animations
• Paged media

（這個列表遠未詳盡）

你可以找到MDN另一個非詳盡的清單。

Answer 2

@用於定義規則。

@import
@page
@media
@字體面
@charset
@namespace

上面被稱爲at-rule秒。

Answer 3

@用作規則說明。像@font-face

Answer 4

可能有用@media的實例以進一步說明它：

@media screen and (max-width: 1440px) 
{ 
    span.sizedImage 
    { 
     height:135px; 
     width: 174px; 
    } 
}  

@media screen and (min-width: 1441px) 
{ 
    span.sizedImage 
    { 
     height:150px; 
     width: 200px; 
    } 
} 

這將改變圖像的大小有條件地在屏幕的尺寸，在更小的使用更小的圖像屏幕。第一個模塊可以處理最大寬度爲1440px的屏幕;第二個將解決大於1440像素的屏幕。

這可以方便地使用諸如在較小屏幕上浮動拖放或滾動的選項卡;您可以經常在較小的屏幕上將標籤標籤的字體大小縮小到一定的尺寸，並讓它們都適合。

Answer 5

ProBoards CSS樣式也使用這些作爲變量。

這裏有一個小snipptt從他們的CSS頁面之一：

@wrapper_width: 980px; 
@link_color: #c06806; 
@link_font: 100% @default_forum_text_font_family; 
@link_decoration: none; 

#wrapper { width: @wrapper_width; margin: 0 auto; overflow-x: hidden; } 
table { table-layout: fixed; } 
a { cursor: pointer; color: @link_color; font: @link_font; text-decoration: @link_decoration; } 

注意：並不是本地人，看到第一條評論。