CSS @規則

時間 2019-11-10

標籤 css 規則欄目 CSS 简体版

原文原文鏈接

最近在看極客時間winter大神的重學前端系列,遇到了許多不經常使用可是很重要的知識點.感受視野獲得了極大的開闊(打個廣告,哈哈).css

其中css @規則使人印象深入。簡單的作下筆記:html

@namespace前端

這個css規則仍是蠻重要的,MDN有相關介紹--https://developer.mozilla.org/en-US/docs/Web/CSS/@namespacecss3

@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/* 匹配全部的XHTML <a> 元素, 由於 XHTML 是默認無前綴命名空間 */
a {}

/* 匹配全部的 SVG <a> 元素 */
svg|a {}

/* 匹配 XHTML 和 SVG <a> 元素 */
*|a {}

說的簡單點就是:爲了分別給不一樣命名空間下的相同元素能夠分別設置樣式.瀏覽器

@mediasvg

想必是好多響應式設計都是藉助於這一規則。字體

它能夠針對不一樣媒體使用響應式,由於我麼多說媒體是手機、pad、computer.flex

它還有如下媒體類型動畫

連接地址爲以下:ui

https://www.runoob.com/cssref/css3-pr-mediaquery.html

@ support

檢測是否支持指定的CSS屬性.

例如：

  @supports (display:flex) {

    section { display: flex }
    ...
    }

若是瀏覽器支持「display:flex」屬性，那麼在「section」元素上就運用「display:flex」樣式.

@charset

@charset 用於提示 CSS 文件使用的字符編碼方式，它若是被使用，必須出如今最前面。這個規則只在給出語法解析階段前使用，並不影響頁面上的展現效果。

@import

@import 用於引入一個 CSS 文件，除了 @charset 規則不會被引入，@import 能夠引入另外一個文件的所有內容。

@import "mystyle.css";
@import url("mystyle.css")

一般此指令放在css文件其實位置;

@ counter-style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
 @counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}
ul {
   list-style: circled-alpha;
}
    </style>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>

    </ul>
</body>
</html>

代碼效果以下:

測了下谷歌、IE、360、火狐瀏覽器，只有火狐支持此規則。

@ key-frames

keyframes 產生一種數據，用於定義動畫關鍵幀。

@ fontface

fontface 用於定義一種字體，icon font 技術就是利用這個特性來實現的。

@font-face {
  font-family: Gentium;
  src: url(http://example.com/fonts/Gentium.woff);
}

p { font-family: Gentium, serif; }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。