Introduce CSS in HTML in three ways: Use introduction _ HTML/Xhtml _ web page creation

Source: Internet
Author: User
In HTML, the methods for introducing CSS mainly include inline, embedded, imported, and linked. Below are some suggestions for these different methods, if you are confused, refer to the following methods in HTML to introduce CSS: inline, inline, Pilot, and link.
Inline style:That is, set the CSS style in the marked style attribute. This method does not reflect the advantages of CSS in nature, so it is not recommended to use
Example:

The Code is as follows:





Text Demo



This is a line of Text.




Embedded:Embedded system writes the settings of various elements on the pageAndFor a single web page, this method is very convenient. However, for a website that contains many pages, if each page is embedded with its own style, the huge advantages of CSS will be lost, therefore, a website is usually used to compile an independent CSS style sheet file. One of the following two methods is used to introduce HTML documents.
Example:

The Code is as follows:





Text Demo



This is a line of Text.
This is another line of Text.



Import and link:Both the pilot and link types aim to introduce an independent CSS file into an HTML file, which is different accordingly.
In fact, the biggest difference between the two is that the HTML Tag is used to introduce external CSS files, while the imported CSS rule is used to introduce external CSS files. Therefore, their syntax is different.
If you use the link method, use the following statement to introduce the external CSS file.

If you use the pilot type, you need to use the following statement.

The Code is as follows:




In addition, the display effect is slightly different after the two methods are used. When using the link method, the CSS file is loaded before the main part of the device page, so that the displayed webpage has a style effect from the beginning. When using the pilot mode, after the entire page is loaded, the CSS file is loaded. For Some browsers, in some cases, if the size of the webpage file is large, a page with no style is displayed first, after flashing, the effect after the style setting is displayed. This is a defect in the use of the pilot type from the perspective of the viewer. For some large websites, in order to facilitate maintenance, you may want to classify all CSS styles into several CSS files. In this way, if you use link-based introduction, several statements are required to import the CSS file. If you want to adjust the CSS file category, you need to adjust the HTML file at the same time. This is a defect for maintenance. If you use the pilot type, you can only introduce one total CSS file, and then import other independent CSS files in this file. The link type does not have this feature.

Therefore, we recommend that you use the link method if you want to introduce a CSS file. If you want to introduce multiple CSS files, first, a "directory" CSS file is introduced through links. This "directory" CSS file is then imported into other CSS files using a pilot method.
If you want to use JavaScript to dynamically decide which CSS file to introduce, you must use the link method.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.