Introduction to several ways to introduce CSS in HTML

Introduction to several ways to introduce CSS in HTML

Using different methods to reference CSS style sheets will ultimately achieve the same effect, but using different methods to apply CSS files will affect SEO and the speed and efficiency of web page opening.

The html reference css method is as follows

Next we will explain the examples of HTML referencing CSS methods one by one

1. Embed CSS styles directly in HTML tag elements

For example, <div style="font-size:14px; color:#FF0000;">I am div css test content-www.jb51.net support</div> The effect is as follows

2. Style declaration in the head section of HTML

The insertion code is as follows:

<style type="text/css"> 
<!-- 
.ceshi {font-size:14px; color:#FF0000;}/*Here is the CSS style content*/ 
--> 
</style>

The specific method is as follows:

3. Use @import to reference external CSS files

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>123WORDPRESS.COM test</title>
<style type="text/css"> 
<!-- 
@import url(wcss.css);/*Here is the CSS style content referenced by @import*/ 
--> 
</style> 
</head>
<body>
<div class="ceshi">I am div css test content-www.jb51.net support</div>
</body>
</html>

Code in Wcss.css file.ceshi {font-size:14px; color:#FF0000;}

The effect is as follows:

It can be seen that using this method is similar to using the built-in CSS style sheet method, both of which require using the style tag in the HTML head to reference external CSS.

4. Use link to call external css files

Place <link rel="stylesheet" href="wcss.css" type="text/css" /> in the head to call the external wcss.css file to implement HTML reference CSS file

Details as shown below

This method does not require a style tag, but directly references an external style by linking a style. It is generally recommended to use link to reference external CSS style methods.

Advantages of using link to reference external CSS

1. It is beneficial to SEO. Using this method to reference external CSS files will make the source code of the HTML page much less than directly adding CSS styles. Because search engine spiders do not crawl CSS files when crawling web pages, this makes the HTML source code very small, allowing spiders to crawl faster and process less, increasing the weight of this web page, which is beneficial to ranking.
2. Saving HTML allows the browser to download web pages in separate threads, just like loading a page and opening a page in two threads at the same time, making the web page open very quickly. (When users browse this webpage, the HTML source code and CSS files are downloaded at the same time, making it faster)
3. It is convenient to modify the style of a web page. You only need to modify the CSS style to modify the art style of the web page. If this method is used in a website project, since the entire site applies a common CSS basic style, it is quick and convenient to modify the style of the entire site.

Here are some additional

In HTML, there are three main ways to introduce CSS: inline, embedded, imported, and linked.
Inline style: that is, setting the CSS style in the style attribute of the tag. This method does not essentially reflect the advantages of CSS, so it is not recommended.

example:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Demo</title>
</head>
<body>
<h1 style=color:white;background-color=blue;>
This is a line of Text.
</h1>
</body>
</html>

Embedded: Embedded writes the settings of various elements in the page between <head> and </head>. This method is very convenient for a single web page. However, for a website with many pages, if each page sets its own style in an embedded manner, the great advantages brought by CSS will be lost. Therefore, a website usually writes an independent CSS style sheet file and introduces it into the HTML document using one of the following two methods.
example:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Demo</title>
<style type="text/css">
h1{
       color:white;
       background-color:boue;
       }
</style>
       </head>
       <body>
<h1>This is a line of Text.</h1>
<h1>This is another line of Text.</h1>
       </body>
       </html>

Import and link: The purpose of both import and link is to introduce an independent CSS file into the HTML file, and there are corresponding differences between the two.
In fact, the biggest difference between the two is that the link method uses HTML tags to introduce external CSS files, while the import method uses CSS rules to introduce external CSS files. Therefore their syntax is also different.
If you use the link style, you need to use the following statement to import the external CSS file.

<link href="mystyle.css" rel="stylesheet" type="text/css" />

If you use the import method, you need to use the following statement.

<style type="text/css">
@import "mystyle.css";
</style>

In addition, the display effects after using these two methods are slightly different. When using the link method, the CSS file will be loaded before the main part of the device page, so that the displayed web page will have a style effect from the beginning. When using the import method, the CSS file will be loaded after the entire page is loaded. For some browsers, in some cases, if the web page file is large, the unstyled page will be displayed first, and then the style setting effect will appear after flashing. From the viewer's perspective, this is a drawback of using the import method. For some larger websites, you may want to categorize all CSS styles into several CSS files for ease of maintenance. In this case, if you use link-style import, you will need several statements to import the CSS files separately. If you want to adjust the classification of the CSS file, you need to adjust the HTML file at the same time. This is a disadvantage for maintenance work. If you use the import method, you can only introduce one main CSS file, and then import other independent CSS files in this file; the link method does not have this feature.

Therefore, my suggestion is that if you need to import a CSS file, use the link method; if you need to import multiple CSS files, first use the link method to import a "directory" CSS file, and then use the import method to import other CSS files in this "directory" CSS file.

If you want to use JavaScript to dynamically decide which CSS file to import, you must use the link method to achieve it.

<<:  Example of MySQL slow query

>>:  Docker renames the image name and TAG operation

Recommend

Detailed explanation of Docker Swarm service orchestration commands

1. Introduction Docker has an orchestration tool ...

Getting Started with Nginx Reverse Proxy

Table of contents Overview The role of reverse pr...

Reasons and solutions for failure of dynamically added routing pages in Vue when refreshing

Table of contents Problem Description Scenario In...

Detailed explanation of the solution to permission denied in Linux

Permission denied: The reason for this is: there ...

How to get datetime data in mysql, followed by .0

The data type of MySQL is datetime. The data stor...

Implementation of Docker packaging image and configuration modification

I have encountered many problems in learning Dock...

How to prevent computer slowdown when WIN10 has multiple databases installed

Enable the service when you need it, and disable ...

MySQL 5.7.29 + Win64 decompression version installation tutorial with pictures and text

Download the official website Choose the version ...

HTML+CSS+JS to implement the Don't Step on the Whiteboard game

Table of contents Background 1. Thought Analysis ...

Steps to create a WEBSERVER using NODE.JS

Table of contents What is nodejs Install NodeJS H...

Pagination Examples and Good Practices

<br />Structure and hierarchy reduce complex...

Detailed explanation of several ways to export data in Mysql

There are many purposes for exporting MySQL data,...

Summary of Vue 3 custom directive development

What is a directive? Both Angular and Vue have th...

Docker generates images through containers and submits DockerCommit in detail

Table of contents After creating a container loca...

A brief analysis of Linux network programming functions

Table of contents 1. Create a socket 2. Bind sock...