Home >Web Front-end >Front-end Q&A >How to load css in html

How to load css in html

藏色散人
藏色散人Original
2021-07-27 10:55:4712549browse

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.

How to load css in html

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 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 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 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1. It ends with c9ccee2e6ea535a969eb3f532ad9fe89 and 531ac245ce3e4fe3d50054a55f265927 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!

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