Mục đích của biểu tượng '@' trong CSS là gì?

Tôi chỉ vấp phải câu hỏi này và tôi nhận thấy người dùng đang sử dụng một số ký hiệu mà tôi chưa từng thấy trước đây:

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

Vì vậy, @biểu tượng này là một cái gì đó mới trong CSS3, hoặc một cái gì đó cũ mà tôi đã bỏ qua bằng cách nào đó? Đây có phải là một cái gì đó giống như nơi bạn sử dụng ID #và với một lớp bạn sử dụng .không? Google đã không cung cấp cho tôi bất kỳ bài viết hay liên quan đến điều này. Mục đích của @biểu tượng trong CSS là gì?

@đã xuất hiện từ thời @importCSS1, mặc dù nó được cho là ngày càng trở nên phổ biến trong các cấu trúc gần đây @media(CSS2, CSS3) và @font-face(CSS3). Các @cú pháp riêng của mình, tuy nhiên, như tôi đã đề cập, không phải là mới.

Tất cả đều được biết đến trong CSS dưới dạng quy tắc . Chúng là các hướng dẫn đặc biệt cho trình duyệt, không liên quan trực tiếp đến việc tạo kiểu (X) các phần tử HTML / XML trong tài liệu Web bằng các quy tắc và thuộc tính, mặc dù chúng đóng vai trò quan trọng trong việc kiểm soát cách áp dụng các kiểu.

Một số ví dụ mã:

/* 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-facequy tắc xác định phông chữ tùy chỉnh để sử dụng trong các thiết kế của bạn không phải lúc nào cũng có sẵn trên tất cả các máy tính, vì vậy trình duyệt tải xuống một phông chữ từ máy chủ và đặt văn bản trong phông chữ tùy chỉnh đó như thể máy tính của người dùng có phông chữ.

• @mediaquy tắc , kết hợp với truy vấn phương tiện (trước đây chỉ là loại phương tiện ), kiểm soát kiểu nào được áp dụng và kiểu nào không dựa trên phương tiện mà trang đang được hiển thị. Trong ví dụ mã của tôi, chỉ khi in tài liệu, tất cả văn bản mới được đặt trong màu đen trên nền trắng (tờ giấy). Bạn có thể sử dụng truy vấn phương tiện để lọc phương tiện in, thiết bị di động, v.v. và các trang kiểu khác nhau cho các trang đó.

Tại quy tắc không có liên quan đến bộ chọn nào. Do tính chất khác nhau của chúng, các quy tắc khác nhau được xác định theo các cách khác nhau trên nhiều mô-đun khác nhau. Ví dụ khác bao gồm:

• Quy tắc có điều kiện
• Hoạt hình khung hình
• Phương tiện phân trang

(danh sách này là không đầy đủ)

Bạn có thể tìm thấy một danh sách không đầy đủ khác tại MDN .

@ được sử dụng để xác định một quy tắc.

@import
@page
@media
@ font-face
@charset
@namespace

Ở trên được gọi là at-rules.

Một ví dụ về @media có thể hữu ích để minh họa thêm:

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

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

Điều này sẽ thay đổi kích thước của hình ảnh một cách có điều kiện theo kích thước của màn hình, sử dụng hình ảnh nhỏ hơn trên màn hình nhỏ hơn. Khối đầu tiên sẽ giải quyết các màn hình có chiều rộng lên tới 1440px; thứ hai sẽ giải quyết các màn hình lớn hơn 1440px.

Điều này rất hữu ích với những thứ như các tab thả nổi hoặc cuộn trên màn hình nhỏ hơn; bạn thường có thể thả kích thước phông chữ của nhãn tab xuống kích thước điểm trên màn hình nhỏ hơn và tất cả đều phù hợp.

@ được sử dụng như một đặc điểm kỹ thuật quy tắc. Giống@font-face

Kiểu CSS của ProBoards cũng sử dụng các biến này làm biến.

Đây là một snipptt nhỏ từ một trong các trang CSS của họ:

@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; }

LƯU Ý: không phải bản địa, xem bình luận đầu tiên.