One of CSS learning: introducing CSS styles

In HTML, we usually use the link element to introduce an external style sheet. link has the following attributes:

1. rel, indicating "relation". Here, the link (I .e., the rel value) is "stylesheet ";

2. type: always set to "text/css", which describes the data types loaded using link;

3. href. The value is the URL of the style sheet, which can be relative or absolute;

4. media. The default value is "all", indicating that the style sheet should be applied to the media of the performance. Other values: aural (used for audio synthesizer, screen reader, and other sound performances of the document) braille (used when presenting documents with Braille devices), embossed (used when printing with Braille devices), and handheld (used for handheld devices) print (used when a user with normal vision prints a document and displays the "print preview" of the document), projection (used for a projector), screen (on-screen media, for example, in a computer display), tty (used for displaying documents in a fixed-distance environment, such as a telex printer), and TV (used for displaying documents on a TV ). However, different browsers may have different support for them.

5. title, which is not commonly used. However, when the rel value is "alternate stylesheet", you can use the title attribute to generate a list of candidate style sheets for users to choose from.

When the rel value is "alternate stylesheet", you can also provide a candidate style sheet, which is used only when you select this style sheet. The sample code is as follows:

<Link rel = "stylesheet" type = "text/css" href = "style1.css" media = "screen, print"/> <! -- Media attributes can have multiple values separated by commas --> <link rel = "alternate stylesheet" type = "text/css" href = "style2.css" media = "screen, print "title =" big "/> <! -- Alternate specifies the candidate style sheet --> <link rel = "alternate stylesheet" type = "text/css" href = "style3.css" media = "screen, print "title =" small "/>

In addition, you can use an internal style sheet to add a style to the page:

<Style type = "text/css"> <! --/* Include the declared style in an html comment to solve the problem that older browsers do not recognize the style. */body {background: gray;} --> </style>

I often see many friends add HTML comments behind <style>, and then write styles in it. I finally know the reason for this.

Another method is to use the @ import method to import a style sheet. You only need to pay attention to the following: placement, because @ import is a css-defined reference style method, therefore, it should be placed in the <style> element, and it cannot have any other rules before it (of course, it does not include other @ import, because more than one @ import can be placed in one <style>, otherwise, the later imported style is invalid. Sample Code:

<Style type = "text/css"> <! --/* Include the declared style in an html comment to solve the problem that older browsers do not recognize the style */@ import url ("style2.css "); /* @ import appears at the beginning of the style sheet */body {background: gray;} @ import url(style3.css);/* @ import has a style before it, so ignored */--> </style>

Supplement to importing a style sheet:

You can import a style sheet to another style sheet in a style file. This reduces the complexity of HTML documents and allows you to manage all style sheets in a style sheet. Since the imported style sheet is before other styles, the rules for importing the style sheet may be overwritten by subsequent styles. This must be considered.

Although the @ import keyword is used to import a style sheet, @ import is written at the beginning of the style sheet, but it is last parsed by the browser, this can easily cause a pop-up screen in IE6 or the style will not be loaded until the page is loaded.

---- Refer to those things in CSS

Next, we will add the style attribute to the HTML tag to write the required style, but note that @ import cannot be used in the inline style. The code example is as follows:

<P style = "@ import url('style3.css ');"> CSS document </p> <! -- You cannot use @ import in the style attribute -->

Like the above method, it is wrong.

So much will be added later. Pai_^