Three common ways to embed CSS in HTML documents

Time:2020-1-21

There are three ways to define CSS in HTML: embedding, linking and inline

1、 Embedded

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

Copy code

The code is as follows:

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

2、 Inline

Each HTML element contains a style attribute that you can define directly. The style can only be used for the content of the element, but not for 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 references

External reference refers to the HTML document itself does not contain CSS style, but dynamically references the external CSS file to define the document’s representation.

1. Processing instruction statement using style sheet

Write an instruction processing statement about style sheet at the beginning of HTML document

Copy code

The code is as follows:

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

However, this instruction is only supported by HTML documents written in XML syntax format. Most browsers are only effective when they are saved in XHTML or XML format, and JS cannot handle this CSS, so it is not recommended.

2. Use @ Import command

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

Copy code

The code is as follows:

<head>
<style type=”text/css”>
<! — the following two lines of code have the same effect
@import “mystyle.css”;
@import url(“mystyle.css”);
–>
</style>
</head>

Any @ import rule must appear before all rules. Parameter is the URL of a CSS file. You can also import another CSS file with the @ import directive in one CSS file.

3. Using the link element

Copy code

The code is as follows:

<head>
< link rel = “stylesheet” href = “URL of CSS” type = “text / CSS” >
</head>

This is also the most common way.

4. Link to stylesheet using HTTP message header

You can link an external stylesheet using the link field of the HTTP message header.

Copy code

The code is as follows:

link:<mystyle.css>;rel=stylesheet;
//Equivalent to the URL of < link rel = “stylesheet” href = “CSS” type = “text / CSS” >

Multiple links can be used in HTTP headers to link multiple stylesheets, and links in HTTP headers take precedence over links in HTML documents (in the head element).

Recommended Today

Analysis of new data type instances of ES6 learning notes

An example of this paper describes the new data types of ES6 learning notes. To share with you for your reference, as follows: 1. Data deconstruction assignment 1. Deconstruction and assignment of arrays Basic usage: let [key1, key2…] = [value1, Value2…] Let [name, age, sex] = [‘xiaoming ‘, 24,’ male ‘]; console.log(name); console.log(age); console.log(sex); Note […]