Home > Web Front-end > CSS Tutorial > Usage of @ rule in CSS

Usage of @ rule in CSS

不言
Release: 2018-06-12 16:00:43
Original
1590 people have browsed it

This article mainly introduces a summary of the usage of some @ rules in CSS. It is the basic knowledge for introductory learning of CSS. Friends in need can refer to it

at-rule is a statement that provides execution for CSS Or instructions on how to behave. Each declaration begins with @, followed by an available keyword, which acts as an identifier to indicate what the CSS should do. This is a general syntax, although there are other syntax variations for each at-rule.
General rules

General rules follow the following syntax:

@[KEYWORD] (RULE);
Copy after login

@charset
This rule defines the Character set if the stylesheet contains non-ASCII characters (e.g: UTF-8). Note that the character set placed in the HTTP header will override the @charset rule

@charset "UTF-8";
Copy after login

@import
This rule indicates that the requested stylesheet, in this line, if the content is correct , an external CSS file will be introduced.

@import 'global.css';
Copy after login

Although popular CSS preprocessors all support @import, it should be noted that they work differently from native CSS: the preprocessor grabs the CSS files and processes them into a CSS File, for native CSS, each @import is an independent HTTP request.
@namespace
This rule is very useful for applying CSS to XML HTML (XHTML), because the XHTML element can be used as a selector in 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);
Copy after login

Nested rules

Nested rules contain additional subset declarations, some of which can only be used in specific situations.​

@[KEYWORD] {
          /* Nested Statements */
        }
Copy after login

@document
This rule specifies conditions for the style sheet: it can only be applied to specific pages. For example, we provide a URL and then customize the styles for this specific page. In other pages, these styles will be ignored.

@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; }
        }
Copy after login

@font-face
This rule allows loading custom fonts on web pages. There are varying degrees of support for custom fonts, but this rule accepts statements to create and provide these fonts.

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

@keyframes
Among many CSS properties, this rule is the basis for keyframe animation and allows us to mark the beginning and end of animation.

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

@media
This rule contains conditional declarations that can be used to specify styles for specific screens. These declarations can include screen sizes, which can be useful in screen-adaptive styles.

/* 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%; }
        }
Copy after login

Or apply the style only when the document is printed

@media print {
        }
Copy after login

@page
This rule defines styles for individual pages that will be printed. In particular, it can set margins for page pseudo-elements: :first, :left and :right

@page :first {
          margin: 1in;
        }
Copy after login

@supports
This rule can test whether the browser supports a certain Features/functions that will apply specific styles to these elements if the conditions are met. A bit like Modernizr, but really CSS properties.

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

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Summary of high performance when writing CSS code

Override rules of CSS styles

The above is the detailed content of Usage of @ rule in CSS. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template