css导入方式
①行内样式（写在需要改变的标签里）
②内部样式（单独写在中）
③外部样式（单独写在.css文件中）
优先级：就近原则，离标签近的生效
选择器
标签选择器 h1 {}
类选择器 .nav {} (nav是标签的属性class=“xxx”)
多个标签可以是同一个class
id选择器 #nav {} 不能复用 唯一
优先级：从高→低依次是id-类-标签
层次选择器
后代选择器 body p {} 选择body下的所有p标签，儿子p，孙子p，只要是p都被选择到
子选择器 body>p {} 选择body下的儿子p标签
兄弟选择器 .class/#id + p {} .active往下的第一个兄弟p标签
通用选择器 .class/#id ~ p {} .active往下的所有兄弟p标签
结构伪类选择器
ul li:first-child {}
ul li:last-child {}
p:nth-child(1) {}选择父级第1个标签，并且是p才生效
p:nth-of-type(1) {} 选择父级第1个p标签，p标签不一定在第一行
属性选择器（常用）
a[id] {} 选择a标签带id的
a[class *= “xxx”] {} 选择所有class里带xxx的标签
a[href ^= http] {} 选择href开头为http的标签
a[href $= pdf] {} 选择href以pdf结尾的标签
span标签：重点要突出的字使用该标签（行内元素）
字体样式
字体
font-family: 汉仪超粗宋简;
大小
font-size: ;
粗细
font-weight: bold粗体 lighter细体
颜色
color
font：风格 粗细 大小 字体
文本样式
color: rgb(0, 0, 0);
color: rgba(0, 0, 0, 0.5);
text-align: center left right justify两端对齐
text-indent: 2em 首行缩进两个汉字
height/weight：标签的长宽
line-height:行高
text-decoration：underline下划线 line-through删除线 overline上划线 none取下划线
vertical-align: middle; 垂直居中
a:active {} 鼠标按住未释放的操作
a:visited {} 访问过后的操作
a:hover {} 鼠标经过的操作
列表
li中的·
list-style: none清零/circle空心圆/decimal有序列表/square正方形
平铺div
div {
background-image:url("");
background-repeat: repeat-x/repeat-y/no-repeat;
}
指定照片在一个位置
background: red url("images/1.jpg") 2900px 780px no-repeat;
渐变网站
盒子模型
margin外边距
padding内边距
border 边框 solid实线 dashed虚线
去掉网页的内边距外边距
*{margin:0; padding:0;}
外边距的妙用：居中元素
margin: 0 auto 自动对齐
圆角边框
border-radius 10px | 50px 20px | 50px 20px 10px 5px
圆
等于weight或height的一半（weight=height）
盒子阴影
box-shadow: 10px横向偏移 10px纵向偏移 1px模糊度 yellow颜色
块级元素：独占一行
h1~h6 p div 列表 ···
行内元素：不占一行
span img a strong em ···
行内元素可以被包含在块级元素，反之不行
span元素无法设置width、height
display: block块元素 inline-block保持块元素特性且可以写在一行 inline行内元素 none消失
float: left左浮动 right有浮动
clear: left清除左侧浮动 right清除右侧浮动 both两侧不允许有浮动 none
☆父级边框塌陷
1.增加父级元素高度（不建议）
2.增加空div 清除浮动 外内边距→0（尽量避免）
3.overflow：hidden隐藏 scroll添加滚动条 auto自动
4.父类添加一个伪类：after 最认可的解决方案
#father:after {
content: ' ';
display: block;
clear: both;
}
display：方向不可控制，但没有塌陷问题
float：方向可控，但要解决塌陷问题
定位
相对定位 相对原来位置进行指定偏移
position:relative 距离 top left right bottom 移动多少px
绝对定位 写死 基于xxx定位
1.没有父级元素定位前提，相对浏览器定位
2.假设父级元素存在定位，相对于父级进行偏离
3.在父级元素范围内移动
z-index：999 层级
opacity:0.5 背景透明度
position:fixed 固定定位：永远固定在浏览器某个位置