A brief analysis of the four import methods and priorities in CSS

First: 4 ways to introduce CSS

There are four ways to introduce CSS: inline style, embedded style, link style, and import style.

1. Inline styles

The most direct and simplest one is to use style="" directly on the HTML tag, for example:

<p style="color:#F00; "></p>

Disadvantages: HTML pages are not pure, the file size is large, it is not conducive to spider crawling, and the subsequent maintenance is inconvenient.

2. Inline styles

Inline style means writing CSS code between <head></head> and declaring it with <style></style> , for example:

<style type="text/css">
body,div,a,img,p{margin:0; padding:0;}
</style>

Advantages and disadvantages: The page uses public CSS code, which must be defined for each page. If a website has many pages, each file will become larger and difficult to maintain later. If there are few files and not much CSS code, this style is still very good.

3. Link Style

The link style is the most frequently used and practical style. You only need to add <link…/> between <head></head> , as follows:

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

Advantages and disadvantages: It realizes the complete separation of page framework code and presentation CSS code, making pre-production and post-maintenance very convenient

4. Import style (not recommended)

Importing styles is similar to linking styles. The @import style is used to import CSS style sheets. When HTML is initialized, it will be imported into the HTML or CSS file and become part of the file, similar to the second embedded style.

@import is used in HTML as follows:

<style type="text/css">
@import url(style.css);
</style>

@import is used in CSS as follows:

@import url(style.css);

Second: The priority of four CSS introduction methods

1. Proximity principle

2. In theory: Inline > Embed > Link > Import

3. In fact: embedding, linking, and importing are in the same file header, whichever is closer to the corresponding code has a higher priority

Experience:

1. If the same CSS definition is distributed in two CSS files, the style is taken from the CSS file introduced later.
2. It is best to put the CSS of third-party components in the front of HTML and the customized CSS in the back of HTML.

Summarize

This concludes this article on the four import methods and priorities in CSS. For more information on the priority of CSS import methods, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: The process of building and configuring the Git environment in Docker

>>: Vue implements mobile phone verification code login

HTML sample code for implementing tab switching

Tomcat exception solution (Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986)

1. Scenario display The tomcat log occasionally r...

A brief analysis of the four import methods and priorities in CSS

HTML sample code for implementing tab switching

Create a code example of zabbix monitoring system based on Dockerfile

Difference between MySQL btree index and hash index

Summary of Kubernetes's application areas

js to upload pictures to the server

Various methods to restart Mysql under CentOS (recommended)

CSS performance optimization - detailed explanation of will-change usage

A brief analysis of the configuration items of the Angular CLI release path

Solve the problems that need to be paid attention to when configuring Tomcat's maxPostSize attribute

How to install Element UI and use vector graphics in vue3.0

Recommend

Detailed tutorial on downloading, installing and configuring the latest version of MySQL 8.0.21

Reasons and solutions for failure to insert emoji expressions in MySQL

A brief discussion on MySQL select optimization solution

The difference between JS pre-parsing and variable promotion in web interview

Analysis of JavaScript's event loop mechanism

Vue ElementUI implements asynchronous loading tree

A detailed tutorial on how to install Jenkins on Docker for beginners

Example of using JSX to create a Markup component style development (front-end componentization)

Tomcat exception solution (Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986)

Detailed tutorial on how to log in to the system using the root user in the new version of Ubuntu 20.04

Summary of Linux Logical Volume Management (LVM) usage

Analysis of the problem of deploying vue project and configuring proxy in Nginx

Index in MySQL

Examples of two ways to implement a horizontal scroll bar

MySQL database must know sql statements (enhanced version)