抑郁症健康,内容丰富有趣,生活中的好帮手!
抑郁症健康 > html标签引入css样式的四种方式

html标签引入css样式的四种方式

时间:2022-10-23 05:40:15

相关推荐

总览

内联样式表嵌入样式表外联样式表导入样式表

一、内联样式表

内联式(Inline Style):也叫内嵌式或行内式,在html代码中嵌入css样式,只对当前标签起作用。基本语法:

缺点:只能对一组标签进行样式渲染,导致css程序多,html与css耦合,影响开发效率与执行效率。(不推荐使用

二、嵌入样式表

嵌入式(Inline Style):也叫页内样式,在网页上使用style标签包裹样式代码。基本语法

缺点:使html文件中包含大量css程序,页面结构样式耦合,不利于维护。(不推荐使用

三、外联样式表

外联式(Linking):也叫外部样式,将样式文件独立的编写在样式文件中,在html中显示的声明引入样式文件。(建议使用)外部文件:以css为后缀的文件名,内容为样式程序。

引入css文件声明

<head>……<link href="css/04test.css" rel="stylesheet" type="text/css" />……</head>

link元素:连接元素,是head标签的子标签。 href:设定引入外部文件的路径url。type:设置或获取对象的 MIME 类型。

四、导入样式表

导入式( import ):在css编写容器中使用@import导入外部css文件。

<style type="text/css">@import url(“css/04test.css");</style>

@import:导入样式的规则关键字。 url(“css路径”):导入外部css文件的路径。 也可以在外部文件中导入css文件。

五、链接式与导入式的区别:

<link/>标签属于XHTML(html的过渡版本,但被所有浏览器兼容),

@import是属于CSS2.1,IE4无法兼容。

使用<link/>链接的CSS文件先加载到网页当中,进行编译显示

使用@import导入的CSS文件,客户端显示HTML结构CSS文件加载到网页当中,因此会有短时间无样式显示。

建议:使用link引入外部css文件

六、优先级

内联样式表(标签内部)>嵌入样式表(当前文件中)>外部样式表(外部文件中)。

如果觉得《html标签引入css样式的四种方式》对你有帮助,请点赞、收藏,并留下你的观点哦!

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