css基础
1、css编写方式
1.1、在标签上设置style属性
1.2、 写在head里面，style标签中
a. id选择器（不推荐）
<div id="i1">1</div>
#i1{ background-color: #2459a2; height:48px; }
b. class选择器（推荐）
<div class="c1">1</div>
.c1{ background-color: #2459a2; height:20px; }
c. 标签选择器
<div class="c1">1</div>
div{ background-color: black ; color: white; }
d. 层级选择器
层级选择器以空格作为分割。
<span><div class="c1">1</div></span>
span div{
background-color: black ;
color: white;
}
e. 组合选择器
组合选择器以“，”分割不同的选择器。
<div id="i1">1</div> <div id="i2">2</div> <div id="i3">3</div>
#i1,#i2,#i3{ background-color: black ; color: white; }
f. 属性选择器
对选择到的标签再通过属性再进行一次筛选。
1.3、写在单独文件中
在HTML文件head中的引用方法：
<link rel="stylesheet" href="commons.css">
1.4、不同方式css的优先级
HTML标签上style优先，编写顺序，就近原则。
2、css属性组
2.1、边框
宽度，样式，颜色： border:4px dotted red;
2.2、常用属性
| 属性 | 定义 | 说明 |
| height | 高度 | |
| width | 宽度 | 可以用像素或者百分比 |
| text-align | 水平居中 | |
| line-height | 垂直方向根据标签高度 | |
| color | 字体颜色 | |
| font-size | 字体大小 | |
| font-weight | 字体加粗 |
2.3、float
让标签飘起来，块级标签也可以堆叠。末尾需要添加： <div style="clear: both"></div>
2.4、display
a. display: inline
标签将显示为内联元素。
b. display: block
标签将显示为块级元素。
注意：
行内标签无法设置高度，宽度，padding margin；块级标签可以设置高度，宽度，padding margin。
c. display:inline-block
具有inline的属性，默认自己有多少占多少；具有block，可以设置高度，宽度，padding margin。
d. display:none
让标签消失。
2.5、padding与margin
padding:内边距；margin:外边距。
2.6、position
a. position: fixed
固定在页面的某个位置
b. position: relative 与 position: absolute
relative: 相对定位
absolute: 决对定位
2.7、 opacity
透明度
2.8、z-index
层级的顺序，值大的在上面。
2.9、overflow
overflow：hidden，隐藏超出部分；overflow：auto, 如果超出，出现滚动条。
2.10、hover
.pg-header .menu{
}
.pg-header .menu:hover{
}
当鼠标移动到当前标签上时，一下css属性才生效
2.11、background-image
background-image:url('image/4.gif'); #默认，div空间大，图片重复放。
2.12、background-repeat
background-repeat:repeat-x，横着加图片；
background-repeat:repeat-y，竖着加图片；
background-repeat:no-repeat;只有一张图片。
2.13、background-position-x
图片x轴的坐标。
2.14、background-position-y
图片y轴的坐标。
2.15、background-position
直接指定x,y的坐标： background-position: 10px 20px
2.16、background简写
background：url（image/5.png）-105px -212px no-repeat
3、示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .pg-header{ height: 38px; line-height: 38px; background-color: #71B5DE; } </style> </head> <body style="margin: 0 auto;"> <div class="pg-header"> <div style="margin: 0 40px;"> <div style="float:left;">收藏本站</div> <div style="float:right;"> <a href="">登录</a> <a href="">注册</a> <a href=""></a> <a href=""></a> </div> <div style="clear: both"></div> </div> </div> <div style="width: 400px;border: 1px solid red"> <div style="float: left;height: 30px;width: 96px;border: 1px solid green"></div> <div style="float: left;height: 30px;width: 96px;border: 1px solid green"></div> <div style="float: left;height: 30px;width: 96px;border: 1px solid green"></div> <div style="float: left;height: 30px;width: 96px;border: 1px solid green"></div> <div style="float: left;height: 30px;width: 96px;border: 1px solid green"></div> <div style="float: left;height: 30px;width: 96px;border: 1px solid green"></div> <div style="float: left;height: 30px;width: 96px;border: 1px solid green"></div> <div style="float: left;height: 30px;width: 96px;border: 1px solid green"></div> <div style="float: left;height: 30px;width: 96px;border: 1px solid green"></div> <div style="float: left;height: 30px;width: 96px;border: 1px solid green"></div> <div style="float: left;height: 30px;width: 96px;border: 1px solid green"></div> <div style="float: left;height: 30px;width: 96px;border: 1px solid green"></div> <div style="clear: both"></div> </div> </body> </html>
