CSS学习记录

• CSS
      在每个标签上都可以设置style属性
          style="background-color: burlywood;
          height: 48px;
  
      编写CSS样式
          1、标签的style属性
          2、写在head里面，style标签中写样式
              （1）#id选择器
              #i1{
              }
              <标签 id='i1'></标签>
              （2）class选择器
              .名称{。。。}
              <标签 class='名称'></标签>
              (3)、标签选择器
                  div{
                  }
                  所有div会设置此样式
              (4)层级选择器（空格）
                  .c1.c2
              (5)组合选择器
                      #c1,.c2，div{
                      }
              (6)属性选择器
                  对选择到的标签在通过属性再进行一个筛选
  
              (标签上的style优先，其他的是编写顺序，就近原则)
              2.5、在当前目录创建commons.css文件写入所有style，就不用再每个文件中写style了，
                  用的时候导入一下就行了
                  样式文件导入方法
                  <link rel="stylesheet" href="commons.css"/>
                  style中各种选择器
          3、注释 /*  */
          4、边框
          10、height width line-height color font-size、font-weight
              height:48px;
               width: 80%;
              color: blue;
               font-size:20px;
               text-align: center;
               /*垂直方向根据标签高度居中*/
                line-height:34px;
                font-weight:bold;
                border: 5px solid red">
              边框示例
          5、背景
          6、float 让标签浮起来，块级标签可以堆叠布局
              <div style="clear: both;"></div>  父float收回框
              float示例
              一个小页面示例
          7、display  （块级标签和行内标签互转）
               display：none  让标签消失
               display：inline
               display：block
               display：inline-block
               行内标签，无法设置高度，宽度 padding margin
               块级标签可以设置
               块内标签和行内标签的转换
  
          8、padding margin
              margin-top  外边距
              padding-top 内边距
              边距，内边距，外边距
          9、text-align
  

  CSS补充：     
  - position     
  - background     
  - hover     
  - overflow     
  - z-index     
  - opacity

   

      position:
          a. fiexd => 固定在页面的某个位置
  
          b. relative + absolute
  
              <div style='position:relative;'>
                  <div style='position:absolute;top:0;left:0;'></div>
              </div>
  
      opcity: 0.5 透明度
      z-index: 层级顺序
      overflow: hidden,auto
      hover
  
      background-image:url('image/4.gif'); # 默认，div大，图片重复访
      background-repeat: repeat-y;
      background-position-x:
      background-position-y: