Home > Article > Web Front-end > How to introduce CSS into HTML

How to introduce CSS into HTML

墨辰丷Original: 2018-05-16 11:26:592396browse

There are four main ways to introduce CSS in HTML, they are inline, embedded, link and imported.

1. Inline style
Inline style is to set the CSS style in the style attribute of the mark. This method does not reflect the advantages of CSS and is not recommended.
2. Embedded
Embedded is to write CSS styles together in the c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 tag pair of the 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 tag pair of the web page. The format is as follows:

<head>
        <style type="text/css">
               ...此处写CSS样式
       </style>
      </head>

The disadvantage is that for a website that contains many web pages, it is very troublesome to use embedding in each web page and modify the style. Single web pages can consider using embeds.

3.Import
Introduction of an independent .css file into the HTML file. The import uses CSS rules to introduce external CSS files. The c9ccee2e6ea535a969eb3f532ad9fe89 tag is also written in the 93f0f5c25f18dab9d176bd4f6de5d30e tag. The syntax used is as follows:

<style type="text/css">
                    @import"mystyle.css"; 此处要注意.css文件的路径
         </style>

The import method will load the CSS file after the entire web page is loaded, so this leads to a problem. If the web page is relatively large, an unstyled page will be displayed first and flicker. After a while, the style of the web page will appear again. This is an inherent flaw of imports.

4. Link type
It also introduces a .css file into the HTML file, but it is different from the import type in that the link type uses HTML rules to introduce external CSS files. It is in the 7b2ebb89e78bb9797ec890a9c63c691b tag in the ;9c3bca370b5104690d9ef395f2c5f8d1 tag to introduce an external style sheet file. The syntax is as follows:

   <link href="mystyle.css" rel="stylesheet" type="text/css"/>

The difference between using the link type and the import type is that it will be loaded as the main body of the web page file. The CSS file is front-loaded, so the displayed web page has a style effect from the beginning. It will not display the unstyled web page first and then display the styled web page like the import type. This is the advantage of the link type.

Summary: Generally speaking, when making a website, the styles are mostly written in multiple style sheet files, so we first use the link type to introduce a general CSS file, and then use the import type in this CSS file. to introduce other CSS files. But if you dynamically introduce CSS files through JavaScript, you can only use linking.

Related recommendations:

Introduction to four ways to introduce CSS into HTML

Chromium CSS Analysis (1) Default htmlCss Formation logic (chromium39)_html/css_WEB-ITnose

htmlcss note tag default value style reset css reset(2)_html/css_WEB-ITnose

The above is the detailed content of How to introduce CSS into HTML. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5 storage detailed explanationNext article：HTML5 storage detailed explanation

See more

How to introduce CSS into HTML

Related articles