CSS: external stylesheet/internal stylesheet/inline style_html/css

CSS: external stylesheet/internal stylesheet/inline style_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Release： 2016-06-24 11:52:51

Original

2195 people have browsed it

In HTML, there are three ways to reference CSS styles: external style sheets, internal style sheets, and inline styles.

The code of this article is compiled from w3school: http://www.w3school.com.cn

(1) External style sheet, which refers to using link in the head tag of the html file Reference a style defined in another css file. If a style sheet needs to be used many times, using an external style sheet is the best option.

html file:

<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-cn" /><title>引用外部css样式</title><!--外部样式表--><head><link rel="stylesheet" type="text/css" href="css/baseStyle.css"></head><body><h1>h1级别的标题：红色</h1><h2>h2级别的标题：绿色</h2><h3>h3级别的标题：蓝色</h3><p>这是一个段落：灰色</p></body></html>

Copy after login

CSS style, baseStyle.css:

h1 {color:red}h2 {color:green}h3 {color:blue}p {color:gray}

Copy after login

(2) Internal style sheet refers to declaring styles within the head tag of the html file. Internal style sheets should be used when a single document requires special styling.

<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-cn" /><title>内部样式表</title><!--内部样式表--><head><style type="text/css">h1 {color:red}h2 {color:green}h3 {color:blue}p{color:gray}</style></head><body><h1>h1级别的标题：红色</h1><h2>h2级别的标题：绿色</h2><h3>h3级别的标题：蓝色</h3><p>这是一个段落：灰色</p><br/><br/></body></html>

Copy after login

(3) Inline style (generally not recommended) refers to specifying the style of tag content within a certain html. Inline styles lose many of the advantages of style sheets by mixing presentation with content.

<!--内联样式--><!--不带下划线的链接--><a href="http://www.baidu.com" style="text-decoration:none" target="_blank">这是一个不带下划线的链接</a>

Copy after login