How to load css in html-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

How to load css in html

Jul 27, 2021 am 10:55 AM

css 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.

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

&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;

Copy after login

href="style.css" in the <head></head> 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

&lt;style type=&quot;text/css&quot;&gt;
h3 { color:#f00;}
&lt;/style&gt;

Copy after login

in <head></head>. It ends with <style> and </style> 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

&lt;p style=&quot;font-size:18px;&quot;&gt;内部样式&lt;/p&gt;

Copy after login

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(&quot;public.css&quot;);

Copy after login

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 of this Website

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