个人前端学习进程
C S S 篇
css是层叠样式表的简称。也称之为css样式表或级联样式表。也是一种标记语言。主要用于设置html页面中的文本内容（字体，大小，对齐方式等），图片外形（宽高，边框样式，边距等）以及版面的布局和外观显示样式。简而言之，css美化html文件，使布局变得简单。
**css语法规范： 选择器 { 属性：值；}**属性值，冒号后加空格，用展开式。
<!-- p为body中的一个段落标签 -->
<style>
p {
color（属性）: red（值）;
font-size（属性）: 12px（值）;
}
</style>
选择器用于指定标签，表明在哪个标签上修改，style标签被head标签包围。
选择器
选择器分为基础选择器和复合选择器两大类
基础选择器
包括标签选择器，类选择器，id选择器和通配符选择器
标签选择器
是指用HTML标签名称作为选择器，按标签名称分类，为界面中所有该标签指定统一的css样式（其缺点为不能设计差异化样式，只能选择全部的标签）
类选择器
实现差异化选择，用class属性来调用，是开发最常用的方法
<!-- 这个red是自己取的名字 -->
.red{
color:red;
}
<p class="red">
这个段落变成了红色。
</p>
<p>
这个段落没有变化
</p>
先用 一个点号 . 定义样式，然后在需要的地方用class调用。类名是自己命名的，但不能用原有标签语如p div等，也不能用中文，尽量不用数字。一般有约定熟成的定义名，例如头部为header，热点为hot（用英语）
类选择器的多类名
1.在class标签中可以写多个类名，如果发生冲突（如颜色）那以后面那个为准。
<p class="red font">这个段落变了颜色与字号，red 和font 是两个不同的类名，两个类名一定用空格隔开</p>
多类名可以把标签元素相同的样式放在一个部分，标签可以调用公共的类，然后再去调用自己独有的类。从而节省css代码，统一修改更方便。
id选则器
用#id名定义 语法规范：
#id名{
属性：属性值；
}
#red{
color: red;
}
<p id="red">这个字段变成了红色，当这个段使用了这个id调用，别的标签就不能调用此id调用了</p>
类选择器可以多次使用，但是id选择器只能使用一次。界面修饰常用类选择器，id选择器常与JavaScript搭配使用。
通配符选择器
用 * 定义，语法规范
*{
color：red；
}
通配符选择器不需要调用，写出就会将页面中所有的标签修改样式。用于特殊情况
字体属性
字体系列
css中用font-family属性定义文本的字体系列，例如Microsoft YaHei（微软雅黑）。
一般情况下，由多个单词组成的字体，加 ’ ’ ，可使用多个字体，优先使用前面的，各种字体之间用英文的逗号分开。
<body font-family:'Microsoft YaHei',tahoma,arial;>
</body>
字体大小
css用font-size属性定义字体大小
p{
font-size: 20px;
}
px（像素）是我们网页最常用的单位，可以在body中指定整个页面文字的大小。标题标签比较特殊，得特殊给标题修改。
字体粗细
css用font-weight属性定义文字粗细。
.bold{
font-weight: 700;<!-- 700为加粗 -->
}
.normal{
font-weight: 400;<!-- 400为正常 -->
}
数字的范围为100—900.表示粗细。
文字样式
css用font-style属性定义文字的样式（例如倾斜）normal是最常用的字体样式。
p{
font-style: normal;
}
字体复合属性（字体连写）
font-style: italic;
font-weight: 700;
font-size: 16px;
font-family:'Microsoft yahei';
可简化为：
font: italic 700 16px 'Microsoft yahei';
但是注意顺序不能颠倒，必须按照font：font-style font-weight font-size/line-height font-family；的顺序
口诀：类粗大家，有大有家（类型，粗细，大小，家族）。
不需要的属性可以省略，但必须保留 font-size和font-family属性，否则font属性将不起作用。
如果出现font：14px/1.5 ‘Microsoft yahei’；那代表文字大小为14px行高为文字大小的一点五倍
文本属性
文本颜色
color属性用于定义文本颜色
1.用预定义的颜色值如red，pink
2.用16进制如#FF0000
3.RGB代码：rgb（255，0，0）或rbg（100%，0%，0%）
实际开发中16进制最常用
对齐文本
text-align属性用于设置元素内文本内容的水平对齐，属性值有 left 左对齐，right 右对齐，center 居中对齐。
装饰文本
text-decoration属性规定添加到文本的修饰，可以加下划线，删除线，上划线
none 无装饰线（默认）； underline 下划线； overline 上划线； line-through删除线；
超文本连接默认有下划线，这时我们常用none去除下划线。
文本缩进
text-indent属性用于指定文本的第一行缩进，通常是将段落的首行缩进。
语法：text-indent： 20px；
em是一个相对单位，就是一个当前文字的大小。
text-indent：2em；
行间距
line-heigh属性用于设置行间的距离
语法：line-height：26px
行间距来自于 上间距 加文字高度加 下间距
让行高等于盒子的高度可以实现文字垂直居中。
字间距
word-spacing：以每一个单词中间的空格为缩进。
letter-spacing：以每个字符为缩进。
css引入方式
内部样式表（嵌入式）
在html页面内部写样式，但是需要单独写到style标签中
这种结构方便控制当前整个页面中的元素样式设置，代码结构清晰，但是没有实现结构与样式的完全分离。
行内样式表（行内式）
在元素标签内部的style属性中设定css样式。适合于简单形式
<p style="color: red; font-size: 12px;">这是一个行内样式表</p>
在双引号中间，写法要符合css语法规范
控制当前标签设置样式
书写繁杂，未实现结构与样式相分离，代码简单少量时可考虑使用。
外部样式表（链接式）
实际开发都是外部样式表，适合于样式比较多的情况。
核心是将样式单独写到css文件中，之后把css文件引入到HTML文件中，在css文件里面只有样式没有标签
用 < link >标签引入这个css文件
语法：< link rel=“stylesheet” href=“css的文件路径” >
stylesheet意为样式表
Emmet语法
它可以提高HTML文件的编写速度。
html文件
1.生成标签可以 直接输入标签名然后加Tab键 例如：div然后按Tab键，生成< div >< /div >（回车也可以）
2.要生成多个相同标签，加上*就可以了，例如div *3就可以生成3个div标签。
3.如果有父子级关系的标签，可用 > 例如 ul > li 就可以了。
4.如果有兄弟关系的标签，用+号，例如，div+p。
5.如果生成带有类名或者id名字的，直接写 .xxx 或者#xxx就可以了。
6.如果生成的div类名是有顺序的，可以用自增符号$
7.如果要在生成的标签内部写内容可以用{xxx}表示
例如p.aKaTeX parse error: Expected 'EOF', got '#' at position 1: #̲b{c}*5可生成
<p class="a1" id="b1">c</p>
<p class="a2" id="b2">c</p>
<p class="a3" id="b3">c</p>
<p class="a4" id="b4">c</p>
<p class="a5" id="b5">c</p>
css文件也可以采用简写的方法
css的复合选择器
1.后代选择器
又称为包含选择器，可以选择父元素里面的子元素，语法为将外层标签写在前面，空格隔开后内层标签写在后面
ol li{color: red;}
ol li a{color: red;}
还可以和类选择器一起用
.nav ol li{color:red;}
子选择器
只能选择作为某元素最近一级的子元素，语法为 元素1>元素2{样式声明}
表示选择元素1里面所有的子元素2.
div>p{color: red;}/*选择div里面的最近一级p元素*/
并集选择器
可以选择多组标签，同时将它们定义为相同样式。语法为 元素1 , 元素2{样式声明}
任何形式的选择器都可以用并集选择器
伪类选择器
用于向某些元素添加特殊效果，比如鼠标滑动到链接上链接就会变色
伪类选择器用冒号：来表示如 ：hover
链接伪类选择器
1.未访问链接 a : link{样式声明}
2.已访问过链接 a：visited{样式声明}
3.鼠标经过的链接 a：hover{样式声明}
4.按下没松开的链接 a：active{样式声明}
书写需按照上述顺序书写！！（ l v h a ）
：focus
针对于input元素，用于选取获得焦点的表单元素（例如输入框选定时，框框变成蓝色了）
写法 input：focus{样式声明}
css的元素显示模式
元素以什么方式进行显示，比如< div >自己独占一行，比如一行可以放多个< span >
html元素一般分为块元素和行内元素两种。
块元素
常见块元素有< h1 >-< h6 >,< p >,< div >,< ul >,< ol >,< li >等，其中< div >为最典型的块元素。
块元素的特点：
1.独占一行。
2.高度，宽度，外边距，内边距都可以自己控制。
3.宽度默认是容器的100%。
4.是一个容器及盒子，里面可以放行内或者块级元素。
5.文字类元素内不能使用块元素，例如p标签中不能放div标签，同理，h1-h6标签中不能放块元素。
行内元素
常见有< a >,< strong > ,< b > ,< span >等
行内元素的特点：
1.相邻行内元素在一行上，一行可以显示多个。
2.高，宽的直接设置是无效的。
3.默认宽度为它本身内容的宽度。
4.行内元素只能容纳文本或其他行内元素。
5.链接里面不能再放链接
6.a里面可以放块级元素，但是给a转换一下块级模式最安全。
行内块元素
在行内元素中1有几个特殊的标签，< img/ >,< input/ >,< td/ >,它们同时具有块元素和行内元素的特点。
行内块元素的特点：
1.和相邻行内块元素或者行内元素在一行上，但是它们之间会有空白间隙，一行可以显示多个。
2.默认宽度高度就是它本身内容的宽度。
3.高度，行高，外边距，内边距都可以控制。
元素显示模式转换
一个模式需要另外一种模式的特性，比如想增加链接a的触发范围。
转化为块元素display：black； （display显示 black块）
转换为行内元素display：inline；
转换为行内块元素display：inline-block；
CSS的背景属性
通过背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色，背景图片，背景图片位置，背景图像固定等。
一般情况下，元素背景颜色默认值是transport（透明的）
背景颜色
语法 background-color：颜色值；
背景图片
background-image属性描述了元素的背景图像。实际开发中常见于logo或者一些装饰性小图片，还有一些超大性背景图片，优点是便于位置控制。
语法 background-image ：url（ 图片位置 ）
背景平铺
用background-repeat属性控制平铺
语法： background-repeat：属性值；
属性值：no-repeat背景图像不平铺（图片只显示一次） repeat-x背景图像在横向上平铺 repeat-y背景图像在纵向平铺 repeat横纵向平铺（默认）
背景图片位置显示
利用background-position属性控制图片在背景中的位置
语法： background-position：x y；
参数代表的意思为： x坐标和y坐标。可以用方位名词或者精确单位
参数值为精确单位 坐标为百分数，由浮点数和单位标识符组成的长度值。
参数为位置坐标 横坐标有left center right 纵坐标有 top center bottom。
如果参数为方位，则两个值前后顺序无关，left top和top left表示意思一样。如果只指定了一个方位名词，则第二个值默认为居中。
如果参数是精确单位， 前面的是x轴，表示据左边距的距离，后边的是y轴，表示据顶部的距离，如果只指定一个数值，那一定是x的值，y的值默认为居中。
也可以使用混合搭配，第一个一定是x第二个一定是y
背景图像固定（背景附着）
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。
后期可以实现视差滚动的效果。
语法： background-attachment：scroll 或者 fixed
scroll代表背景图像是随着对象内容滚动，fixed表示背景图像固定，默认为scroll滚动。
背景的复合写法
习惯约定的顺序为： background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置。
背景色半透明
background：rgba（0，0，0，0.3）
其中，第一个参数代表红色，第二个代表绿色，第三个代表蓝色，第四个为透明度取值范围为0-1，1为100%。
背景色半透明，内容不变。
| 属性 | 作用 | 值 |
|---|---|---|
| background-color | 背景颜色 | 预定义的颜色/十六进制/rgb代码 |
| background-image | 背景图片 | url（图片路径） |
| background-repeat | 背景平铺 | repeat/ no-repeat/ repeat-x/ repeat-y |
| background-position | 背景位置 | 精确数，方位名词。 |
| background-attachment | 背景附着 | scroll（背景滚动） fixed（背景固定） |
| 背景半透明 | 背景半透明 | background：rgba（0，0，0，0.3） |
CSS的三大特性
层叠性，继承性，优先级。
层叠性
相同的选择器给相同的样式，此时一个样式会覆盖另一个样式。
样式冲突，执行后面那个。
样式不冲突，不会出现覆盖问题，只有相同样式会出现覆盖现象。
继承性
子标签会继承父标签的某些性质，例如一个div包含了一个p 修改div标签的性质，p也会继承div的样式。
一般而言 text- font- line- 这些元素开头的样式可继承，color也可以继承。
优先级
当元素有多个选择器，就会出现优先级的现象。
如果选择器相同，则执行层叠性。
选择器不同，更具选择器权重执行
| 选择器 | 选择器权重 |
|---|---|
| 继承或者通配符* | 0，0，0，0 |
| 元素选择器（标签选择器） | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| id选择器 | 0，1，0，0 |
| 行内样式style="" | 1，0，0，0 |
| 样式后面加 ！important | 无穷大 |
简单理解style="" > id > 类 > 元素（标签）> 继承或 *
注意继承出现的情况，父标签选择器权重可能很高，子元素继承父元素的性质，但是权重很低
看标签执行哪个样式，主要看标签是否被直接选择。
如果是复合选择器，会出现权重叠加的问题，需要叠加权重，范围越小（越精确）权重越高，权重叠加不会进位。
例如 ：
div ul li 权重为0，0，0，3（三个标签选择器权重相加）
.nav ul li 权重为0，0，1，2（一个类选择器，两个标签选择器）
a：hover权重为0，0，1，1（一个标签选择器，一个伪类选择器）
盒子模型
页面布局的三大核心为盒子模型，浮动，定位。
网页布局的过程：
1.准备好网页元素，以及盒子
2.利用css设置好盒子的样式，摆放到相应位置
3.往盒子里装内容
其中第二条为网页布局的核心
盒子模型的组成
border边框 content内容 padding内边距 （内容与边框之间的距离） margin外边距（盒子与盒子之间的距离）
边框
边框有三个组成，边框宽度（粗细）， 边框样式（虚线实线）， 边框颜色
语法： border ：border-width
| 属性 | 作用 |
|---|---|
| border-width | 边框粗细，单位为px |
| border-style | 边框样式，重点记住solid实线，dashed虚线，dotted点线 |
| border-color | 边框颜色 |
边框简写：border：1px solid red；（没有顺序）
边框还可以修改上下左右四个边，例如border-top就是上边框同理有 bottom left right
表格的细线边框
在设置表格的时候，会出现两个单元格的边框挤在一起的情况，这样的话边框线就会被变成两倍粗
border-collapse属性控制浏览器绘制表格的方式。它控制相邻单元格的边框。
语法： border-collapse：collapse；
collapse单词是合并的意思，border-collapse：collapse；表示将相邻边框合并在一起。
注意盒子的大小会被边框影响，例如原本200px的正方形盒子，在加了边框后，会变大。
盒子内边距（内容与边框的距离）
padding属性用于设置内边距
padding-top上内边距
padding-bottom下内边距
padding-left左内边距
padding-right右内边距
简写 以空格隔开， padding：后面一个值a，代表上下左右都有边距a。后面两个值a，b，代表上下边距为a左右边距为b。后面三个值a，b，c上为a，左右为b，下为c。四个值时，以顺时针（上右下左）分别分配abcd
padding会影响盒子的实际大小。
例如盒子是200px的正方形，加20px的边框，显示的是240的正方形。
解决方案：用盒子大小减去两倍边框大小。
padding的合理运用，当盒子中字数不一样时可以不设置盒子的原本宽度，用内容和padding撑开盒子。
当盒子没有被指定height和width时，盒子不会被撑开。
外边距
margin属性用于设置外边距，即控制盒子与盒子之间的距离
同理，也有margin-top只控制上边距…简写也一样
外边距可以让块级盒子水平居中，但是必须满足
1.盒子必须有宽度。
2.盒子左右外边距都设置为auto（自动）。
若要实现行内元素或者行内块元素水平居中，给其父元素添加 text-align：center即可。
外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并，不是取两者相加，而是取其中最大者。
解决方案：尽量只给一个盒子添加margin值。
嵌套块元素垂直外边距的塌陷：
对于两个嵌套的父子关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：1.可以为父元素定义上边框。2.可以为父元素定义上外边距。3.可以为父元素添加overflow：hidden
去除内外边距
例如随便在body里面加入内容，这个内容与最左上角总会有距离，这是网页元素默认的内外边距，而且不同的浏览器默认的也不一样。我们在布局前，首先要清除网页元素的内外边距。
常用解决
*{
padding：0；/*清除内边距*/
margin：0；/*清除外边距*/
}
这也是css的第一行代码。
572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
