CSS技术概要

CSS简单概要

在标签上设置style属性：

  background-color: #2459a2;
  height: 48px;
  ...

编写css样式：
1，标签的style属性
2，写在head里面，style标签中写样式

 - id选择器
     #i1{
         background-color: #2459a2;
         height: 48px;
     }
     - class选择器
     .名称{
         ...
     }
     <标签 class='名称'></标签>
 - 标签选择器
     div{
         ...
     }
     所有的div设置上此样式

 - 层级选择器（空格隔开）
     .c1 .c2 div{
         ...
     }
 - 组合选择器（逗号隔开）
     .c1,#c2,div{
         ...
     }
 - 属性选择器
     对选择到的标签再通过属性再进行一次筛选
     input[type="text"]{width: 100px;height: 200px;}
 PS:
     优先级，标签上style优先，编写顺序，就近原则

css样式也可以写在单独文件中
	 <link rel="stylesheet" href="commons.css" />

3，注释

  /* 注释内容 */

4，边框

  - 宽度，样式，颜色（border: 4px dotted red;）
  - border-lift,border-right

5，属性

  height，         高度
  width，          宽度  像素，百分百
  text-align:center，水平方向居中
  line-height，垂直方向根据标签高度
  color，      字体颜色
  font-size，  字体大小
  font-weight  字体加粗

6，float

  让标签浪起来，块级标签也可以堆叠
  老子管不住：
      <div style="clear: both;"></div>
  例：
      <div style="width: 20%;background-color: red;float: left;">dasd</div>
      <div style="width: 80%;background-color: black;float: right">2</div>

7，display

  display:none; --让标签消失
  display:inline;
  display:block;
  display:inline-block;
          具有inline，默认自己有多少占多少
          具有block，可以设置高度，宽度，padding，margin
  ******
  行内标签：无法设置高度，宽度，padding，margin
  块级标签：设置高度，宽度，padding，margin

  <div style="background-color: red;display: inline;">asd</div>
  <span style="background-color: red;display: block;">sdasdsdas</span>
  <hr/>
  <div style="background-color: red; height: 50px;width: 70px;">sads</div>
  <span style="background-color: red; height: 50px;width: 70px;">sads</span>
  <a style="background-color: red;">ABC</a>

8，padding，margin(0,auto)

  边距，
  margin:     外边距
  padding:    内边距，

9，text-align

CSS补充

position:
  fixed => 固定在页面的某个位置
  relative + absolute
      <div style="position:relative;">
          <div style="postion:absolute;top:0;left:0;"></div>
      </div>

opcity: 0.5 透明度
z-index:层级顺序
overflow:
  hidden:隐藏
  auto:出现滑轮
hover:
  /* 当鼠标移动到当前标签上时，一下css属性才生效*/
  .pg-header .menu:hover{
      background-color: blue;
  }
background-image: url("image/4.gif");# 默认，div大，图片重复访问
background-repeat: repeat-y;
background-position-x:
background-position-y:
background-position: 10px 10px;
background: