中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS中@規則的用法有哪些

發布時間:2021-09-15 09:24:31 來源:億速云 閱讀:112 作者:柒染 欄目:web開發

CSS中@規則的用法有哪些,很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。

at-rule是一個聲明,為CSS提供執行或怎么表現的指令。每個聲明以@開頭,后緊跟一個可用的關鍵字,這個關鍵字充當一個標識符,用于表示CSS該做什么。這是一個通用的語法,盡管每個at-rule有其它語法變體。
常規規則

常規規則遵循下面的語法:

代碼如下:

@[KEYWORD] (RULE);

@charset
這個規則定義了瀏覽器使用的字符集,如果樣式表包含非ASCII characters (e.g:UTF-8)。注意,被放在HTTP頭部的字符集將會覆蓋@charset規則

       

代碼如下:

@charset "UTF-8";

@import
這個規則指示請求樣式表,在這一行,如果內容是正確的,就會引入一個外部的CSS文件。

       

代碼如下:

@import 'global.css';

雖然流行的CSS預處理器都支持@import,但是應該指出的是,它們的工作原理不同于原生的CSS:預處理器會抓取CSS文件并將它們處理成一個CSS文件,對原生CSS,每一個@import都是一個獨立的HTPP請求。
@namespace
對于將CSS應用在XML HTML(XHTML),這個規則是非常有用的,因為XHTML元素能在CSS中被作為一個選擇器使用。

       

代碼如下:

/* Namespace for XHTML */
        @namespace url(http://www.w3.org/1999/xhtml);
        /* Namespace for SVG embedded in XHTML */
        @namespace svg url(http://www.w3.org/2000/svg);

嵌套規則

嵌套規則包含了額外的子集聲明,其中一些聲明只能用于特定情況。

       

代碼如下:

@[KEYWORD] {          /* Nested Statements */        }

@document
這個規則為樣式表指定了條件:只能應用于特定頁面。舉個粟子,我們提供一個URL,然后為這個特定的頁面自定義樣式,在其他頁面中,這些樣式會被忽略。

      

代碼如下:

@document 
          /* Rules for a specific page */
          url(http://css-tricks.com/),
          /* Rules for pages with a URL that begin with... */
          url-prefix(http://css-tricks.com/snippets/),
          /* Rules for any page hosted on a domain */
          domain(css-tricks.com),
          /* Rules for all secure pages */
          regexp("https:.*")
        {
          /* Start styling */
          body { font-family: Comic Sans; }
        }

@font-face
這個規則允許在web頁面上加載自定義字體,對自定義字體有不同程度的支持,但是這個規則接受語句創建和提供這些字體。

       

代碼如下:

@font-face {
          font-family: 'MyWebFont';
          src:  url('myfont.woff2') format('woff2'),
                url('myfont.woff') format('woff');
        }

@keyframes
在諸多CSS屬性中,這個規則是關鍵幀  動畫的基礎,并允許我們標記動畫開始和結束的標志。

       

代碼如下:

@keyframes pulse {
          0% {
            background-color: #001f3f;
          }
          100% {
            background-color: #ff4136;
          }
        }

@media
這個規則包含條件聲明,可用于為特定屏幕指定樣式,這些聲明可以包含屏幕大小,在適屏樣式中會很有用.

       

代碼如下:

/* iPhone in Portrait and Landscape */
        @media only screen 
          and (min-device-width: 320px) 
          and (max-device-width: 480px)
          and (-webkit-min-device-pixel-ratio: 2) {
            .module { width: 100%; }
        }

或者只在文檔打印時運用樣式

       

代碼如下:

@media print {        }

@page
這個規則為將要打印的單獨頁面定義樣式。特別的是,它能為頁面偽元素設置外邊距::first、:left和:right

       

代碼如下:

@page :first {
          margin: 1in;
        }

@supports
這個規則可測試瀏覽器知否支持某個特性/功能,如果滿足條件,將會為這些元素應用特定樣式。有點像Modernizr,但確實是CSS屬性。

       

代碼如下:

/* Check one supported condition */
        @supports (display: flex) {
          .module { display: flex; }
        }
        /* Check multiple conditions */
        @supports (display: flex) and (-webkit-appearance: checkbox) {
          .module { display: flex; }
        }

at-rule可以使CSS做一些瘋狂有趣的事情。盡管文章中的示例很基礎,但是可以看到,對于特定的條件,它們是如何使用樣式的,從而創建匹配特定場景的用戶體驗和交互。

看完上述內容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注億速云行業資訊頻道,感謝您對億速云的支持。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

如东县| 盐边县| 汾西县| 达拉特旗| 漳浦县| 冷水江市| 马公市| 浮山县| 伊金霍洛旗| 井陉县| 阿合奇县| 祥云县| 共和县| 平舆县| 洞头县| 桓仁| 清新县| 木里| 新邵县| 德令哈市| 临澧县| 宜君县| 临海市| 瑞丽市| 巴林右旗| 凌云县| 九龙城区| 全椒县| 宁阳县| 闻喜县| 沛县| 宁国市| 松阳县| 新建县| 襄汾县| 宿迁市| 台州市| 清丰县| 桐城市| 德令哈市| 凤台县|