font:（一般设置文字） P65
font-family;字体
font-size;字号
font-style;斜体
font-weight;加粗
font-variant;变体
(段落和其他文字样式) P72
text-decoration;修饰文字
text-transform；转换英文字母大小写
letter-spacing；中文字符间距
word-spacing；英文单词间距
text-align；段落水平方式对齐
text-indent；段落缩进
line-height；行间距（行高）
列表常用属性 P79
list-style-type；列表符号
list-style-image;图片符号
list-style-position；列表位置
<!Doctype html> 声明HTML文件
<meta charset="utf-8"> 支持中文编码（防止乱码）
<title>标题</title> 网页标题
标签的作用：
<u>下划线</u>
<i>倾斜</i>
<b>加粗</b>
<strong>加粗</strong>
<hr>分割线
<br>换行
超链接：
相对路径：相对于标签所在的文件开始，找目标文件的路径
绝对路径：目标文件所在的位置
<a href="路径" name="锚点" title="提示信息" target="_blank"(另起一个新网页)>超链接</a>
锚点：返回顶部；
在最内容上方加 <a href="" name="top"></a>
在需要点击写 <a href="#top">返回顶部</a>
<textarea name="" cols="5" rows="2"></textarea>
cols: 设置文本域宽度，以字节数记单位；
rows：设置文本与高度，以行数计数；
2019/10/19 9:30
css引入方式：
1.在头部用<style type="text/css"></style>标签引入
2.文件引入，css文件，后缀名为.css的文件,
用<link rel="stylesheet" type="text/css" href="css文件路径">
3.直接在标签里修饰，用标签里style属性引入
第三种方式的级别最高，如果用第三种方式，前两种失效
注意：css代码必须以分号结束，css代码的注释方式：/* 注释的内容 */ 快捷键 Ctrl+？
css选择器：
1.id选择器： #id名称{css代码} 唯一的
2.class选择器： .class名称{css代码} 重复的
3.标签选择器： 标签名称{css代码}
4.行内修饰:用标签里style属性引入
优先级：行内 > id > class > 标签
选择器名称，有意义，容易查询
选择器的命名规则：字母，数字，下划线的任意组合，但是数字不能开头
css属性：
一般属性开头
*{
margin：0； 外边距为0；
padding： 0； 内边距为0；
list-style:none; 去除无序列表的点；
text-decoration:none; 去下划线；
}
width 宽度
height 高度
background-color 背景色
font-size:字体大小
color: green;字体颜色
颜色可以有三种写法：1.英文单词 red blue green
2.16进制写法：#ffffff，#000000，#fa123d，a-f和0-9
任意三个或者六个组合
3.rgb(0-255,0-255,0-255),例如：rgb(10,125,200);
rgba(0-255,0-255,0-255,0-1);
font-family: "宋体";字体
font-weight: bold；字体加粗
text-align: center; 字体左右居中
line-height: 300px;设置行高，字体垂直居中
text-decoration:none; 下划线 ，none 去掉下划线，line-through中线 ，underline下划线
ul li:
list-style:none; 去除无序列表的点
text-decoration:none;去下划线
color：
浮动：浮动的标签与不浮动的标签不属于同一个文档流，做了浮动的标签，它原来的位置 删除
float:left; 左浮动 向左浮动，直到碰到最左边的边框，或者碰到另外一个浮动框，停止
float:right; 右浮动 向右浮动，直到碰到最右边的边框，或者碰到另外一个浮动框，停止
clear:left/right/both; 清除浮动
背景图：background-image:
background-image: url(5.jpg); 引背景图
background-repeat: no-repeat; 不重复
background-size: 10% 10%; 背景图的大小
background-position:30px 50px; 背景图的位置
background: url(5.jpg) no-repeat 100% 100% fixed; fixed 固定背景图
边框： border:1px solid #333;
边距：
外边距：margin:上 右 下 左 margin：2px 5px 6px 30px;
margin-top:
margin-left:
margin-right:
margin-bottom:
margin：30px(上下) 50px（左右）;
标签居中： margin：0px auto;
内边距：padding 上 右 下 左 padding：2px 5px 6px 30px;
padding-left；
padding-top：
padding-right：
padding-bottom：
总结：习惯将在css代码开始的时候添加*的设置，*表示所有的标签
*{
margin:0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
滤镜：opacity:0-1; /*IE浏览器，版本9以上*/
圆角：
/*border-radius:20px;*/
/*border-top-left-radius:30px;*/
border-top-right-radius:30px;
border-bottom-right-radius:60px;
border-bottom-left-radius:90px;
定位：position:
静态定位：static 正常的文档流，恢复被绝对定位影响的元素，元素的原来的的位置还在；
相对定位：relative 元素的原来的的位置还在，配合absolute，做定位的参照物
绝对定位：absolute 元素原来的位[置删除，进入浮动流；元素重叠；
绝对位置：fixed
定位配合上top left right bottom
z-index：数字；数字越大，就越在上面；
伪类: :hover 鼠标移上
非块级元素转化块级元素：
display：block； 非块级元素转化块级元素，并且垂直排列
display：inline-block；非块级元素转化块级元素，并且水平排列，自带边距
display：block； 显示隐藏的元素
display：none； 隐藏显示元素
阴影：
box-shadow:距离左边 距离上边 模糊度 宽度 颜色
box-shadow: 2px 2px 10px 20px blue;
过渡：transition:
transition: background-color 1s,border-radius 5s,margin-top 2s;
transition: all 3s;
变形：
/*transform: translate(30px,50px); */ /*移动*/
/*transform: rotate(-30deg); /*旋转*/
/*transform: scale(1,0.5); /*放大缩小*/
/*transform: skew(89deg,20deg); /*放大缩小*/
动画：animate:
animation-name:dh; 调用动画帧 必须
animation-duration: 2s; 规定动画时间 必须
（animation-timing-function: linear; 规定动画速度
animation-delay: 3s; 动画延迟
animation-iteration-count: 3; 动画次数 infinite(循环播放)
animation-direction: alternate; 动画方向，来回播放
animation-play-state: paused; 动画暂停
渐变：
线性渐变：background-image: linear-gradient(to left,red 50px,green,blue,yellow,pink,orange,purple);
径向渐变：background-image: radial-gradient(closest-side at 60% 55%,red 30%,green,blue,yellow,pink,orange,purple);
兼容:
-webkit- 兼容谷歌浏览器
-ms- 兼容IE浏览器
-o- Opera浏览器
-moz- 兼容火狐浏览器