Three common ways to embed CSS in HTML documents

The following three methods are commonly used to define CSS in HTML: Embedding, Linking, and Inline

1. Embedded

Use the HTML style element to define CSS styles in a document.

Copy code

The code is as follows:

<head>
<style type="text/css">
h1{color:red}
p{color:blue}
</style>
<head>

2. Inline

Every HTML element contains a style attribute, which can directly define the style. This style applies only to the content of this element and has no effect on another element with the same name.

Copy code

The code is as follows:

<p style="color:#FFF;font-weight:bold;">Inline style</p>

3. External reference

External reference means that the HTML document itself does not contain CSS styles, but dynamically references external CSS files to define the document's presentation.

1. Use style sheet processing instruction statements

Write a style sheet instruction at the beginning of the HTML document

Copy code

The code is as follows:

<?xml-stylesheet type="text/css" href="mystyle.css" ?>
<html>
Instruction Statement
</html>

However, only HTML documents written in XML syntax format support the use of this directive. Most browsers are only effective when saved in XHTML or XML format, and JS cannot process this kind of CSS, so it is not recommended.

2. Use @import command

Use the @import command between style elements to import external CSS files

Copy code

The code is as follows:

Any @import rules must appear before all other @import rules. The parameter is the URL of a css file. You can also use the @import directive in a css file to import another css file.

3. Use the link element

Copy code

The code is as follows:

This is also the most commonly used method.

4. Use HTTP message headers to link to style sheets

You can use the link field of the HTTP message header to link to an external style sheet.

Copy code

The code is as follows:

link:<mystyle.css>;rel=stylesheet;
//Equivalent to <link rel="stylesheet" href="css的url" type="text/css" >

Multiple links can be used in the HTTP header to link multiple style sheets, and the link in the HTTP header has priority over the link in the HTML document (in the head element).

<<: The whole process of IDEA integrating docker to deploy springboot project

>>: CSS float property diagram float property details

Three common ways to embed CSS in HTML documents

JavaScript to achieve fixed sidebar

Implementation of Vue package size optimization (from 1.72M to 94K)

How to add sudo permissions to a user in Linux environment

Detailed steps to install 64-bit Ubuntu system and Docker tool on Raspberry Pi 3B+

How to configure environment variables in Linux environment

Specific use of the wx.getUserProfile interface in the applet

React internationalization react-intl usage

Combining insert and select to implement the method of "inserting the maximum value of a field in the database + 1"

How to build Nginx image server with Docker

Element dynamic routing breadcrumbs implementation example

Recommend

React nested component construction order

Detailed analysis of MySQL instance crash cases

A brief analysis of the problem of mysql being inaccessible when deployed with docker-compose

Installation steps of docker-ce on Raspberry Pi 4b ubuntu19 server

MySQL query data by hour, fill in 0 if there is no data

Centos7 configuration fastdfs and nginx distributed file storage system implementation process analysis

Detailed explanation of commonly used CSS styles (layout)

JDBC-idea import mysql to connect java jar package (mac)

Use CSS to achieve 3D convex and concave effects on images (convex out of the frame or concave in the frame)

W3C Tutorial (3): W3C HTML Activities

Detailed explanation of Linx awk introductory tutorial

HTML Tutorial: Unordered List

Various ways to modify the background image color using CSS3

How to install Docker on Windows Server 2016

Comprehensive understanding of HTML basic structure