How to reference CSS into HTML-CSS Tutorial-php.cn

How to reference CSS into HTML

php中世界最好的语言

Release： 2017-11-21 17:24:33

Original

2834 people have browsed it

There are four ways to reference css style sheets. Use css styles directly in divs to create div+css web pages, use the style built-in style in html, use @import to reference external CSS files, and use link to reference external CSS files. Each has advantages and disadvantages, so today we will explain in detail the differences between these four methods.

Using different methods to reference css style sheets will ultimately achieve the same effect, but using css files applied in different methods will affect SEO and web page opening speed and efficiency. Next, we will explain the examples of how to reference CSS in HTML one by one

1. Embed CSS styles directly in HTML tag elements, such as

2. Insert the style statement code in the head part of the html header as follows:

<style type="text/css"> 
<!-- 
.ceshi {font-size:14px; color:#FF0000;}/*这里是设置CSS的样式内容*/ 
--> 
</style>

Copy after login

3. Use @import to reference external CSS files

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>css引用方法实例</title> 
<style type="text/css"> 
<!-- 
@import url(wcss.css);/*这里是通过@import引用CSS的样式内容*/ 
--> 
</style> 
</head> 
 
<body> 
<div class="ceshi">我是测试内容</div> 
 
</body> 
</html>

Copy after login

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

It can be seen that there are similarities between using this method and using the built-in reference css style sheet method. Both need to use the style tag in the head of html to reference external css.

4. Use link to call external css files

Place To call the external wcss.css file to implement html reference css file

This method does not require the style tag, but directly refers to the 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 smaller than directly adding css styles. , because search engine spiders do not crawl css files when crawling web pages, which results in very few html source codes, making spiders crawl faster and process less, which increases the weight of this web page and is beneficial to rankings.

2. Saving HTML allows the browser to separate threads when downloading web pages, just like loading a page and having two lines opening a page at the same time, making the web page open extra fast. (When the user browses this webpage, the html source code and css file are downloaded at the same time, making it faster)

3. It is convenient to modify the style of the webpage. You only need to modify the css style to modify the art style of the webpage. If on the website In this method of the project, since the entire site uses a common CSS style, it is quick and convenient to modify the style of the entire site.

These are the four ways to reference css style sheets. Friends who need them can save them. Please also continue to pay attention to other updates on this site.

Related recommendations:

How to learn Div and CSS

How to use CSS border

How to make rounded corners in CSS3

The above is the detailed content of How to reference CSS into HTML. For more information, please follow other related articles on the PHP Chinese website!