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

Solution to the failure of entering the container due to full docker space

Three common ways to embed CSS in HTML documents

Solution to the failure of entering the container due to full docker space

Mysql example of converting birth date into age and grouping and counting the number of people

Write a formal blog using XHTML CSS

Operate on two columns of data as new columns in sql

Simple CSS text animation effect

Recommend a cool interactive website made by a front-end engineer

How to draw a cool radar chart in CocosCreator

JavaScript two pictures to understand the prototype chain

Tomcat garbled characters in the console in IDEA and how to set IDEA encoding to UTF-8

MySQL query learning basic query operations

Recommend

How to set a dotted border in html

Vue implements scrollable pop-up window effect

How does WeChat Mini Program obtain user information and user phone number at the same time

Docker container deployment attempt - multi-container communication (node+mongoDB+nginx)

Detailed tutorial on jdk installation and environment variable configuration under Win10

Solution to the problem of null column in NOT IN filling pit in MySQL

How to create users and manage permissions in MySQL

Three ways to check whether a port is open in a remote Linux system

Detailed process of installing and configuring MySQL and Navicat prenium

Introduction to query commands for MySQL stored procedures

Example method of deploying react project on nginx

Detailed explanation of Mysql logical architecture

JavaScript quickly implements calendar effects

Initial settings after installing Ubuntu 16 in the development environment

MYSQL updatexml() function error injection analysis