How to add css to html-HTML Tutorial-php.cn

How to add css to html

(*-*)浩

Release： 2019-06-05 14:33:02

Original

8907 people have browsed it

There are four main ways to add 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 tag . This method does not reflect the advantages of CSS and is not recommended.

<div style = "width:100px;height:100px;>我是行内样式</div>

Copy after login

2. Embedded

Embedded is to write CSS styles in the tag pair of the web page. The format is as follows:

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

Copy after login

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

3. Import type

Introduce an independent .css file into the HTML file. The import type uses CSS rules to introduce external CSS files,

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

Copy after login

The import 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 appear first, and after a flash, the style of the web page will appear. This is an inherent flaw of imports.

4. Link type

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 file, which uses tags in the tag pairs of the web page to introduce external style sheet files. The syntax is as follows:

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

Copy after login

The difference between using the link type and the import type is that it will load the CSS file before loading the main body of the web page file. , 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 a link to introduce a general CSS file, and then in this CSS Imports are used in the file to introduce other CSS files. But if you dynamically introduce CSS files through JavaScript, you can only use linking.

The above is the detailed content of How to add css to html. For more information, please follow other related articles on the PHP Chinese website!