XV At-rules @ Rules

At-rules different CSS rules for use in specific situations.

Importing

importThe @ rule references another style. For example, if you want to add another style to the current style, you can do this:

@import url(addonstyles.css);

This is much like using link elements to connect CSS to HTML, which essentially has 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 the browser, such as NETSCAPE4 does not support the @ rule so it cannot link the stylesheet, and the HTML page that has already been built will lose the functionality provided by the stylesheet.

Media types

mediaThe @ Rule application content uses specific media, such as printing, for example:

@media print {body {font-size: 10pt;font-family: times new roman, times, serif;}#navigation {display: none;}}

Media form:

• all, all media.
• aural, Speech synthesizer.
• handheld, mobile devices
• printPrint
• projectionProjection
• screen, computer screen

You can also use braille , embossed tty or tv .

Note: Say so much, ie only support all , screen and print .

Charachter Sets character setting

charsetThe @ rule simply sets the encoding in the external style. It appears at the top of the style, for example @charset "ISO-8859-1";

Font faces fonts appearance

font-face@ rules are used to describe fonts in detail, and you can embed external fonts in CSS.

It requires a font-family descriptor reference font, and its value can be the name of the font or a new named one. Embed a font, using src descriptors. Other descriptors added to the font-face @ rule will affect the embedded font being used, for example, if you add font-weight: bold bold to @ rules, you font-family src can only apply to a font-family selector with attributes, and the properties in the selector are font-weight also set to bold.

Look at the following example:

@font-face {font-family: somerandomfontname;src: url(somefont.eot);font-weight: bold;}p {font-family: somerandomfontname;font-weight: bold;}

As the above example, the font in the paragraph will be the Somefont font (if the p selector is not font-weight: bold , the font is not somefont)

Embedded fonts are also available because Mozilla browsers do not support or plan to add this feature. Only IE measured support, but this is not to say that can be used directly, ie browser embedded fonts, you also need Microsoft weft software, it provides TrueType fonts converted to compressed OpenType fonts (only this you can use the URI specified). Because of this limitation (very complex) compatibility, it is best not to use fonts that are not available on the system.

Pages

page@ Rule Service Page media is an advanced way to apply print media styles. It defines the page block and expands on the box model, so you can define the size and performance of a single page.

There are many rules for applying the page @ rule, such as no padding and border, and not on the computer screen we say, so pixels and EMS units are not allowed to use.

There are many specific properties that can be used, such as size portrait vertical, landscape horizontal auto , automatic, or length. marksattribute can be used to define crop flags

@page {size: 15cm 20cm;margin: 3cm;marks: cross;}

Pseudo tags in the page media

There are three kinds of pseudo tags used to link a specific page @ rule, as follows: @page :pseudo-class {stuff} .

:firstFirst page applied to page media

:leftand :right apply to left and left pages. This can be used on the left page with very large margin and on the right page with very large margin.

There are also some page @ rules, such as Page-breaks page breaks and named pages, but these @ rules are hard to work in the browser, and you may be wasting a lot of time reading this article, but these are all good ideas.