上一篇
有生之年系列：武炼巅峰网络小说大结局
CSS3 :root 结合 var 函数，定义css的主题色调
设计一个网站，功能强不强大是其次，网站的美观才是首位，一个网站首次需要明确个主题色调。想起初次接触网页开发，对于没有美术基础，往往想一出是一出，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已成为过去。如何决择写法，公司的按需求，个人按自己喜好。
相关文章Related Articles
文章评论0 records
最新
最早
最新评论Latest comments