Detailed explanation of the 4 ways to import CSS files: inline, inline, external, and imported

CSS import method - inline

Through the style tag attribute, the CSS key-value pair is directly written into the tag

<p style="width: 100px;height: 100px;background: red;"></p>
 <!--Note: This code describes a container with a width and height of 100px and a red background-->

CSS import method - embedded (embedded)

Use the style tag to introduce CSS attribute names and attribute values into the HTML page. Usually the style tag is placed in the head tag. Why should CSS styles be placed in the head tag? Because the code is executed from top to bottom. If the structure is loaded first, the user will see dry content without beautification. Loading the style first and then the structure is like a child being born wearing clothes!

 <head>
     <style type="text/css">
        p{
             width: 100px;height: 100px;background: red;
         }
     </style>
 </head>

The above code also describes a container with a width and height of 100px and a red background, but it is introduced in an embedded way!

CSS import method other than chain

Introduce independent css files into HTML pages through link tags

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

rel="stylesheet" describes the relationship between the current page and the document specified by href, which means that the document linked by href is a new style table, and type="text/css" specifies the MINME type, which is a css document. href="./style.css" specifies the location of the linked document

CSS import method

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

Introduce a separate CSS file through @import url, url("style.css") specifies the location of the linked document

This concludes this article about the four ways of importing CSS files: inline, inline, external, and imported. For more information about CSS import methods, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Docker starts MySQL configuration implementation process

>>: Our thoughts on the UI engineer career

Detailed explanation of the 4 ways to import CSS files: inline, inline, external, and imported

Nginx monitoring issues under Linux

Vue's guide to pitfalls using throttling functions

Summary of MySQL lock knowledge points

How to change the encoding of MySQL database to utf8mb4

In-depth analysis of JDBC and MySQL temporary tablespace

Vue implements the sample code of adding, deleting, modifying and checking the tree structure

Tips for making HTML emails that can be displayed normally in mainstream mailboxes

Example of how to use CSS3 to layout elements around a center point

MySQL series tutorials for beginners

How to implement h5 input box prompt + normal text box prompt

Recommend

Detailed example of concatenating multiple fields in mysql

Summary of examples of common methods of JavaScript arrays

Detailed explanation of using split command to split Linux files

How to use Portainer to build a visual interface for Docker

JavaScript realizes the effect of mobile modal box

Learn the common methods and techniques in JS arrays and become a master

Some points on using standard HTML codes in web page creation

Docker data storage tmpfs mounts detailed explanation

Linux system AutoFs automatic mount service installation and configuration

React implements double slider cross sliding

Two ways to implement HTML page click download file

How to make a centos base image

Detailed explanation of the order of JS object traversal

Detailed explanation of how to view MySQL memory usage

How to add a disk in Vmware: Expand the disk