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

本文章由javascript技术分享原创和收集