二、css基础
CSS：
概念：就是在<head>标签中设置<style>标签属性：
<style>
...
</style>
编写css样式：
1、标签的style属性，body标签中的各种标签需要应用css样式格式写在head头标签中，样式注释：/*...*/
2、style标签写样式的几种选择器：
-id选择器：根据标签的id属性进行样式应用，各个标签的id不能重复，不建议用这种选择器，没办法实现代码重用
#id{
background-color:#dddddd;height:300px;...
}
-class选择器：根据标签的class属性，各标签的class属性可以一样，推荐使用
.class属性名{
...
}
-标签选择器：根据标签名应用样式，所有的该标签都应用该样式
标签名（例如：div）{
...
}
-层级选择器：中间用空格分开，可以是#id，也可以是.class，一层一层的找到最里面层级标签，并对其用上样式
#id .class #id div .class{
...
}
-组合选择器：中间用“，”逗号隔开，逗号前后的标签都能应用该样式
#id ，.class， #id， div， .class{
...
}
-属性选择器:对选择到的标签再通过其属性进行样式的应用，前面是#id、classs名或者是标签名，后面的[ ]里面写上该标签的属性key=value,其中属性key可以是自带的，也可以由程序员自行定义一个属性名
#id[key=value]{
...
}
3、RGB颜色对照表，网页搜索对照表；
4、优先级的选择
-css引用优先级：标签里面的style优先，title标签里面的style如果有多个样式，里面有重复的样式属性，渲染顺序是就近原则（靠近标签的先引用）
-css引用也可以写在css文件里面，css文件不用加<style></style>，直接编写样式属性，在需要引用css样式的时候直接在<title>标签里面引用：<link rel="stylesheet" href="css文件路径">
5、style边框 border:1px solid red ,分别为：宽度，样式（虚线/实线） 颜色，还可以写border-left等，边框左边样式，height高度 可以用像素，高度用百分比没什么用，widch宽度 可以用像素，也可以用百分比，font-size字体大小，font-weight=bold字体加粗，text-align=center水平方向居中，line-height垂直方向根据高度居中；
6、flost属性
让标签浮动起来，块级标签可以堆叠在一行，当两个标签占有的宽度总和超过页面宽度的时候就会另起一行
当父标签的边框被子标签的边框掩盖时，在父标签最下面加上<div style="clear:both"></div>可以让父标签的边框显示出来
7、display
display:none ；让标签消失，配合多层次的界面使用
display:inline；转换成行内标签，带有行内标签的特性，但是不能修改高度，宽度、padding 、margin
display:block；转换成块级标签，具有块级标签的特性
display:inline-block；具有行内标签和块级标签的特性，可以设置高度、宽度、padding 、margin
8、padding、margin，内边框和外边框属性设置,padding自身发生变化
9、position：
a、position="fiexd"，固定在页面的某个位置，出现页面的层级，top，bottom、left、right，设置显示的位置，注意，在页面顶部设置标签的时候，会覆盖下面的标签部分类容，只需要在下面标签里面设置margin属性即可。
b、relative+absolute ：单独的标签无法应用，需要有父子级别关系的标签组，父标签包含relative属性，子标签包含absolute属性，相当于子标签定位到父标签的对应位置，可以超过父标签的上下左右，例如子标签的position设置 left:-10px，就是超过父标签左边10像素。
<div style="position=‘relative;’">
<div style="pisition=‘absolute;top:0;right=0;..’"></div>
</div>
c、display属性应用：层级样式，display="none"默认不显示标签，行内标签的margin属性无效，但是可以设置display="line-block"给予行内标签块级属性，设置margin-left,margin-top等，该方法可以应用在弹出框对齐的方法上，z-index='num'设置堆叠优先级别，num大的在上层，opacity: 0-1之间设置透明度,个人实践：opacity属性写在最后面，接在中间好像显示不出效果；
d、返回顶部按钮的功能实现用到了position:fiexd,然后设置top，left等属性
10、overflow，=hidden时隐藏超过大小的部分，=auto时超出大小范围时出现滚动条，特别是插入图片的时候；
11、：hover样式css功能：当鼠标移动到当前标签上的时候，属性才生效，例如：
.pg-hander .claaa .menu:hover{
background-color :blue;
}就表示class属性名为pg-hander标签下的属性名class标签下的属性名menu对应标签遇到鼠标移动到其上方时显示的属性。
12、background-image:url(如果是地址就加引号""，是指定的图片就不需要加引号)；默认是图片垂直水平都会重复，
background-repeat:repeat-y表示y轴重复，repeat-x表示x轴重复，repeat-norepeat表示xy轴都重复
在网页小图标设计时，一般都会讲很多小图标放在一张图上面，通过position来设置哪些位置需要显示哪些图片，如：
backgrpund-position -x:**px，目标图片x轴移动多少像素，值可正可负
backgrpund-position -y:**px，目标图片y轴移动多小像素，值可正可负
backgrpund-position : **px **px，上面xy两种方式的简写，
backgrpund: #RGB颜色 url(如果是地址就加引号""，是指定的图片就不需要加引号) **px **px no-repeat/repeat-x/repeat-y ，这种书写方式最简洁。
