How to load css in html

How to load css in html: 1. Load css through external styles; 2. Load css through internal styles; 3. Load css through inline styles; 4. Load css through imported styles.

The operating environment of this article: windows7 system, HTML5&&CSS3 version, DELL G3 computer

How to load css in html?

There are 4 types of loading css styles

1. External style (external style)

If the css is an external file, you can Write

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

href="style.css" in the of your html file. Here you can write the path of your css file.

This form is Write the css separately into a css file, and then link it in the source code as a link. Its advantage is that it can be called not only on this page, but also on other pages. It is the most commonly used form

2. Internal style (embedded style)

If it is an internal style, it can also be called You can write

<style type="text/css">
h3 { color:#f00;}
</style>

in . It ends with and is written in the head tag of the source code. Such a style sheet is only valid for this page. It cannot be applied to other pages.

3. Inline style

You can also write css style directly on the html tag

<p style="font-size:18px;">内部样式</p>

This kind of style marked with style in the tag is an inline style. Inline style is only for Elements within tags are valid, but they are not separated from the content, so their use is not recommended.

4. Import style

@import url("public.css");

The imported style is an external style sheet linked by the @import url tag. It is generally used inside another style sheet. If index.css is the style used on the homepage, then we can put the public styles that are needed globally into a public.css file, and then use

@import url("/public .css")

to link global styles, thus making the code highly reusable.

【Recommended learning: css video tutorial】

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