目录
预备知识与后续知识及项目案例
[HTML入门与进阶以及HTML5]
[CSS]
[JS-上]
[JS-下]
[jQuery]
[Node.js + Gulp 知识点汇总]
[MongoDB + Express 入门及案例代码]
[Vue项目开发-仿蘑菇街电商APP]
一、CSS简介
CSS是什么？CSS，即“Cascading Style Sheet（层叠样式表）”，是用来控制网页的外观的一门技术。
我们知道，HTML、CSS和JavaScript是前端技术中最核心的三个元素。HTML控制网页的结构，CSS控制网页的外观，而JavaScript控制网页的行为。我们已经在HTML入门教程中的前端技术简介这一节详细讲解了这三者的区别，大家可以回去查看一下。
HTML、CSS和JavaScript的关系如下：
“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。”
二、内容
1.css的引入方式
在HTML中引入CSS共有3种方式：
（1）外部样式表； （2）内部样式表； （3）内联样式表；
下面我们详细为大家介绍这3种CSS引入方式。
一、CSS的3种引用方式
1、外部样式表
外部样式表是最理想的CSS引用方式，在实际开发当中，为了提升网站的性能和维护性，一般都是使用外部样式表。所谓的“外部样式表”，就是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。 当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用样式表，你就可以通过更改一个CSS文件来改变整个网站的外观。 外部样式表在单独文件中定义，并且在标签对中使用link标签来引用。 举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--在HTML页面中引用文件名为index的css文件-->
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div></div>
</body>
</html>说明：外部样式表都是在head标签内使用link标签来引用的。
2、内部样式表
内部样式，指的就是把CSS代码和HTML代码放在同一个文件中，其中CSS代码放在标签对是放在标签对内的。 举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--这是内部样式表，CSS样式在style标签中定义-->
<style type="text/css">
p{color:Red;}
</style>
</head>
<body>
<p>绿叶学习网</p>
<p>绿叶学习网</p>
</body>在浏览器预览效果如下：
说明：
对于内部样式表，CSS样式在<style>标签内定义，而<style>标签必须放在<head>标签内。
3.内联样式表
内联样式表，也是把CSS代码和HTML代码放在同一个文件中，但是跟内部样式表不同，CSS样式不是在<style></style>标签对中定义，而是在标签的style属性中定义。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p style="color:Red; ">绿叶学习网</p>
<p style="color:Red; ">绿叶学习网</p>
<p style="color:Red; ">绿叶学习网</p>
</body>
</html>在浏览器预览效果如下：
2.元素的id和class
id和class是HTML元素中两个最基本的公共属性。
一、元素的id属性
id属性被赋予了标识页面元素的唯一身份。如果一个页面出现了多个相同id属性取值，CSS选择器或者JavaScript就会因为无法分辨要控制的元素而最终报错。
举例：
| 1 2 3 4 5 6 7 8 9 10 11 |
|
说明：
上面HTML代码是错误的，因为在同一个HTML页面中，不允许出现两个相同的id。不过要注意一下，在不同页面是可以出现相同id的元素。
二、元素的class属性
class，顾名思义，就是“类”。它采用的思想跟其他C、Java等编程语言的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同的class具有相同的CSS样式。
如果你要为两个元素或者两个以上元素定义相同的样式，建议使用class属性。
举例：
| 1 2 3 4 5 6 7 8 9 10 11 |
|
说明：
这段HTML代码是正确的，因为在同一个HTML页面中，允许相同的元素或者不同的元素设置相同的class属性，以便我们可以统一对具有相同的class属性的元素定义相同的CSS样式。
id和class就像你的身份证号和姓名，身份证号是全国唯一的，id号也就是唯一的，class（类名）就是姓名，两个人的姓名就有可能一样。
此外，需要注意一下：
- （1）一个标签可以同时定义多个class；
- （2）id也可以写成name，区别在于name是HTML中的标准，而id是XHTML中的标准，现在网页的标准都是使用id，所以大家尽量不要用name属性；
3、CSS选择器
我们先看一段代码：
| 1 2 3 4 5 6 7 8 9 10 11 |
|
在浏览器预览效果如下：
如果我们只想要第二个div文本颜色为红色，怎么办呢？我们必须通过一种方式来“选中”第二个div（因为其他的div不能选中），然后把它的CSS属性颜色color改为红色，这样才行。像这种把某一个你想要的标签选中的方式就是所谓的“选择器”，也就是说选择器就是一种选择元素的方式。
选择器，说白了就是用一种方式把你想要的那一个标签选中！把它选中了，你才能操作这个标签的CSS样式。这样够简单了吧。CSS有很多把你所需要的标签选中的方式，这些不同的方式就是不同的选择器。
选择器的不同，在于它选择方式不同，但是他们的目的都是相同的，那就是把你需要的标签选中，然后让你定义该标签的CSS样式。当然，你也有可能会用某一种选择器代替另一种选择器，这仅仅是由于选择方式不一样罢了，目的还是一样的。
CSS选择器的格式：
| 1 2 3 4 5 6 |
|
一、基本选择器
1、元素选择器
元素选择器，就是“选中”相同的元素，然后对相同的元素设置同一个CSS样式。
语法：
举例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
在浏览器预览效果如下：
分析：
“div{color:red}”表示把页面所有的div元素选中，然后为所有的div元素设置颜色color为红色。
在这里我们可以看出，元素选择器就是选择相同的元素，而不会选择其他元素，例如这段代码中的p元素和span元素就没有被选中，因此它们的内容就没有变成红色。
2、id选择器
我们可以为元素设置一个id，然后针对这个id的元素进行CSS样式操作。注意，在同一个页面中，不允许出现两个相同的id，这个就像没有哪两个人的身份证号是相同的道理一样。
语法：
说明：
id名前面必须要加上前缀“#”，否则该选择器无法生效。id名前面加上“#”，表明这是一个id选择器。
举例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
在浏览器预览效果如下：
分析：
“#lvye{color:red;}”表示选中id为lvye的元素，然后为这个元素设置CSS属性“color:red;”。
选择器为我们提供了一种选择方式。如果我们不使用选择器，就没办法把第二个div选中。
3、class选择器
class选择器，也就是“类选择器”。我们可以对“相同的元素”或者“不同的元素”设置一个class（类名），然后针对这个class的元素进行CSS样式操作。
语法：
说明：
class名前面必须要加上前缀“.”（英文点号），否则该选择器无法生效。类名前面加上“.”，表明这是一个class选择器。
举例1：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
在浏览器预览效果如下：
分析：
“.lv{color:red;}”表示选中class为lv的所有元素，然后为这些元素设置CSS属性“color:red;”。
p元素和span元素是两个不同的元素，但是我们可以为这两个不同的元素设置相同的class，这样就可以同时为这两个不同的元素设置相同的CSS样式了。
举例2：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
在浏览器预览效果如下：
分析：
虽然这个HTML页面有3个div元素，但是我们为前两个div元素设置相同的class，然后设置相同class的元素颜色为红色。因此，第3个div层内容不会变成红色，因为它不属于class="lv"，它没有被“选中”。
4、子元素选择器
子元素选择器，就是选中某个元素下的子元素，然后对该子元素设置CSS样式。
语法：
说明：
父元素与子元素必须用空格隔开，从而表示选中某个元素下的子元素。
举例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
在浏览器预览效果如下：
分析：
“#father1 div{…}”表示选择“id为father1的元素”下的所有div元素；
“#father2 #p1{…}”表示选择“id为father2的元素”下的子元素，其中子元素的id为#p1。因为“id为father2的元素”下的第2个p元素没有被选中，所以第2个p元素内容没有变成红色。
5、相邻选择器
相邻选择器，就是选中该元素的下一个兄弟元素，在这里注意一点，相邻选择器的操作对象是该元素的同级元素。
语法：
举例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
在浏览器预览效果如下：
分析：
“#lv+div{…}”表示选择“id为lv的元素”的相邻的下一个兄弟元素div，也就是第3个div元素。
6、群组选择器
群组选择器，就是同时对几个选择器进行相同的操作。常常，我们的CSS 样式中会有好几个地方需要使用到相同的设定时，一个一个分开写会是一件满累人的工作，重覆性太高且显得冗长，更不好管理....在CSS 语法的基本设定中，就可以把这几个相同设定的选择器合并在一起，原本可能是写了7~8 行相同的语法，合在一起后就只要短短的一小行，怎么看都让人心旷神怡啊~
语法：
说明：
对于群组选择器，两个选择器之间必须用“,”（英文逗号）隔开，不然群组选择器无法生效。
举例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
在浏览器预览效果如下：
分析：
“h3,div,p,span{color:red;}”表示选中所有的h3元素、div元素、p元素和span元素，然后设置这些元素的字体颜色为red。
| 1 2 3 |
|
其实上面这段代码等价于以下代码：
| 1 2 3 4 5 6 |
|
现在大家知道使用群组选择器的效率有多高了吧！
4、文本样式总结
大家可以对着这张图，来想一下相应的CSS属性叫什么。
| 属性 | 说明 |
|---|---|
| font-family | 字体类型 |
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体斜体 |
| color | 颜色 |
一、字体类型font-family
语法：
font-family:字体名;
说明：
字体名指的是“微软雅黑”、“宋体”、“Times New Roman”等。
举例：“font-family:微软雅黑;”
二、字体大小font-size
语法：
font-size:像素值;
说明：
初学者尽量使用像素来作为单位，因此我们不会在初学者阶段介绍太多的其他单位，比如百分比、em等。
举例：“font-size:15px;”
三、字体颜色color
语法：color:关键字/颜色值;
说明：
color共有2种取值，一种是关键字取值，例如“color:red;”；另外一种是十六进制颜色值，例如“color:#F1F1F1;”。对于十六进制颜色值，我们可以使用绿叶学习网的“在线调色板”选取你喜欢的颜色。
举例：“color:blue;”
四、字体粗细font-weight
语法：
font-weight:取值;
说明：
对于中文网页来说，font-weight属性一般仅用到bold、normal这两个属性值完全就可以了，粗细值不建议使用数值（100~900）。
举例：“font-weight:bold;”
五、字体斜体font-style
在CSS中，使用font-style属性来定义字体倾斜效果
语法：
font-style:取值;
说明：
font-style属性的取值如下表：
| font-style属性值 | 说明 |
|---|---|
| normal | 默认值，正常体 |
| italic | 斜体，这是一个属性 |
| oblique | 将字体倾斜，将没有斜体变量（italic）的特殊字体，要应用oblique |
举例：“font-style:italic;”
六、CSS注释
语法：
/*注释的内容*/
说明：
“/*”表示注释的开始，“*/”表示注释的结束。
5、文本样式总结
一、CSS段落属性
| 属性 | 说明 |
|---|---|
| text-decoration | 下划线、删除线、顶划线 |
| text-transform | 文本大小写 |
| font-varient | 将英文文本转换为“小型”大写字母 |
| text-indent | 段落首行缩进 |
| text-align | 文本水平对齐方式 |
| line-height | 行高 |
| letter-spacing | 字距 |
| word-spacing | 词距 |
1、text-decoration
在CSS中，使用text-decoration属性来定义字体下划线、删除线和顶划线。
语法：
text-decoration:属性值;
说明：
text-decoration属性取值如下表：
| text-decoration属性值 | 说明 |
|---|---|
| text-decoration | 下划线、删除线、顶划线 |
| none | 默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式 |
| underline | 下划线 |
| line-through | 删除线 |
| overline | 顶划线 |
使用“text-decoration:none”这个属性值可以去除a标签的默认样式。
学了这个属性之后，我们应该摒弃HTML入门教程中学习到的<s>标签（删除线）和<u>标签（下划线）。
2、text-transform
在CSS中，使用text-transform属性来转换文本的大小写，这个是针对英文而言，因为中文不存在大小写之分。
语法：
text-transform:属性值;
说明：
text-transform属性取值如下表：
| text-transform属性值 | 说明 |
|---|---|
| none | 默认值，无转换发生 |
| uppercase | 转换成大写 |
| lowercase | 转换成小写 |
| capitalize | 将每个英文单词的首字母转换成大写，其余无转换发生 |
3、font-variant
使用font-variant属性只有一个作用：把文本设置成小型大写字母，这也是针对英文而言，因为中文不存在大小写之分。
语法：
font-variant：normal/small-caps;
说明：
font-variant属性取值如下表：
| font-variant属性值 | 说明 |
|---|---|
| normal | 默认值，正常效果 |
| small-caps | 小型大写字母的字体 |
4、text-indent
我们可以使用CSS的text-indent属性来控制文本首行的缩进。
语法：
text-indent:像素值;
说明：
在CSS初学阶段，全部都是使用像素作单位，在CSS进阶阶段我们会深入讲解其他CSS单位
5、text-align
在CSS中，使用text-align属性控制文本的水平方向的对齐方式：左对齐、居中对齐、右对齐。
语法：
text-align:属性值;
说明：
text-align属性取值如下表：
| text-align属性 | 说明 |
|---|---|
| left | 默认值，左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
text-align属性只能针对文本文字和<img>标签，对其他标签无效。
6、line-height
line-height属性指的是行高，而不是行间距。
语法：
line-height:像素值;
说明：
在CSS初学者阶段，我们都是采用像素做单位。
7、letter-spacing
语法：
letter-spacing:像素值;
说明：
letter-spacing控制的是字间距，每一个中文文字作为一个“字”，而每一个英文字母也作为一个“字”！大家要细心留意一下。
默认情况下，letter-spacing我们几乎都用不上，我们直接采用浏览器默认样式就可以了。大家完全可以忽略掉这个属性。
8、word-spacing
语法：
word-spacing:像素值;
说明：
定义词间距，以空格为基准进行调节，如果多个单词被连在一起，则被word-spacing视为一个单词；如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing属性此时有效。
6、边框样式
一、边框属性
要设置一个元素的边框必须要设置以下3个方面：
- （1）边框的宽度；
- （2）边框的外观（实线，或者虚线）；
- （3）边框的颜色；
| 属性 | 说明 |
|---|---|
| border-width | 边框的宽度 |
| border-style | 边框的外观 |
| border-color | 边框的颜色 |
1、border-width
语法：
border-width:像素值;
说明：
在CSS初学者阶段，我们都是建议采用像素做单位
2、border-style
border-style属性用于设置边框的外观，例如实线边框和虚线边框。
语法：
border-style:属性值;
说明：
虽然border-style属性值很多，但是大部分我们都用不上。一般情况下，我们用到solid和dashed这两个属性值就够了，别浪费时间去记忆其他属性值，不听老人言，吃亏在眼前呀！
3、border-color
border-color属性用来定义边框的颜色。
语法：
border-color:颜色值
说明：
对于颜色的取值，请使用前端神器“在线调色板”来选取。
二、边框属性简洁写法
设置一个元素的边框就要设置3个属性：border-width、border-style和border-color。如下：
| 1 2 3 |
|
这种写法费时费力，导致代码量多。因此我们边框CSS样式有一个简洁的写法：
border:1px solid gray;
三、CSS边框局部样式
在CSS中，我们可以分别针对上下左右四条边框设置单独的样式。
1、上边框border-top
| 1 2 3 |
|
简洁写法：border-top:1px solid red;
2、下边框border-bottom
| 1 2 3 |
|
简洁写法：border-bottom:1px solid orange;
3、左边框-left
| 1 2 3 |
|
简洁写法：border-left:1px solid blue;
4、右边框border-right
| 1 2 3 |
|
简洁写法：border-right:1px solid red;
7、 背景样式概述
一、CSS背景样式概述
在CSS中，背景样式主要包括背景颜色和背景图像。在传统的布局中，一般使用HTML的background属性为<body>、<table>和<td>等几个少数的标签定义背景图像，然后使用bgcolor属性为它们定义背景颜色。
但是随着Web2.0时代的到来，传统布局的方式已经满足不了设计者的需求。如今的背景样式不再使用HTML属性来定义。大家记得喔，不要再使用HTML的bgcolor这些属性了，现在几乎全部都是使用CSS的background属性来控制元素的背景颜色和背景图像。
1、背景颜色
在CSS中，使用background-color属性来控制元素的背景颜色。
2、背景图像
在CSS中，为元素设置背景图像，往往涉及到以下属性：
| 属性 | 说明 |
|---|---|
| background-image | 定义背景图像的路径，这样图片才能显示嘛 |
| background-repeat | 定义背景图像显示方式，例如纵向平铺、横向平铺 |
| background-position | 定义背景图像在元素哪个位置 |
| background-attachment | 定义背景图像是否随内容而滚动 |
二、背景颜色background-color
2、background-color属性
在CSS中，使用background-color属性来定义元素的背景颜色。
语法：
background-color:颜色值;
说明：
颜色值是一个关键字或一个16进制的RGB值。关键字指的就是颜色的英文名称，如red、blue、green等。所谓的16进制RGB值指的就是类似“#FBF9D0”这种形式的值。对于颜色值的获取，大家可以使用绿叶学习网开发的“在线调色板”来获取，非常的方便。
举例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
在浏览器预览效果如下：
2、color和background-color区别
举例：
最低0.47元/天 解锁文章
382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
