100天学习前台计划 DAY 0 | CSS基础

写在前面

算是一个总结，主要学习材料是《HF》。这本书的好处在于十分的详实，把基础给打的很透很扎实。之前还看过CS50的课，那个课的优势在于给你一种思维，方便了解整个是如何运作的，但进度很快，讲得比较笼统。还跟着b站的课程学了一点，这个课主要是告诉你怎样用的，但对背后的原理讲得比较浅。综上，更推荐HF来入门。

什么是CSS？

CSS是层叠样式表（Cascading Style Sheets）的缩写，作用是为页面增加所需要的样式。假如把HTML了解为房子的结构比方窗户，门，桌子，那CSS就是墙纸，玻璃的颜色，桌布。

规则

下面举例说明基本的规则：

p{background-color: red;}

一个CSS是由 选择器 和 公告块 组成的。 比方这里的p就是选择器，花括号包裹的就是公告块。

公告块内又是由 属性 和 值 组成的，在这里，属性是background-color,值是red。

场景

CSS应用于多个选择器时

h1,h2{background-color:red;}

作用于类选择器时

如class=”book”

适用于类内所有元素

.land{background-color: red;}

适用于类内的h1元素

h1.greenland{background-color:red;}

作用于ID选择器

如id=”book”

#book{background-color:red;}

作用于子孙选择器

如div id=”Book”,要选择book id中的段落。

#Bookp{background-color:red;}

使用的三种方式

最推荐——外链的方式

这样即可以把HTML和CSS分开，让HTML好好干结构的事，CSS好好负责样式的事，这样也非常方便修改，外链的话，在HTML页面中只用增减一行link代码，也十分方便后期维护。不然就要每个页面改一下，想象一下有几十个页面，那可太麻烦啦。 HOW TO: 在html文件中添加这样一个代码：

How to use css link复制代码

以下讲解各个的含义：

使用link元素链入外部信息

type=”text/css”这个在H5中不再需要，可不写

rel属性指定了HTML文件与所链接的文件之间的关系，在这里是一个样式表，所以是”stylesheet”

href标明了链接路径，在这里用的是相对路径。

link是一个void元素，所以没有结束标记。

内部样式表（head里放置）

p{color:red;}复制代码

内联样式

复制代码

注意点

.对应class,#对应id——可以记忆为 有点累(类)

注意p元素不能包含块元素，只能包含内联元素

我了解，类选择器和子孙选择器的一个区别在于，子孙选择器更加有广泛的适用性，使用于可以用结构化的h1,p即可以表达样式了。

这几个注意点是我自己写代码的过程中发现，所以还是要多写啊，通过自个写来掌握知识！写着写着就发现问题了。

（吐槽一下，发布的时候增加标签怎样这么不好用？我无法自己设置，查看已有的标签交互做的也让人难以了解…是打一个空格？而且怎样找到CSS标签，试了好几遍才可以emmm）

最后，小编还给大家准备了web前台的学习资料

小伙伴们，加油！！！

前台学习资料大礼包+教程+源码等 限时免费分享

加前台学习扣扣群：753822761