1.什么是css？
cascading style sheet（层叠样式表)的缩写
css不能脱离html而单独存在
2.语法
1.属性的设置
1.用法：
属性名和属性值之间使用冒号分割
多对属性之间使用分号分割
最后一对属性可以不加分号
2.表示方法：
<1>.style
<div style="width:100px;height:100px;background-color:red"></div>
<2>.其他
代码块
选择器{
width:100px;
height:100px;
background-color:red;
}
2.注释
1.写法
/*注释内容*/
2.作用
提升代码的可读性，便于代码的维护和管理。
3.注意
注释不能嵌套使用
<!--outer
<!--inner-->
-->
/*
outer
/*inner*/
*/
3.速记写法（简写形式）
top
bottom
left
right
padding-top:10px
padding-left:10px
padding-right:10px
padding-bottom:10px
速记写法：
padding:10px;//上下左右均为10px
padding:10px 20px;//上下10px 左右20px
padding:10px 20px 30px;//上10px 左右20px 下30px
padding:10px 20px 30px 40px;//上 右 下 左分别为10px 20px
30px 40px
注： margin和padding速记写法表示方式相同
margin:0 auto;//设置给具有宽度的块级元素时，元素可以在父元素中自动居中
例：
border-top-width：
border-top-style：
border-top-color：
……
12行可以简写为：border：1px solid red
3.css可以怎样作用到html上？
1.行内样式
写在标签内部的style属性上
2.内嵌式/内部样式表
在head内部使用style标签设置
3.外部样式表(建议使用)
在当前html文件外部，创建一个css文件
.css为文件后缀名
然后使用以下两种方法中的一个把css作用在html上
<1>link标签(建议使用)
优先加载html
<2>@import属性
优先加载css
优先级：
行内样式>内嵌式=外部引入
结论：
就近原则：哪一个样式距离html元素更近，哪个样式的优先级更高
4.选择器
标签选择器：
通过标签名称选择一类元素
div{}
span{}
p{}
id选择器：
通过id属性选择一个元素
#one的意思是id=one
类选择器：
class:通过class属性选择一类元素
.one的意思是class='one'
普遍选择器：
*选择所有
后代选择器：
空格:选择所有后代元素
>：选择直接子元素
兄弟选择器：
+：选择当前元素之后的一个兄弟元素
~：选择当前元素之后的所有兄弟元素
组合选择器：
div #one .one
div#one
div.one
div.one p 最终选择的是p
多选择器：
div，p，span,#one,.one{
}
属性选择器：
根据元素的属性选择一类元素
[id]:具有id属性的
[id='one']:具有id属性，属性值为one的
[class~='one']:具有class属性，并且属性值之一为one的元素
[class^='o']:具有class属性，并且属性值以o开头
[class$='o']:具有class属性，并且属性值以o结尾
[class*='o']:具有class属性，并且属性值中包含o字符的
伪类选择器：
div class="one"
.one（真的类的写法）
:伪类名称（伪类的写法）
:first-child
:last-child
:nth-child(num/odd/even)
:first-of-type:（某一个类型的第一个）
:last-of-type:
a：
:link:未点击状态
:hover:悬停状态
:active：鼠标按下状态
:visited:点击之后的状态
顺序应该为：link->visited->hover->active
伪元素选择器：
::伪元素名称（伪元素选择器的写法）
::first-letter
::first-line
::before
content:''/url()
::after
::selection
5.选择器优先级
!important;//不计入优先级的计算，优先级最高，建议少用。
特性值的计算：
特性值越高，优先级越高；
特性值相同，谁更靠近html，谁的优先级越高
写在style属性内部：1000
id选择器：100
类/伪类/属性 10
标签/伪元素： 1
6.继承
1.有些默认继承父元素，有些不继承
2.属性
1>inherit 继承父元素的样式
2>initial 不继承,应用浏览器的默认样式
7.尺寸+颜色+单位
尺寸：
1>绝对单位 px
2>相对单位 %
1em~1个M的宽度（16px）
颜色：
1>关键字
red
blue
2>rgb(r,g,b)
r:red
g:green
b:blue
0-255
3>rgba(r,g,b,a)
a:apcaity:透明度0-1:
0:完全透明
1:完全不透明
4>16进制颜色值
#
#ff0000
#fff:白色
#ccc:灰色
....
8.文本样式
color:
c:/winodws/Fonts
c:/users/Fonts
font-family:""
web-font:网络字体
1.下载字体文件
2.声明字体 安装
3.引用
<div class="one">
.one{
width:100px;
}
.myone{
width:100px;
}
<div class="myone">
字体图标：
1.font-awesome
1.下载框架压缩包
2.在html中引入外部css文件
3.在行内元素上，设置class='fa fa-xxx'
2.icon-font
1.下载压缩包
2.在html中引入外部css文件
3.在行内元素上，设置class='iconfont xxxx'
text-align:
text-transform:
text-decoration:none
text-shadow:x y blur color
letter-spacing:
word-spacing:
width:
min-width
max-width
height
overflow:设置超出元素部分的展示形式
hidden:超出部分隐藏
scroll:超出部分以滚动条形式展示
元素的隐藏和显示：
display:
none：元素的隐藏 不但隐藏元素本身，还会隐藏元素所占据的空间
block：元素的显示
visibility:
hidden：元素的隐藏 只隐藏元素，不隐藏元素所占用的空间
visible：元素的显示
表格样式：
border-collapse: collapse;//表格边框合并
caption-side: bottom//表格标题位置
列表样式：
list-style:
line-height:
9.盒子
1.盒子的组成
盒子=内容+内边距+边框+外边距
盒子的高度=内容+内边距+边框
盒子所占空间高度=内容+内边距+边框+外边距
2.盒子分类
（1）标准盒子/w3c盒子 默认都是标准盒子
特点：设置的宽高属性-》设置给元素内容的
box-sizing:content-box;
（2）边框盒子/怪异盒子
特点：宽高属性-》盒子：内容+内边距+边框
背景样式设置：background
边框样式设置: border:1px solid red
10.布局
默认文档流：
所有元素根据本身特性在浏览器页面中进行的排序 从上到下 从左到右
布局规则：
先进行行级布局，再进行列级布局
1.display
inline:将块级元素转换为行内元素
block：将行内元素转换为块级元素
inline-block：将元素转换为兼具行内和块级特性的元素(既可以在一行中显示，又可以设置宽高)
2.浮动
特点：不会遮盖文本和行内元素
float:
none
left
right
对元素的影响：
对块级元素设置浮动，块级元素可以在一行中显示,宽度由元素内容撑起
对行内元素设置浮动，可以直接设置宽高属性
浮动何时停止？
1.遇到父元素边框
2.遇到其他浮动元素
浮动元素不遮挡文字和行内元素
1.如果浮动属性设置给块级元素 块级元素可以在一行中显示
2.如果浮动属性设置给行内元素 行内元素可以设置宽高
清除浮动：
clear:
left
right
both
1.给浮动元素和非浮动元素之间添加一个块级元素clear
2.给所有浮动元素的父元素设置
::after{
display:block;
content:'';
clear:left/right/both
}
3.定位布局
position:
static:静态布局（默认文档流）
absolute:绝对定位
特点：
1.脱离默认文档流
2.默认根据body左上角进行定位
3.不保留定位前空间
4.如果父元素具有定位属性时，根据父元素左上角进行定位
relative:相对定位
特点：
1.不脱离默认文档流
2.默认根据元素本身位置进行定位
3.保留定位前空间
fixed:固定定位
固定定位的特点和绝对定位相似
使用了固定定位的元素，不会跟着滚动条的滚动而滚动
sticky:粘滞定位
当没有到达定位地点时，采用relative定位
当到达定位地点时，采用fixed定位
配合属性：
top
left
right
bottom
z-index:改变元素的堆叠顺序（设置给两个使用了absolute定位的元素）
属性值number，number值越大，越靠上
4.伸缩盒（弹性盒）
父元素：
display:
flex;//设置当前盒子为弹性盒子
1.所有子元素自动成为成员项item
2.子元素宽高尺寸超过父元素时，默认被压缩
3.所有子元素的float属性失效
flex-direction: row;设置子元素的显示位置
flex-wrap: wrap//子元素宽度超出父元素是否换行
align-items:
子元素：
flex:number;//当前子元素占据父元素剩余空间的份数