CSS 架构之 Base 层

Augus

关注

发布于: 刚刚

前言

其实总的来说，Base 层是分为两层。一层是 Generic 层，另一层就是 Base 层。

之前我们也说到过，Generic 层是通过引入normalize.css,重置浏览器默认样式。

而 Base 层呢，是在重置浏览器默认样式的基础上，对各类元素的重置样式进行补充。

Base 层

Generic 我们就不多赘述了。<br>在项目中，我们可以根据我们的需求，来定制化我们的 Base 层。比如说像链接的样式。我们就可以统一的修改，放在 Base 层中。

a {  color: $color-text-primary;  text-decoration: none;}

复制代码

亦或者图片的样式。

img {  width: 100%;  vertical-align: middle;}

复制代码

表单的样式。

input {  padding: 0;  outline: none;  border: none;}

复制代码

当然还有字体的样式等等。

@font-face {  font-family: 'siyuan';  src: url('~@/style/base/fonts/siyuan/siyuan.eot');  src:    url('~@/style/base/fonts/siyuan/siyuan.eot?#font-spider') format('embedded-opentype'),    url('~@/style/base/fonts/siyuan/siyuan.woff') format('woff'),    url('~@/style/base/fonts/siyuan/siyuan.ttf') format('truetype'),    url('~@/style/base/fonts/siyuan/siyuan.svg') format('svg');  font-weight: normal;  font-style: normal;}
@font-face {  font-family: 'feichi';  src: url('~@/style/base/fonts/feichi/feichi.eot');  src:    url('~@/style/base/fonts/feichi/feichi.eot?#font-spider') format('embedded-opentype'),    url('~@/style/base/fonts/feichi/feichi.woff') format('woff'),    url('~@/style/base/fonts/feichi/feichi.ttf') format('truetype'),    url('~@/style/base/fonts/feichi/feichi.svg') format('svg');  font-weight: normal;  font-style: normal;}
@font-face {  font-family: 'tuzi';  src: url('~@/style/base/fonts/tuzi/tuzi.eot');  src:    url('~@/style/base/fonts/tuzi/tuzi.eot?#font-spider') format('embedded-opentype'),    url('~@/style/base/fonts/tuzi/tuzi.woff') format('woff'),    url('~@/style/base/fonts/tuzi/tuzi.ttf') format('truetype'),    url('~@/style/base/fonts/tuzi/tuzi.svg') format('svg');  font-weight: normal;  font-style: normal;}

复制代码

好了，今天就到这里了，see you！！

发布于: 刚刚阅读数: 2

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

发布

暂无评论

创作场景

CSS 架构之 Base 层

前言

Base 层

Augus

评论