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