What does @ mean in css

The "@" symbol in CSS is used to introduce directives and rules, including rule sets (defining styles) and directives (setting rules unrelated to styles, such as importing style sheets). Such as: @import, @media, @keyframes.

The "@" symbol in CSS

In Cascading Style Sheets (CSS), the "@" symbol is a special character that has a specific purpose.

Usage:

The "@" symbol is used in CSS to introduce various directives and rules, including:

• ## Rule set: starts with "@" and is used to define a set of styles that apply to specific elements or selectors.
• Command: Starts with "@" but is not followed by curly brackets. It is used to set rules unrelated to styles, such as importing external style sheets or defining variables.

Syntax:

• @import: Import an external style sheet file
• @media: Create a media query to apply styles under specific conditions
• @keyframes: Define key frames of CSS animation

Example:

<code class="css">@import "styles.css";

@media (min-width: 768px) {
  body {
    font-size: 1.2rem;
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}</code>

Notes :

The "@" symbol always starts with a lowercase letter.
• Directives or rules following the "@" symbol must end with a semicolon (;).
• Keywords and rules after the "@" symbol are case-sensitive.

The above is the detailed content of What does @ mean in css. For more information, please follow other related articles on the PHP Chinese website!