css嵌入页面方式有哪些?

css嵌入页面方式有哪些?下面本篇文章给大家介绍一下html页面里嵌入CSS的四种方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

在HTML中定义CSS的方式有:行内样式、内嵌式、连接式、导入式,下面通过实例为大家详细介绍下它们的特点

一、内嵌式

使用HTML的style元素,在文档中定义CSS样式。

<head> 
<style type="text/css"> 
h1{color:red} 
p{color:blue} 
</style> 
<head>

二、行内样式

每一个HTML元素都包含一个style属性,可以直接定义样式。该样式仅能用于该元素的内容,对于另一个同名的元素则不起作用。

<p style="color:#FFF;font-weight:bold;">内联样式</p>

三、连接式

在html的head中插入以下语句:

<link rel="stylesheet" href="css文件路径" type="text/css">

href中的是要插入的样式的css文件

通过连接式解决了多个html使用一个css样式的问题

四、导入式

head中插入style标签

<style type="text/css">
@import url=("css文件路径");
</style>

导入式一般不用

四种插入方式的优先级

若四种方式同时使用,那么他们都会生效果;

若碰到相同的属性,且都修改了同样属性,后定义的生效;

若内嵌与导入式放到一起,始终是内嵌式起作用;

如何选择使用内嵌式还是链接式

内嵌式虽然没有解决多个html页面服用一个css样式的问题 但是浏览器在加载的时候只需要加载这一个css样式,速度比较快

而链接式,若一个html页面用多个css样式,那么在浏览器加载的时候每个css文件都得单独下载,速度相对内嵌式比较慢

根据实际情况考虑,若追求的是速度,对代码复用问题不较真,推荐使用内嵌式

若追求的是代码的可服用,那么就得舍弃一点速度,来使用链接式来嵌入CSS样式。

更多web前端工程师相关知识,请查阅 HTML中文网 !!

以上就是css嵌入页面方式有哪些?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏