1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > CSS:外部样式表/内部样式表/内联样式

CSS:外部样式表/内部样式表/内联样式

时间:2020-12-04 03:42:54

相关推荐

CSS:外部样式表/内部样式表/内联样式

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

本文代码整理自w3school:

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

html文件:

<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>

CSS样式,baseStyle.css:

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

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

<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>

(3)内联样式(一般不建议使用),指在某个html内指定改标签内容的样式。由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。