CSS:外部样式表/内部样式表/内联样式_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:52:51
Original
2155 Leute haben es durchsucht

在html中,引用CSS样式有3中方式:外部样式表,内部样式表,内联样式。

本文代码整理自w3school:http://www.w3school.com.cn

(1)外部样式表,指在html文件的head标签中,使用link引用另一个css文件中定义的样式。如果某个样式表需要被使用许多次,使用外部样式表是最好的选择。

html文件:

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

h1 {color:red}h2 {color:green}h3 {color:blue}p {color:gray}
Nach dem Login kopieren

(2)内部样式表,指在html文件的head标签内声明样式。当单个文档需要特殊的样式时,就应该使用内部样式表。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="Content-Language" content="zh-cn"><title>内部样式表</title><!--内部样式表--><style type="text/css">h1 {color:red}h2 {color:green}h3 {color:blue}p{color:gray}</style><h1>h1级别的标题:红色</h1><h2>h2级别的标题:绿色</h2><h3>h3级别的标题:蓝色</h3><p>这是一个段落:灰色</p><br><br>
Nach dem Login kopieren
(3)内联样式(一般不建议使用),指在某个html内指定改标签内容的样式。由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。

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


Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage