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

This article introduces the relevant knowledge of "what are the forms of css insertion". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

CSS insert form: 1, write the css code into the style attribute of the element tag; 2, write the css code between the "" and "" tag pairs; 3, write the css code in the css file, import with the link tag; 4, import the css code file with the "@ import" rule.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

What is CSS

CSS (Cascading style sheets cascading style sheets), CSS can be used to build style sheets for web pages, through the style sheets to achieve the effect of beautifying the web pages. The so-called cascading can imagine the web page as a layer of structure, high-level coverage of low-level. CSS can set the style of the web page layered. (text size, background color, width and height, borders, and so on. )

The language CSS was created and maintained by the W3C organization. It had version 1.0 in 1996, version 2.0 in 1998, and version 2.1 in 2004. There is no total release time for CSS3. It has been split into many small functions to be released at different times one after another. For more information, please see the W3C website.

II. The way CSS is inserted

There are four ways to insert css stylesheets: inline style, internal style, link tag introducing external style, and imported style.

(1) inline style (inline style)

Inline style: you can write css code into the style attribute of an element, followed by css code after the style attribute. What is written to the inline tag is the inline style.

Multiple styles can be written in a style attribute, with different values of the attribute separated by a semicolon (;). This style is called inline tags. Inline tags work only on the current element.

(2) Internal style

Internal style: you can write the CSS style into the tag under HTML (), in which the type= "text/css" part is the default value, whether you can write it or not. Where text represents the style written is text, and css indicates that this is a css style sheet.

To add content to a style tag, you need to write a css content selector to indicate who the style is set on. The tag to set the style should be followed by a curly braces {}. Write the style sheet to the specified style tag and select the specified element through the css selector. Then you can set the style for these elements together at the same time, which can make the style better reuse and further separate the structure from the style. Improve the degree of semantics. (internal styles can only be used on the current page)

(3) external style

External style: to achieve the effect that a set of styles can be used on different pages at the same time, introduce the css file (file suffix .css) into the current page through the link tag.

Self-closing label. Bring an external css file into the current page so that it can be applied to the current stylesheet. The href attribute points to the external file address URL,rel= "stylesheet" type= "text/css", which is the default value. The style is written uniformly in the external file, and then introduced through the link tag, this method makes use of the browser cache to speed up the access speed and improve the user experience.

The code content of the css.css file is p {color:blue}, which is consistent with the effect shown above using the internal style.

(4) Import (@ import)

Introduction: the mutual reference between two CSS files, using CSS@import rules to introduce external CSS files.

The introduction of external CSS stylesheets with link tags and the introduction of CSS files with import tags will be slightly different in implementation.

When using the link tag, the CSS file is loaded (from top to bottom) before the main page section is loaded, so that the loaded page is rendered with a style from the beginning.

When using import, the CSS file will be loaded after the entire page is loaded. For some browsers, in some cases, if the size of the page file is relatively large, there will be a page without a style, and then the effect of setting the style will appear again. From the user's point of view, this is a flaw in the introduction.

How to select a solution and how CSS introduces another CSS file:

If you introduce only one CSS file, it is best to use link links. (if you want to import a CSS file dynamically through JavaScript, you must import it using the link tag.)

If you need to reference multiple CSS files, first use link to introduce a "directory" CSS file, and then import other CSS files in this "directory" CSS file.

The method of introducing another CSS File into CSS

Suppose you have three css stylesheets: one.css; two.css; three.css

Then use a main style style.css to install all three stylesheets: (pay attention to the path)

@ import "one.css"; @ import "two.css"; @ import "three.css"

When calling, all you need to do is call style.css.

Import imports another css file into a css file mainly using the @ import rule

This is the end of the content of "what are the forms of css insertion". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.