CSS总结

一：CSS三种引入方法
                 1.行内样式：直接在style属性中写：键：值
                 <p style="color: red;"> 北京尚学堂</p>
                 
                 2.内嵌样式:在head中的style中定义，指定标签名，写样式
                 
                 3.外部引入样式：在css文件中直接指定标签名，写上样式，不需要写在style中
                       rel:引入文件与当前文件的关系    href：引入文件的路径    
                 <link rel="stylesheet" type="text/css" href="css/css1.css"/>
    
    二：CSS的选择器
                
           1.基础选择器
                                           通用选择器*      标签选择器          类选择器              ID选择器
           2.关系选择器
                                                  后代选择器(空格)   子选择器 >   兄弟选择器 + ~  
            3.伪类选择器
                  hover  empty  focus  checked  first-child  nth-child
            4.伪对象选择器
                  before   after
            5.属性选择器
                  input[type='text']  属性^:以什么开头     属性$:以什么结尾
     
     三：CSS的属性
          1.字体：          /*字体颜色*/
                color: grey;
                /*字体大小*/
                font-size: 12px;
                /*字体风格*/
                font-family: 宋体;
                /*字体样式*/
                font-style: italic;
                /*字体加粗*/
                font-weight: bold;
         
         2.text:  /*去掉下划线*/
                text-decoration: none;
                
                /*添加下划线*/
                text-decoration: underline;
                
                /*文本内容水平居中*/
                text-align: center;
                
         3.行高：        /*行高：和div高度相同会垂直居中*/
                line-height: 40px;
                
         4.背景图片：  /*背景图片*/
                background-image: url("http://img30.360buyimg.com/da/jfs/t22399/154/765213112/96035/f94f9605/5b17512dN2de9d722.jpg");
                /*背景图片不重复*/
                background-repeat: no-repeat;
                /*背景图片位置     X:     Y:*/
                /*background-position: 20PX 20PX;*/
                background-position: center;
                /*背景图片大小     宽      高*/
                /*background-size: 400px 300px;*/
                /*背景颜色       red  #01c500   rgb(255,0,0)   rgba(255,0,0,.5):透明度*/
                background-color: rgba(255,0,0,.5);
        
         5.透明度
                /*color: rgba(255,0,0,.5);*/
                /*background-color: rgba(0,0,255,0.5);*/
                opacity: 0.4;
                
         6.超出隐藏  下拉  hidden   auto*/
                overflow: hidden;
                
         7.行内元素---》块元素   block     
                 块元素---》行内元素  inlike
                         none隐藏
                display: block;
               行内元素(标签不可以自动换行的元素)
               span  a  img  font  小标签  等
                              块元素(标签可以自动换行的元素)
               div  h1-h6   ul   p   等
                
         8.浮动float
                /*去除列表前面的标识*/
                list-style: none;
                /*左浮动*/
                float: left;
                /*内边距*/
                padding-left: 20px;
                
         9.倒圆角指定  一个数：四个角
                     两个数：左上/右下    左下/右上
                     四个数：左上   右上   右下   左下
                 
                border-radius: 100px;
                
         10.旋转角度
                 transform: rotate(45deg)  旋转角度
                            scale(1.3)     放大倍数
                            translate(0px,-5px)  水平位移   垂直位移    负数：上
                            skew(45deg,45deg)    2D角度的旋转
                 
                transform: rotate(45deg);
                
         11.阴影      水平方向的偏移    垂直方向的偏移    模糊度     阴影的颜色*/
                 box-shadow: 0px 0px 70px #d5093c;
                 
        12.CSS3中的动画*/
            @keyframes a{
                0%{transform: scale(1) rotate(45deg);}
                50%{transform: scale(1.1) rotate(45deg);}
                100%{transform: scale(1)rotate(45deg);}
            }
            @-ms-keyframes name{
                from{}
                to{}
            }
            /*执行动画调用*/
            animation: 1s a infinite
            
    四：CSS的定位：
            1.绝对定位absolute：离开后会释放之前的位置               基于外层父级标签定位
    
            2.相对定位relative：离开后不会释放之前的位置           基于之前的位置定位
    
            3.固定定位fixed：        相对于浏览器左上角的位置定位   适合做广告
    
            4.默认定位static：    初始化时的位置
            
    五:CSS中盒子模型：
            1.内边距    div和border的距离
                       一个数：四边
                       两个数：上下    左右
                       三个数：
                       四个数：上     右   下    左
                
                padding: 20px 40px ;
                
            2.外边距   给盒子进行定位
                          水平方向取合并值
                          垂直方法取较大值
                                           
                margin-bottom: 20px;