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

Should I use distinct or group by to remove duplicates in MySQL?

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

Should I use distinct or group by to remove duplicates in MySQL?

How to handle the loss of parameters when refreshing the page when passing parameters to vue router

Vue3 implements Message component example

Solution to mysql login warning problem

Use the Linux seq command to generate a sequence of numbers (recommended)

Introduction to the process of using NFS remote directory mounting in CentOS environment

Detailed explanation of Nginx process scheduling problem

Summary of CSS3 practical methods (recommended)

A new CSS image replacement technique (background display and text moving off screen) to say goodbye to 9999px

Solution to the problem that docker CMD/ENTRYPOINT executes the sh script: not found/run.sh:

Recommend

JavaScript to achieve custom scroll bar effect

Using vsftp to build an FTP server under Linux (with parameter description)

Detailed explanation of the properties and instance usage of hasOwnProperty in js

MySQL5.7.27-winx64 version win10 download and installation tutorial diagram

Detailed tutorial on deploying Django project under CentOS

Detailed steps to implement the Excel import function in Vue

Understand the basics of Navicat for MySQL in one article

Use HTML and CSS to create your own warm man "Dabai"

How to install MySQL 8.0 database on M1 chip (picture and text)

Several common methods of sending requests using axios in React

Detailed explanation of application scenarios of filters in Vue

Vue implements automatic jump to login page when token expires

Solve the problem of MySQL Threads_running surge and slow query

How to communicate between WIN10 system and Docker internal container IP

In-depth explanation of binlog in MySQL 8.0