Learn the rules of CSS applications on specific occasions

At-rules sub-installs different CSS rules and applies them to specific scenarios.
Importing
Import @ rules reference other styles. For example, if you want to add another style to the current style, you can do this:
@ Import url(addonstyles.css );
This is similar to connecting CSS to HTML using the link element. In essence, there is a content style like the following:
<Style type = "text/css" media = "all"> @ import url(monkey.css); </style>
This is to take care of the old version of browsers. For example, Netscape4 does not support @ rules, so style sheets cannot be linked. HTML pages with tags already created will lose the features provided by style sheets.
Media types
Media @ rule application content uses a specific media, such as printing, for example:

The code is as follows:	Copy code
@ Media print { Body { Font-size: 10pt; Font-family: times new roman, times, serif;       } # Navigation { Display: none;       } }

Media format:
All, all media.
Aural, speech synthesizer.
Handheld, mobile device
Print, print
Projection, projection
Screen, computer screen
You can also use braille, embossed, tty, or TV.
Note: Internet Explorer only supports all, screen, and print.
Charachter sets character settings
Charset @ rules are simple to set the encoding in the external style. It appears at the top of the style, for example @ charset "ISO-8859-1 ";
Font faces Font appearance
Font-face @ rules are used to describe the font in detail, and external fonts can be embedded in CSS.
It requires the font-family descriptor to reference the font. Its value can be the font name or a new name. Embed a font and use the src descriptor. Other descriptors added to the font-face @ rule will affect the fonts in use. For example, if you add font-weight: bold to the @ rule, the src of font-family can only be applied to selectors with the font-family attribute, and the font-weight attribute in the selector is also set to bold.