Shulou(Shulou.com)06/01 Report--

This article will share with you about the ways of introducing CSS into HTML. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

I. get to know CSS

CSS: cascading style sheets (Cascading Style Sheets)

Stylesheet: if HTML is compared to a person, then the stylesheet is clothing, which is used to dress up the appearance of HTML (as the saying goes, people rely on clothes, web pages rely on CSS to become beautiful)

Separation of content and style: separate HTML code from CSS code and let them do what they are good at

HTML controls structure and content; CSS controls style

This is good for code maintenance.

Take Chestnut: Qzone's dressing function, which has existed for a long time, is the best embodiment of the separation of content and style.

When we click to switch between different skins, the space page will display different theme styles, which is changing the skin of the web page.

Now that HTML and CSS are separated, how do you get them to cooperate? Look down

2. Four ways of introducing CSS

1. Inline style (inline)

That is, set the CSS style in the style attribute within the html tag, for example:

I am the paragraph.

Note: this method is not recommended because it can only change the current label style, and multiple uses will lead to poor maintainability of the code.

two。 Internal style (embedded)

That is, set the CSS style in the style tag pair in the head header in the html, for example:

Note: this approach separates the html content structure from the css style, which is easy to read and the code is more concentrated, but the CSS style is only valid for the current page.

When multiple pages need to refer to the same CSS style, it will be very troublesome to modify the CSS style, which is not conducive to code maintenance and poor maintainability.

3. External style (linked: link)

That is, to introduce an external independent .css file using the link tag of html

The link tag is placed in the head header in the html file, for example:

Note: in this way, the CSS code is stored in an external independent file. If you want to change the website style, you only need to modify the CSS file, not the html file, so this way makes the code have good maintainability.

4. External style (imported: @ import)

That is, to introduce an external independent .css file using the syntax rules of CSS

@ import is placed in the style tag in the head header of the html file (@ import can also be placed at the beginning of the imported stylesheet to reference other styles), for example:

@ import url ("style.css")

Note: like linked link, this method stores CSS code in an external independent file and has good maintainability, but it also has disadvantages: White screen and no style content flicker.

Hey, in addition to the style quoted above, don't ignore the default style of the browser.

Third, when quoting external styles: the difference between link and @ import

1. Subordinate relationship

Link belongs to the HTML tag and introduces external files through the href attribute of the link tag. Link can not only introduce CSS stylesheets, but also define RSS, rel attributes, etc.

@ import belongs to CSS syntax. @ import syntax has only one function: import stylesheets.

two。 Loading sequence

CSS styles introduced using link tags are loaded simultaneously when the page is loaded

CSS styles imported with @ import will not be loaded until the page is loaded.

3. Compatibility

Link belongs to the HTML tag and there is no compatibility issue.

@ import is proposed by CSS2.1 in CSS2.1. It is not supported by lower versions of browsers and can only be recognized in IE5+.

4. DOM controllable area

Link supports using Javascript to control DOM to change styles (JS manipulates DOM, inserts link tags to change styles)

@ import does not support using Javascript to control DOM to change styles (since the DOM method is document-based, styles cannot be inserted using @ import)

5. Weight (if you are interested in querying its reasons)

The style weight introduced by link is greater than that introduced by @ import.

Thank you for reading! This is the end of this article on "what are the ways to introduce CSS into HTML?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.