HTML中css样式如何调用?

在设计前端网页时,往往会将页面内容与样式进行分离,以便于管理。那么如何给枯燥的页面添加上生动的样式呢?我们就需要在html上调用css样式,方法共有四种。

行内样式表

在每个html标签上面设置一个属性 style,从而把css和html结合在一起

<div style="background-color:red">

这种方法只对标签内内容生效

内嵌样式表

将css写在<style>标签中,并放在<head>标签里面

<head>
    <style type="text/css">
div {
        background-color:green;
color: red;
    }
     </style>
</head>

导入样式表

在<style>标签里面使用语句 @import url(css文件的路径)

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

导入式会在整个页面装载完后再进行CSS样式装载,故有时会出现一开始没有样式,过一段时间样式才出现的情况。并且这种方式对浏览器兼容性较差,不推荐使用

链接样式表

使用头标签 link,引入外部css文件,最为常用的一种方式

<link rel="stylesheet" type="text/css" href="div.css" />

此处一般采用相对路径

优先级

既然引用方法那么多,那么总会有个优先级排行,一般情况下优先级排行为:

由上到下,由外到内。优先级由低到高

更多web前端知识,请查阅 HTML中文网 !!

以上就是HTML中css样式如何调用?的详细内容,更多请关注web前端其它相关文章!

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

评论 抢沙发

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

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

联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏