写在前面
算是一个总结，主要学习材料是《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
网友评论