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

Use a diagram to explain what Web2.0 is

Analysis of the principles of docker containers

Layui table selects the radio button of the specified row and scrolls to the implementation code of the row

Summary of relevant knowledge points on how adaptive web design is achieved

Detailed explanation of the working principle and usage of the Docker image submission command commit

Linux Autofs automatic mount service installation and deployment tutorial

Detailed explanation of ES6 Promise usage

Detailed explanation of Nodejs array queue and forEach application

DHTML objects (common properties of various HTML objects)

How to monitor Windows performance on Zabbix

Recommend

Detailed explanation of the steps to create a web server with node.js

MySQL backup table operation based on Java

Navicat multiple ways to modify MySQL database password

How to change the root password in MySQL 5.7

How to install openjdk in docker and run the jar package

Setting up Docker proxy under CentOS 7 (environment variable configuration of Systemd service under Linux)

Detailed process of drawing three-dimensional arrow lines using three.js

Vue implements dynamic circular percentage progress bar

Discussion on the way to open website hyperlinks

HTML table tag tutorial (11): horizontal alignment attribute ALIGN

JS+AJAX realizes the linkage of province, city and district drop-down lists

Detailed explanation of the text-fill-color property in CSS3

A brief talk about Mysql index and redis jump table

Steps to transplant the new kernel to the Linux system

Pitfalls and solutions for upgrading MySQL 5.7.23 in CentOS 7