CSS基础语法
一、CSS常用选择器
前言：
页面中，所有的CSS代码，需要写入到<style></style>标签中。
style标签的type属性应该选择"text/css"，但是type属性可以省略。
CSS修改页面中的所有标签，必须借助选择器选中。
选择器中，可以写多对CSS属性，用{}包裹。每个属性名与属性值之间用:分隔，多对属性之间，必须用;分隔。
写法：
选择器{
属性1:属性值1;
}
(1)通用选择器：
1. 写法：*{ }
2.作用：选中页面中的所有标签
3.优先级：最低
(2)标签选择器：
1.写法：标签名{ }
2.作用：根据选择器名 称，选中页面中的所有html标签。
(3)类选择器：(class选择器):
1. 写法：.class名（注意：一定不能忘记前面的点.）
调用：在html标签中，使用class="class名"调用选择器。
2.优先级：class选择器>标签选择器
(4)ID选择器：
1. 写法：#ID名{ }
调用：在html标签中，使用id="id名"调用选择器。
2.优先级：id选择器大于class选择器
(5)交集选择器:
1. 写法：选择器1选择器2选择器3……{ }
多个选择器之间紧挨着，没有任何分隔；
2. 作用效果：一个标签要满足交集选择器，则必须满足交集选择器中出现的所有选择器；
(6)并集选择器
1. 写法：选择器1，选择器2，……选择器N{}。多个选择器之间用逗号分隔。
2. 生效规则：只要满足并集选择器中的一个，即可生效。
(7)后代选择器
1. 写法：选择器1选择器2……选择器N{}。选择器之间用空格分隔
2.生效规则：必须满足，后一个选择器，是前一个选择器的后代（子代、孙代、），才会生效。
(8)子代选择器
1.写法：选择器1>选择器2>……选择器N{}。选择器之间用>分隔
2.生效规则：必须满足，后一个选择器，是前一个选择器的直接子代才会生效。隔代，即中间包含其他标签，则不会生效。
(9)伪类选择器（后续讲解）
二、CSS导入方式和优先级
【选择器的注意事项】
1 .id选择器与class选择器的区别？
①写法不同：class选择器使用.声明，而ID选择器使用#声明。
②优先级不同：当作用于同一标签时，id选择器高于class选择器
③在同一HTML文件中，ID是唯一的，所以ID选择器只能作用于一个标签上，但是，class选择器可以作用于N个标签。
2.选择器的命名规则：
只能有：字母、数字、下划线、减号组成。开头不能是数字。
3.选择器的优先级排序：
①首先遵循近者优先原则。哪个选择器，作用于最里层标签，则哪个选择器生效。
②当作用于同一层标签时，优先级排序如下：
id选择器大于class选择器大于标签选择器大于通用选择器。
【选择器的优先级】
1.第一原则：
近者优先。作用于最里层的选择器生效。
2.当作用于同一层时：
每种选择器所占优先级，可以进行运算获得：
标签选择器占权重1
class选择器占权重10
id选择器占权重100
行级样式表style=""占权重1000
注意：只有交集、后代、子代选择器，才参与优先级的累加！！而，并集选择器相当于写了两个选择器，没有总优先级。
3.如果计算出的优先级权重完全相同，则后写的选择器生效。
【引入CSS的三种方式】
1、行级样式表：在HTML标签中，使用style=""的形式引用；
<div style="height:100px"></div>
优点：使用灵活，优先级权重最高。
缺点：不符合W3c关于内容和表现分离的要求。不利于样式复用。代码杂乱，不利于后期维护。
2、内部样式表：在head标签中，使用style标签包裹CSS代码。
特点：一定程度的实现了HTML与CSS的分离，但是分离不够彻底，没有办法多页面公用样式。
<head>
<style type="text/css">
<style/>
</head>
3、外部样式表：将CSS代码,全部写到一个CSS文件中，使用link标签，将html文件与css文件关联。
rel:选择stylesheet
type选择"text/css"，可以省略。
href选择CSS文件地址。
<link rel="stylesheet" type="text/css" href="css/01-css.css"/>
优点：彻底实现CSS与HTML的分离，符合W3C规范，有利于多页面复用统一样式。
[导入CSS文件的两种方式]
①在<head>标签中，使用link链接：
<link rel="stylesheet" type="text/css" href="css/01-css.css"/>
②在style标签中，使用@import导入；
@import url("css/01-css.css");
【两种导入方式的区别】
①link术语标准的HTML标签，而@import url不是标准的标签；
②link可以兼容所有低版本的浏览器，而@import url只在CSS2之后可用；
③link是将两个文件链接起来，起桥梁作用，而@import相当于将CSS文件复制到HTML文件中；
④link会在HTML文件边加载的过程当中，边加载CSS文件；@import会在HTML文件加载完之后，再导入CSS文件；
综上所述，我们使用link连接的方式加载CSS文件.
三、CSS常用文本属性
(1)CSS中的颜色单位
1、使用颜色名称表示：red、blue、……
2. 使用十六进制数表示：#ffffff #000
3、使用RGB（255,255,0），三个数值分别表示red、green、blue，范围是0-255
rgba（255,255,0,0）.第四位表示透明度，可选值0-1,0表示全透明，1表示不透明。
(2)CSS常用文本属性
1.字体字号类：
①font-weight:字体粗细
bold-加粗
normal-正常
lighter-细体
也可以使用100-900数值，400表示normal，700表示bold.
②font-style：字体样式。
italic-倾斜，normal-正常。
③font-size: 字体大小。
可以使用px单位，可以使用百分比（表示的是浏览器默认大小的百分比，浏览器默认字体大小为16px）
④font-family:字体系列（字体族）
>>>可以直接写字体名，也可以写字体，也可以写字体系列名。
>>>常用字体系列：sans-sreif（非衬线字体）sreif（衬线体）
>>>font-family可以接收多个值，用,分隔。表示优先使用第一个， 如果没有这个字体，依次向后使用。 通常，最后一个值放字体系列名。
eg:font-family："隶书"，"宋体"，sans-sreif；
【font缩写形式】（了解)
eg:font:italic bold 18px/1.8 "黑体"，"微软雅黑"，sans-sreif；
>>>缩写形式顺序：
font-style font-weight font-size/line-height font-family;
>>>多个属性之间用空格分隔
>>>font-size/line-height必须一组，用/分隔
>>>font-family的多个字体之间用,分隔
2、字体颜色：
①color:字体颜色，可以单词、16进制、RGB等。
②opacity:透明度,0~1之间的数字。
[opacity和RGBA的区别]
>>>RGBA本身可以设置颜色，而opacity必须配合其他颜色属性来用；
>>>RGBA仅仅是让当前元素设置的颜色透明；而opacity，会让当前元素里面的所有文字、背景、子元素都透明；
3、行距、对齐类：
① line-height:行高。
可以写像素单位px、可以直接写数字（表示默认行距的几倍）、
可以写%(表示默认行距的百分比).
>>>行高重要作用：让单行文字在div中垂直居中？
设置行高等于div的高度，即可让单行文字垂直居中。
②text-align：设置区域内的行级元素水平对齐方式left/cebter/right。
③letter-spacing：字符间距，字与字之间的距离。
④text-decoration：文本修饰；
underline-下划线、
overline-上划线、
line-through-删除线、none
⑤overflow:控制超出范围文本的显示方式
>>> hidden：超出区域的文字直接隐藏，无法看到；
>>> scroll：无论文字多少，都会显示水平和垂直方向的滚动条；
>>> auto:（默认效果）文字少的时候没有滚动条，文字多的时候自动显示垂直滚动条；
也可以使用overflow-x和overflow-y单独设置水平和垂直方向滚动 条是否显示；
⑥text-overflow:设置行末多余文字的显示方式。
>>> clip-多余文字裁剪掉 ellipsis-多余文字省略号显示
>>>显示省略号，需要配合white-space: nowrap；使用
>>>【重点】让每行多余文字显示省略号：
overflow: hidden; 设置控件超出范围隐藏
white-space: nowrap; 如果是中文，需设置行末不断行
text-overflow: ellipsis; 设置多余文本省略号显示
⑦white-space: nowrap; 设置中文行末，不断行显示
⑧text-indent：首行缩进。
⑨-webkit-text-stroke：文字描边。
-webkit-表示只有-webkit-内核的浏览器生效、常见的有chrome、safair
⑩text-shadow：文字阴影，有四个属性值，空格分隔；
>>>水平阴影距离，正数表示阴影右移，负数左移；
>>>垂直阴影距离，正数表示阴影下移，负数上移；
>>>阴影模糊距离，0表示阴影一点都不模糊；
>>>阴影颜色
eg: text-shadow: 2px 2px 2px blue;
四、CSS常用背景属性
1、background-color：背景色
2、background-image:背景图。使用url("")选择背景图片。
背景图和背景色同时存在时，背景图会覆盖背景色。
3、background-repeat：背景图的重复方式。
no-repeat-不平铺、repeat-平铺、
repeat-x——延x轴平铺、repeat-y——延y轴平铺。
4、background-size：背景图的大小
[指定宽度高度的写法]
>>>宽度高度的指定，可以写px，也可以写%（父容器宽高的百分比）
>>>当写两个属性时，分别表示宽度、高度。当写一个属性时，表示宽度，高度将会等比缩放。
[其他属性时]
>>>contain：图片等比缩放，直到宽或者高中较大的一边缩放到100%为止。
（可能导致较短一边<100%，图片无法盖住全部区域。）
>>>cover：图片等比缩放，直到宽或者高中较小的一边缩放到100%为止。
（可能导致较大一边>100%，图片超出区域显示不全。）
5、background-position：背景图偏移量
>>>指定位置：left/center/right top/center/bottom
当只写一个值时，另一个默认居中，
>>>指定坐标：两个属性分别表示：水平位移、垂直位移。
①坐标的值可以是像素单位px，也可以是%百分数。
②当写像素单位px时：
水平方向：正数右移、负数左移。
垂直方向：正数下移、负数上移。
（左负右正 上负下正）
③当写百分数时：
一般只能是正数。表示的是，去掉图片的宽高，剩余空白区域的分布比例。
eg:background-position:30%；水平方向去掉图片宽度，剩余区域3：7分。
6、list-style:修改列表小黑点的样式；
none-去掉小黑点
url()：可以导入一张小图片，作为列表的标识符号。
7、float:浮动，可以实现让块级元素，在一行中显示。
五、盒子模型
(1)margin:外边距：
1、只写一个值：表示四周的外边距均为指定的值；
2、写两个值：第一个数表示上下外边距，第二个数表示左右外边距。
3、写三个值：分别表示上、右、下 三个方向，左边默认等于右边。
4、写四个值：表示上、右、下、左 四条边顺时针方向；
[重点] 5、margin:0 auto; 设置块级元素，在父容器中水平居中！！！！
(2)padding:内边距：
设置方式，与外边距完全相同；
[重点] 注意：设置内边距，将会导致div区域被撑大！！！使用时必须注意div实际的宽高。
(3)border: 边框
1、设置边框需要三个属性：宽度、样式、颜色。原则上，三个属性缺一不可，顺序可以随意修改；
2、可以使用top right bottom left分别设置四个边；
【重点】
当父盒子包裹子盒子，给子盒子添加margin-top时，父盒子与子盒子两个上边线并不能分开，而是会导致，两个盒子同时下来。
[解决办法]
1、给父盒子添加一点padding-top;不推荐使用，会导致父盒子结构多余1px padding;
2、给父盒子添加1像素的border-top；同样会导致1px的多余空间，不推荐使用；
3、给父盒子或者子盒子添加浮动；可能会由于浮动一定程度的影响页面的布局；
4、给父盒子添加 overflow: hidden属性：推荐使用的方式。
(4)border-radius 圆角
1、border-radius可以接收8个属性值，分别表示：
x轴（左上、右上、右下、左下角）/y轴（左上、右上、右下、左下角）
2、缩写形式：
只写x轴，y轴默认等于y轴；
四个角写不全，默认对角相等；
只写一个值，默认八个数均等；
* eg:border-radius:50px 20px:
=border-radius:50px 20px 50px 20px;
=border-radius:50px 20px 50px 20px/50px 20px 50px 20px;
3、当圆角弧度>=正方形边长一半，将会显示为圆形。
(5)border-image 图片边框
1、border-image:一共可以放10个属性；
① 图片的路径：url();
② 图片的切片宽度：4个值，分别代表上、右、下、左四条边；
通过4条切线切割，可以将图片分为九宫格。九宫格四个角分别对应边框的四个角（不会进行任何拉伸），
9宫格四个边分别对应四条边框（会根据设置进行拉伸/铺完/重复等操作）。
注意：写的时候必须不能带px单位
③ 边框的宽度：4个值，分别代表上、右、下、左四条边框的宽度；
注意：写的时候必须带px单位，与切片宽度用/分隔！！！
④ 边框的重复方式：stretch（拉伸）、round(铺满)、repeat（重复）
【round(铺满)和repeat（重复）区别】：
A：round:会对四条边进行适当的拉伸压缩，确保四条边可以重复整数次；
B: repeat会保持每条边的长度比例不变，可能导致四角处，无法显示一条完整的边；
2、属性值的写法：border-image：① ②/③px ④；
3、border-image在webkit内核的浏览器中，必须带-webkit-前缀。
(6)box-shadow: 盒子阴影
6个属性值，空格分离
①x轴阴影距离（必选）：可正可负，正——右移，负——左移；
②y轴阴影距离（必选）：可正可负，正——下移，负——上移；
③阴影的模糊半径（可选）：只能为正数，默认为0,数值越大，阴影越模糊；
④阴影扩展半径（可选）：可正可负，默认为0,数值增大，阴影扩大；数值减小，阴影缩小；
⑤阴影颜色（可选）：默认为黑色。
⑥内外阴影（可选）：默认为外阴影，默认为外阴影，inset表示内阴影；
(7)outline外围线：
显示在border外面，，并且不会占据空间。可能会覆盖四周的内容。
六、CSS浮动
1、 标准流中的块级盒子，宽度会自动伸展为100%；
而浮动的块级盒子，宽度不会自动伸展，而是由内容撑开；
2、当一个盒子浮动，标准流中未浮动的其他盒子，将视浮动盒子不存在，而占据浮动盒子原来的位置。（浮动盒子，会盖在这个盒子的上方）但是，未浮动盒子中的文字内容，将会受到浮动盒子宽度的影响。（未浮动盒子中的内容，不会被浮动盒子盖住）
由于第二条的原因。
可以给受影响的盒子，添加clear属性，清除掉浮动盒子对自身的影响。
clear可选值：
left-清除左浮动影响；
right-清除右浮动影响；
both-同时清除左右浮动影响；
4、父盒子没有指定高度。如果子盒子没有浮动，则父盒子的高度可以被子盒子撑开。
如果，父盒子中的所有子盒子都浮动，则父盒子高度将变为0；
[解决所有子盒子浮动，父盒子高度塌陷的问题]
①给父盒子也添加浮动；
②给父盒子添加overflow: hidden;属性，推荐使用！！
③在父盒子最后，添加一个高度为0的空div。
给这个div添加clear:both;属性，清除掉浮动效果。
④可以将第三条的div用为对象选择器::after实现
* #div4::after{
display: block;
content: "";
height: 0px;
clear: both;
}
[盒子模型分类]
1、标准盒子（W3C盒子）：我们设置的宽度和高度，仅仅包含content部分；再添加padding或border,会导致盒子变大；
box-sizing: content-box; 标准盒子； 默认效果。
2、IE盒子（怪异盒子）：我们设置的宽度和高度包含content、padding和border， 会压缩盒子content区域，但盒子总大小不变。
box-sizing: border-box; 怪异盒子；
七、CSS定位
[相对定位relative]
1、使用position: relative;设置元素为相对定位元素；
2、使用top、right、bottom、left调整元素的位置。
当left和right同时存在时，left生效；
top和bottom同时存在时，top生效。
3、定位机制：
①相对定位是相对于自己原来的位置定位，当top等属性不指定时，元素位置不发生改变；
②相对定位不会释放元素在原有文档流中的位置。不会影响其他文档流元素的位置；
4、关于元素Z轴重叠：
①定位元素，默认的z轴高于普通文档流元素。
②同为定位元素，“后来者居上”。
③可以使用z-index: 手动调节定位元素的上下层z轴顺序。
z-index: 默认为0,而且只能作用于定位元素。
[绝对定位 absolute]
1、使用position: absolute;设置元素为绝对定位；
2、定位机制：
①相对于第一个非static定位的祖先元素进行定位。
（即，相对于使用了 relative、 absolute 、fixed定位的祖先元素进行定位）
②如果所有的祖先元素都没定位，则相对于浏览器左上角进行定位
③使用 absolute的元素，会从文档流中完全删除，原有空间会被释放。
[固定定位fixed]
1、使用position:fixed;设置固定定位；
固定定位，是一种特殊的绝对定位！！只是祖先元素无法使用定位锁住；
2、定位机制：
永远相对于浏览器的左上角进行定位，而且不随滚动条的滚动而滚动。
[clip属性]
1、作用：clip属性用于裁切图片标签，显示图片的指定区域；
2、使用要求：clip属性，只能作用于有absolute或者fixed定位的图片标签上；
3.clip属性，接受一个rect()函数，函数传入四个值，
分别表示上、右、下、左、四条切线的位置。
注意：与其他属性 不同的是，rect中的四个值上下两个值的距离都是从上边量取；左右两个值都是从左边量取。
八、CSS负边距的使用
1、【实现块级元素在父容器中水平垂直居中】
① 设置子容器为定位元素
② left: 50%;
margin-left: -width/2;
top: 50%;
margin-top: -height/2;
2、使用负边距增大元素的宽度
① 子容器的宽度，不指定；只指定高度、或者由内容撑开高度；
② margin: 0px -50px;可以使左右两边，均超出父容器50%
九、CSS3新增属性
display属性：
可以设置元素以何种状态显示，可选值：
>>> none：隐藏元素;
>>> block:显示为块级元素；
>>> inline:显示为行级元素；
>>> inline-block:显示为内联块级元素。本身将是一个行级元素，但是，拥有块级元素的所有属性，
比如：宽度、高度、margin、padding等………
[常见的inline-block:级别的标签]
<img/> <input/> <textare></textare> <td></td>
【隐藏一个元素的方式】
1、宽度或高度设为0px，配合overflow:hidden;属性；
2、display:none; 显示display:block;
3、opacity:0;设为全透明。但是元素的空间会占据；
4、visibility：hidden;隐藏元素，但是元素所在的空间依然会占据。与opacity:0;效果很像；
显示visibility隐藏的元素：visibility：visible;
【CSS3新增的属性前缀】
1、-webkit-：Chrome/Safari浏览器；
2、-moz-:火狐浏览器；
3、-ms-：IE浏览器；
4、-o-：Opera浏览器。
【CSS长度单位】
1、px像素。长度是固定的。表示占分辨率的几个像素点；
2、%：表示相对于默认值的百分比；
3、em:与元素的字号挂钩。表示几倍的字号。
4、rem:与根元素的字号挂钩。即，与html标签的font-size挂钩，如果不设置则默认字号为16px。
[em与rem区别]
1、 em是与当前元素自身的font-size挂钩，如果当前元素没有设置，则向上查找最近的祖先元素字号，直到根字号；
2、rem与当前元素字号无关，直接与根元素字号挂钩。
[CSS3背景属性]
1、 background-clip;设置背景图背景色的裁切显示区域。
>>>border-box:从边框外缘开始显示。
>>>padding-box:从边框内缘开始显示。
>>>content-box：从文字内容区域开始显示；
>>>如果不在显示区域的背景图或背景色，会被裁切掉不显示。
2、background-origin: 设置背景图从哪里定位。
>>>border-box：背景图左上角从边框外缘开始；
>>>padding-box:背景图左上角从边框内缘开始
>>>content-box： 背景图左上角从文字内容区域开始；
3、 background-origin: 不会改变背景图显示区域的大小，只是决定背景图的左上角从哪里开始定位。
background-clip：只负责裁切出显示区域，但是并不关心背景图定位在哪。
4、background-attachment:背景图的附着方式；
scroll：背景图跟随区域滚动，默认效果；
fixed：背景图充满整个区域，并且背景图是固定的，不随滚动条滚动。
5、[background缩写形式]
background-color；background-image：background-repeat；background-attachment: background-position:
6、transition:过渡属性，接收四个属性值；
① 设置哪个CSS属性参与过渡，可以直接指定all/none;
② 过渡多少时间完成，通常.3/.5s;
③ 过渡的样式效果，通常写ease;
④ 过渡延时几秒后再开始，可以省略不写；
transition属性可以同时定义多个过渡效果，用,隔开。
eg:transition: width .5s ease, height .3s ease,;
[transform:定义变换属性]
1、常用的变换函数：
translate（10px,10px）平移；第二个不写默认为0；
scale（1.1）缩放，第二个不写，默认等于第一个；
rotate(90deg)旋转，默认绕z轴可以使用rotateX等
skew(20deg,30deg)扭曲，水平、垂直方向扭曲多少度；
2、transform可以同时实现多种变换，用空格分隔
eg:transform:skew(20deg) scale（1.1）
3、transform-origin:定义变换起点，常用与旋转变换。
可选值：left/center/right bottom/center/top
也可以指定X/Y轴坐标点，第一个数为X轴；
eg:transform:rotate(90deg)
transform-origin:right bottom
[CSS3动画的使用]
1、声明一个关键帧（动画）
@keyframes name{}
from{}
to{}
阶段的写法：
①可以直接使用from-to的写法
②可以设置0%-100%的写法，但开头和结尾必须是0%和100%。
2、在CSS选择器中，使用animation:调用声明好的动画；
【animation:的缩写形式】
①Animation-name:动画名称，就是我们声明的关键帧name;
②Animation-duration：动画持续时间
③Animation-timing-function：动画速度曲线，常选ease;
④Animation-delay：动画开始的时间，延迟;
⑤Animation-iteration-count：动画播放次数，默认为1.无限次infinite;
⑥Animation-direction：动画在下一个是否逆向播放，默认为normal,表示不进行逆向播放； alternate表示下一次将进行逆向播放（100%-0%）
⑦Animation-fill-mode：表示动画结束后，停留在何种状态。要使用这个属性，动画的执行次数必须是有限次。
forwards：表示动画停留在结束状态；
backwards：表示动画停留在初始状态；（默认效果）
>>> Animation-name:和Animation-duration：必须要设置，其他的选填
>>> Animation可以同时设置多个动画，多个动画之间用,分隔
Animation:frame1 1s,frame2 3s,……
