1.构建css环境，头里加<style>
css属性:
1.1字体属性
font-size:100px;字体大小；
font-weight:bold;字体加粗；normal不加；
font-style：normal;normat不倾斜、italic倾斜；
font-family:"华文行楷"，“宋体”；第一个没有找第二个；
1.2文本属性
a{
text-decoration:none;取消文本修饰；
text-align:cencer;文本对齐方式值：left、cencer、right;
text-indent:2em;首行缩进
color:#000;文字颜色；
/*css注释*/
}
2.选择器
2.1.标签选择器a{ };主要用
2.2ib选择器#idname{}
2.3class类选择器.classname{},主要用
class名字可以有多个名字空格隔开;
用多个类名选择同一个元素；
标签加类名选择同一个元素；div.ft3.ee{}
2.4.关系选择器
后代选择器；div p{}
子元素选择器；div>p{}
兄弟选择器，哥+弟修饰弟；div+p{};
一次性选择多个元素逗号隔开；div,p,a{}
2.5.复合选择器
有标签名放在最前面
标签名.类名{};
3.通配选择器
*{color:#f00}所有标签；
伪类选择器
a:linka{color：red}/*正常状态*/
a:visited{color:grend}/*点击后状态/
a:hover{font-size:20px}/*鼠标放上去*/
a:active{}鼠标按下去时的状态；
总结：伪类选择器不是属性，不能写在{}中；
visited和link不适用普通标签，只有a可以
hover和active是任何标签都可以有的
4.属性选择器(form主要用途)
[属性名]{}；重点
[属性名=属性值]{}；重点
[属性名~=“值”]选择多个之中的一个
----------------------------------------------------------------------------------------
5.属性
line-height:数字px;行高
通常让文字居中
10px;宽；
height:10px;高
background-color:red;背景颜色
background-image:url（）；
background-repeat:repeat;平铺；
no-repeat，不平铺；repeat-x,横平铺；repeat-y,纵平铺；
background-size:200px 200px;调整背景图大小宽，高；
background-position:25px 2px;调背景位置；
关键字调背景位置：top、bottom、left、right、center。
background-position:bottom center;关键字调背景位置；
百分比调背景位置
background-position:50%；
---------------------------------------------------------------------------------------------------------------------------------------------------
6.背景及简写
background:颜色 图片 平铺 定位/大小；
background:#abcdef url(1.png) no-repeat right bottom/100px 100px;
背景图不受滚动条影响
background-attachment:fixed;
背景透明
background:rgba(0,0,255,0.5);有兼容问题
背景色渐变
线性渐变：
backgroung:linear-gradient(to 方向,颜色)；/*颜色可多个*/
径向渐变：
background:radial-gradient(形状,red 20%,ground 80%)；
----------------------------------------------------------------------------------------
列表属性
ul{
/*设置列表前面的符号*/
1. list-style-type:none;
/*图片做前边符号*/
2.list-style-image:url(jian.png);
3.list-style
4.去空间
padding:0;margin:0;
}
应用：通常在网页中，列表去除前边符号，并且去除左边和上边空间;
---------------------------------------------------------
内容溢出
div{
overflow:scroll;生成下x，y滚动条
overflow:hidden;超出部分隐藏，重点
overflow:auto;生成滚动条y
/*英文字母*/
overflow-x:hidden;横向超出隐藏
}
-----------------------------------------------------------------------------------------------
7.样式分类
1.内部样式
<style></style>
2.行内样式（权重高优先，后期做修改用）
style="color:#000"
3.外链样式(项目开发)
<link rel="styleshoot" type="text/css" href="xx.css" >
styleshoot:样式表
4.选择器优先级
伪类首字母>id>class>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
8.标签模式转换
1.行<span>
不能设置宽高
转成块display:block;
2.块<div>,<ul>,....
能给宽高
不能换行，能给宽高
转成行：display:inline-block;
3.行内块Img,input
不能换行，能给宽高
----------------------------------------------------------------------------------------------------------------------------------------------
9.盒子模型
4个组成：宽高、内间距、外间距、边框。
margin:o auto;和text-align:center;区别
margin:o auto;针对的对象不同盒子、块元素；范围：父盒子中居中
text-align:center;针对行元素；范围：自己里面行元素居中
----------------------------------------------------------------------------
10.浮动、伪对象
伪对象：
0.行元素、样式中必须有content属性，否则对象无效。
1.使用css模拟一个标签
2.元素::after{}元素：：before{}
伪对象，元素前面加内容
.box::before{
content:"好诗"；
}
伪对象，元素后加内容
.box::after{
content:"好诗"；
}
浮动:强制性让元素在最左边或最右边，浮动后元素不占原来的空间
语法：float：left/right ;
用途: