CSS基础知识

阿祎啊
119 阅读2分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

网页的布局、动画往往离不开CSS的介入，那什么是CSS？作为一个小白应该从哪开始入手学起呢？框架中的CSS是什么样子的（以VUE为例）呢？本文将解释以上几个问题。

什么是CSS

CSS全称是Cascading Style Sheets ，中文为叠层样式表。如果说HTML是页面的“骨架”，那CSS绝对可以称得上是页面的“血肉”。我们可以通过CSS样式来准确的控制网页布局、元素大小、颜色、位置等。

推荐的学习网站和书籍

其中菜鸟教程提供了可以自己编辑尝试的编译器，比较方便。

众所周知，b站是一个学习app，这个老师讲的我还是比较喜欢的，还有一些小案例可以供大家练手。b站还有很多这样的基础教学视频，可以按需搜索观看。

  • 《CSS权威指南》共两册

个人感觉比较适合已经对CSS有基本了解的人读，作为一个工具书，里面的内容真的是非常全面了，内容更侧重于实现的原理，所以显得有些枯燥和晦涩。

框架中的HTML（以VUE为例）

vue中的css写在Style标签当中，书写规范和平时写的没有区别，个人比较喜欢用Less或者Sass预编译处理器，嵌套用起来太爽了，确实提高了开发效率。

举个小例子（less为例）

<div class="father1">
    <div class="son">son1</div>
</div>
<div class="father2">
    <div class="son">son2</div>
</div>

.father1 {
    son {
        color:orange
    }
}
.father2 {
    son {
        color:skyblue
    }
}

关于less和sass的使用，如果使用的框架，会在创建项目时让你选择less或者sass，只需要把标签写成<style lang="less"></style>或者<style lang="sass"></style>即可。

在非框架当中使用less的话可以下载vscode插件Easy LESS，使用可参考www.cnblogs.com/fsg6/p/1359… ；使用sass可以下载Easy Sass,使用可参考www.cnblogs.com/cdj61/p/146…

avatar
文章
阅读
粉丝