How to add css style

Methods to add css styles: 1. Add through the style attribute of html; 2. Write the css style in the style tag; 3. Add through links; 4. Add through import, the code is as follows "@import url(demo.css)".

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

How to add css style?

How to insert css style? The following article will introduce to you how to insert css styles. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Preparation

First prepare an html file: test.html. It is not recommended to use Notepad to create the file. It is recommended to use Notepad to create and edit the file. Note that the encoding format is: UTF-8 None BOM format encoding, otherwise Chinese garbled characters will appear. The content is as follows:

    
        
    

    
        hello
    

Save the file to the desktop, right-click and select Google Chrome (or other browsers to open) to open it, and find that the English letters hello appear on the page. .

Four introduction methods

Inline

Through the style attribute of html Implementation, as shown below

//写在body标签中
行内式

embedded

Write the css style in the style tag and quote it in the body

//写在style标签中的css样式
p{
    color:blue;
}
//写在body标签中
嵌入式

Link style

This method is generally used to create a new css file on the desktop: test.css, the content is a css style

//写在test.css文件中
div{
    color:yellow;
}

Introduce the test.css file into test.html

//写在head标签中引入css文件，href属性中的为绝对路径，当前在同一级目录下

//写在body标签中
链接式

Imported

@import(url(demo.css))

Basically not used, because the page will load html first, and then load css, which will cause a delay in page style.

Create a demo.css file and write a css style

//写在demo.css文件中
h2{
    color:green;
}

Use @import method to import the demo.css file

//试验了一下，需要单独写在一个style中，

//写在body标签中
导入式

html page code

Page renderings

For more detailed HTML/CSS knowledge, please visit CSS video tutorial Column!

The above is the detailed content of How to add css style. For more information, please follow other related articles on the PHP Chinese website!