css内联样式可以改么?

css内联样式可以改。下面本篇文章给大家介绍一下修改内联样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

以前写html有个不好的习惯,就是把样式添加到标签内,虽然写的时候觉得方便,但之后维护起来真心麻烦,一个样式要改,所有页面跟着改,当时没有想到其他简便的方法,就手动更改。

因为内联样式优先级高,再引入css覆盖样式不起作用,后来才发现有能覆盖掉内联样式的方法。就是加上!important,它可以改变样式优先级,降低内联样式的优先级。【相关推荐:css在线手册

如下代码没有加上!important,页面显示的是100*100的色块,内部样式没生效。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例</title>
<style type="text/css">
div{
background-color: red;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div style="width: 100px;height: 100px;"></div>
</body>
</html>

加上之后内联样式被内部样式替代了。也就达到不用修改原来代码的目的了,不过还是要说,尽量样式不要写在标签内。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例</title>
<style type="text/css">
div{
background-color: red;
width: 50px !important;
height: 50px !important;
}
</style>
</head>
<body>
<div style="width: 100px;height: 100px;"></div>
</body>
</html>

还有一种方法,使用js来实现的,获取元素,然后更改元素的样式,$("div").css("width":"50");

用js这个方法不推荐,比较麻烦,还是用css好

想要了解更多相关知识,可访问 前端学习网站!!

以上就是css内联样式可以改么?的详细内容,更多请关注web前端其它相关文章!

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

评论 抢沙发

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

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

联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏