How to connect external css files in html?

When learning the front-end, we should know that css adds various styles to html tags to tell the browser how to display the content in these tags. Since css is used to add various styles to html, how to introduce external css text into html? This article will introduce to you four methods for introducing CSS files into HTML. Let’s take a look at the specific content.

How to connect external css files to html:

1. Use html to introduce css files directly in divs CSS style making div css webpage

<div style="border:1px red solid;">html引入css文件</div>

Note: This method of introducing CSS files into HTML is not recommended because it will make the page have many tags, which looks cumbersome and does not reflect the advantages of CSS. Of course If you really want to use this method, you can use it in places that don't change often, but it's still not recommended.

2. Use the style built-in style in html that introduces css files.

Write css directly in the header

<style type="text/css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>

Instructions: This method of introducing CSS files into HTML is suitable for use when there are few pages. Advantages: speed Fast, all css controls are for this page tag, there are no redundant css commands; and there is no need to link css files externally. Read styles directly in the html document. Disadvantages: If there are many pages, it will be very troublesome to revise a single page. The page looks bloated, and CSS cannot be referenced by other HTML, resulting in a relatively large amount of code and troublesome maintenance. But most of the companies that use this method are rich. For them, the number of users is the key, and they have no shortage of people. Perform complex maintenance work.

3. Use @import to reference external CSS files when introducing css files into HTML

Introduce an independent .css file into HTML In the file, the import type 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>

4. HTML introduces css files. Use link to reference external CSS files

Use the 2cdf5bf648cf2f33323966d7f58a7f3f tag in the 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 tag pair of the web page to introduce external style sheet files, and use html rules to introduce them externalcss.

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

Note: This method of introducing css files into HTML does not require the style tag, but directly refers to the external style by linking a style. It is recommended to use link to refer to the external css style. method.

The above are the four ways to introduce external css files to html. For more information about html and css, you can pay attention to the php Chinese website.

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