首页/ 填坑/ 文章详情

CSS3 :root 结合 var 函数,定义css的主题色调

CSS3 :root var 主题 色调 发布于 10-15

设计一个网站,功能强不强大是其次,网站的美观才是首位,一个网站首次需要明确个主题色调。想起初次接触网页开发,对于没有美术基础,往往想一出是一出,css样式写的很随意。渐渐地对网站主题色调有了基础的把控,想统一修改,才发现这是个大的工程。

镇定思痛后,总结经验,定义基础的全局css样式:

CSS.ft-size { font-size:14px;}
.ft-color: {color: #4c4948; }
.bg-color { background-color: #F9F9F9;} 

添加时,只需要HTML标签额外添加以上样式。优点:兼容所有的浏览器。缺点:注意层次覆盖优先级,比如:#样式无法被覆盖。

或许代码写多了,厌倦了这种写法,想着能不能定义变量,直接修改参数。直到css3出现,:root 结合 var函数写法。

CSS:root {
    --ft-size: 14px;
    --ft-color: #4c4948;
    --bg-color: #F9F9F9;
}

html,body {
    color: var(--ft-color);
    font-size: var(--ft-size);
    background-color: var(--bg-color);
} 

var函数调用:root事行声名的变量名称,直接修改样式。优点:简单,易用。缺点:需要一定版本的浏览器支持。

浏览器支持:

Chromes IE Firefox Safari Opera
49.0 15.0 31.0 9.1 36.0

※ 如今外部环境已有很大的变化,兼容IE6已成为过去。如何决择写法,公司的按需求,个人按自己喜好。

文章评论0 records

最新 最早

0

最新评论Latest comments

big2catbig2cat 08-27 16:11
然而没什么用,smartpss不兼容老录像机,就算能看回放,很多时间点在回放里也看不到
HentaiCatHentaiCat 2020-12-30 10:22
考科目二全程很紧张,考了三次才过,有次侧方入库直接pass,100分扣完,呜呜呜~
猫猫酱猫猫酱 2020-11-12 10:56
一入多肉深似海,说多都是泪
soulkunsoulkun 2020-11-05 15:54
IconFont的图标真的很好用!!!
无限链霉球菌无限链霉球菌 2020-11-03 11:41
药店,了解一下(`・ω・´)