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

时间 2020-05-14

原文原文链接

学习是件有意思的事 & 持续的积累。css

本狸以前是作过产品啦，如今想学一学前端，实现一些本身的想法（虽然有在作，但很慢啦，由于本身缺少一个系统性的学习，总是返工）。以前的学习进度也有点缓慢，缺少自个人督促！所以作了这样一个几乎能够是说从0开始学前端的计划的100天计划。但愿天天记录本身的所学所得(便是是一点点也不要紧），做为本身的知识积累与沉淀，也把它当作一个持续的事情来坚持。I guess a hundred days is enough for me to do some small tricks lol.html

写在前面

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

什么是CSS？

CSS是层叠样式表（Cascading Style Sheets）的缩写，做用是为页面添加所须要的样式。若是把HTML理解为房子的结构好比窗户，门，桌子，那CSS就是墙纸，玻璃的颜色，桌布。学习

规则

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

p{
    background-color: red;
}

一个CSS是由选择器和声明块组成的。好比这里的p就是选择器，花括号包裹的就是声明块。code

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

场景

CSS应用于多个选择器时

h1,h2{
    background-color:red;
}

做用于类选择器时

如class="book"string

适用于类内全部元素

.land{
    background-color: red;
}

适用于类内的h1元素

h1.greenland{
    background-color:red;
}

做用于ID选择器

如id="book"产品

#book{
    background-color:red;
}

做用于子孙选择器

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

#Book p{
background-color:red;
}

使用的三种方式

最推荐——外链的方式

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

<head>
<title>
How to use css link
</title>
<link type="text/css" rel="stylesheet" href="../book/ibook.css">
</head>
复制代码

如下讲解各个的含义：

使用link元素链入外部信息
type="text/css"这个在H5中再也不须要，可不写
rel属性指定了HTML文件与所连接的文件之间的关系，在这里是一个样式表，因此是"stylesheet"
href标明了连接路径，在这里用的是相对路径。
link是一个void元素，因此没有结束标记。

内部样式表（head里放置）

<head>
<style> p{ color:red; } </style>
</head>
复制代码

内联样式

<p style="color:red;">
复制代码

注意点

.对应class,#对应id——能够记忆为有点累(类)
注意p元素不能包含块元素，只能包含内联元素
我理解，类选择器和子孙选择器的一个区别在于，子孙选择器更加有普遍的适用性，使用于能够用结构化的h1,p就能够表达样式了。

这几个注意点是我本身写代码的过程当中发现，因此仍是要多写啊，经过自个写来掌握知识！写着写着就发现问题了。

（吐槽一下，发布的时候添加标签怎么这么很差用？我没法自定义，查看已有的标签交互作的也让人难以理解...是打一个空格？并且怎么找到CSS标签，试了好几遍才能够emmm）