CSS(层叠样式表)

目录

一、css概述

1. 概念:

2. 好处:

二、css的使用

1. css语法

2. css三种引入方式

3. 选择器类型

4. 浮动

5. 定位

6. 盒模型

7. 弹性盒布局

(1)父元素书写属性

(2)flex布局子项常见属性:

8. 溢出

9. 转换&过渡

10. 动画

11. 背景声明

12. 媒体查询 

13. 视口

14. 显示与隐藏

15. 鼠标样式

16. css精灵技术

17 . 滑动门

18. css三角形效果   

20. 页面布局

21 .bootstrap前端开发框架

22.浏览器私有前缀(兼容老版本浏览器)

23.移动端特殊样式:

22. 整体页面搭建


一、css概述

1. 概念:

Cascading Style Sheets 层叠样式表(定义页面如何显示)
    * 层叠:多个样式可以作用在同一个html的元素上,同时生效

2. 好处:

    (1)功能强大
    (2)将内容展示和样式控制分离
            * 降低耦合度。解耦
            * 让分工协作更容易
            * 提高开发效率

二、css的使用

1. css语法

            选择器(符){属性名:属性值(声明);属性名:属性值}
            (属性名与属性之间用英文冒号连接,属性值后面以英文分号进行结尾。可以书写多个属性,当一个属性中,有多个属性值,属性值与属性值之间用空格隔开)   

  p{cursor: pointer(小手)/default(指针);(指向某元素时显示的鼠标指针类型);

  visibility: hidden;(设置元素是否可见或不可见)}

  p{color: green;font-size: 30px;}

2. css三种引入方式

(1)内联样式表(行内样式表):在html标签中添加一个sytyle属性,在style属性里添加css效果

   <p style="color: blue;"></p>

(2)内部样式表:在head标签里添加一对style双标签,再css实现效果(用css语法)

             <head>
                <!-- 头部标签 -->
                <style>
                    p {
                        color: green;
                        font-size: 30px;
                    }
                </style>
             </head>

(3)外部样式表:新建css文件,在head标签中添加link单标签链接(英文输入法,书写link,单击tab键自动生成链接)css文件(用css语法)

            <head>
                <!-- 头部标签 -->
                <link rel="stylesheet" href="css/style.css">
            </head>

            (rel=“告诉浏览器需要链接的文件是样式表的格式”)
            ( href="需要链接的css文件路径")
           
      div{
            color:green; 颜色
            font size:36px; 字体大小
            width:200px; 宽度
            height: 200px; 高度
            background-color: skyblue; 背景颜色
            border: 2px solid red; 边框(线条粗细 线形(实线solid/虚线dotted(dashed)/double双实线 颜色))
            }


 导入外部样式表:   

            <head>
                <style type="text/css">
                    @import url("css/style.css");
                    /* @import放在style元素的最前面,语句后加分号 */
                </style>
            </head>
  页面导入样式时,使用 link 和 @import 有什么区别 

1.从属关系区别
@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,
                            不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。

2.加载顺序区别
加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别
@import是 CSS2.1 才有的语法, IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。

4.DOM可控性区别,link支持使用Javascript控制DOM去改变样式;而@import不支持

3. 选择器类型

(1)元素(标签)选择器:

            以标签名(h / p / img / a / ul / ol / dl / li / form / div...)作为选择的方式添加属性效果

  p {color: green;font-size: 30px;}

(2)class(类)选择器
          a.在html里面添加一个class属性,在css中添加相应的属性名添加效果
          b.在class名之前要加英文输入法的点,用于识别class名
          c.一个元素可以有多个class名,多个class名之间用空格隔开
          d.不同元素之间,class名可以重名,但展现的效果是一样的        

<p class="box box2">内容</p><!-- 多个class名,多个class名之间用空格隔开 -->
 <h1 class="box2"> 内容</h1>
                 
                 .box{
                        color: green;}

                 .box2 {
                        font-size: 30px;}

(3)id选择器
            a.在html里面添加一个id属性,在css中添加相应的属性名添加效果
            b.在id名之前要加#,用于识别id名
            c.id名相当于网页的证件号码,具有唯一性(体现在js中)

  <div id="demo">内容</div>

  #demo{color:red}

通过标签的id属性进行-锚点跳转
设置锚点:<a id="text1"></a>
页面内锚点跳转:<a href="#text1"></a>
跨页面锚点跳转:<a href="网址#text1"></a>

(4)群组选择器(打组作用:不同选择器标签实现相同属性效果(不同选择器之间用英文逗号隔开))
        选择器1,选择器2{属性名:属性值;属性名:属性值;}          

  <div id="demo2">内容</div>
  <p class="box3">内容</p>

#demo2,.box3{color:purple;font-size:40px;} 
(两个元素同时应用样式)<!-- 不同选择器之间用英文逗号隔开 -->

(5)包含选择器(父级和子级的关系:前面的选择器必须是后面选择器的父级标签)
            子选择器(父级与子级选择器之间用空格隔开,子元素应用样式)
            选择器1 选择器2{属性名:属性值;属性名:属性值;}
          

 <div class="text">内容
   <p class="tt">内容</p>
 </div>

.text .tt {color:purple;font-size:40px;}


            父选择器( 前面的选择器必须是后面选择器的直接父级标签,父元素应用样式 )
            选择器1>选择器2{属性名:属性值;属性名:属性值;}

 <div class="text">内容
  <p class="tt">内容</p>
 </div>

.text>.tt{color:purple;font-size:40px;}

(6)相邻兄弟选择器(相邻元素之间用+隔开,但只有后一个元素应用样式)
            <div id="demo2">内容</div>
            <p class="box3">内容</p>
            #demo2+.box3{color:purple;font-size:40px;} <!-- 只有后一个元素.box3应用样式 -->

(7)  联合选择器
            p.c3{元素+类选择器}

    <p class="c3">内容</p>

(8)伪类选择器-鼠标划过效果
            选择器:hover{属性名:属性值;属性名:属性值;}    

<a href="https://www.baidu.com/">内容</a>

        a:hover{
            color:yellow ;font-size:40px;
            opacity:0.5(不透明度:0-1) }

        .menubox ul li ul{
            background:blue;
            display:none; -隐藏不显示
            }

        .menubox ul li:hover ul{
            display:block;鼠标划过展示
            }

            a:link{未被访问状态}
            a:hover{鼠标划过} (必须置于link和visited之后才有效 )
            a:active{活动状态(点击时未松开鼠标)} (必须置于hover之后才有效 )
            a:visited{已被访问状态}
           
          

 
        结构伪类选择器

            p:first-letter{第一段}
            p:first-line{第一行}
            E:first—child 匹配父元素中的第一个子元素E
            E:nth—child(n) 匹配父元素中的第n个子元素E
            E:nth—child(even/2n) 匹配父元素中的第偶数个子元素E
            E:nth—child(odd/2n+1) 匹配父元素中的第奇数个子元素E
            E:nth—child(5+n) 匹配父元素中的第5个之后子元素E
            E:nth—child(-5+n) 匹配父元素中的前5个子元素E
            E:first—of-type 指定类型E的第一个
            E:last—of-type 指定类型E的最后一个
            E:nth—of-type(n) 指定类型E的第n个
            E:nth—of-type(even/2n) 指定类型E的第偶数个
            E:nth—of-type(odd/2n+1) 指定类型E的第奇数个

 伪元素选择器
            ::before 在元素内部的前面插入内容  
            ::after  在元素内部的后面插入内容

          注意:before和after必须有content属性
                     before在内容前面插入一个行内元素,after在内容后面插入一个行内元素
                     before和after创建一个元素,但是属于行内元素
               因为在dom里看不见创建的元素,所以成为伪元素
               伪元素和标签选择器一样,权重为1

::before 和:after 中双冒号和单冒号的区别

单冒号( : )用于 CSS3 伪类,双冒号( :: )用于 CSS3 伪元素
用于区分伪类和伪元素

(7)通配符选择器 (代表所有元素)--清除元素自带间距
            *{属性名:属性值;属性名:属性值;} 

      *{
            padding:0;
            margin:0;
            }

(8)属性选择器
            定义属性选择器时,方括号“[]”将属性包围住
            [title]{带有title属性的所有元素设置样式}

            p[name*="text"]{名字中包含text}
            p[name$="selector"]{名字中后缀包含selector}
            p[name^="attribute"]{名字中以attribute开头}
            p[name~="attribute"]{名字中只要含有attribute}
            p[name="attribute"]{名字为attribute}

选择器权重大小

   (权重越大,css显示效果越优先)!impoertant>行内样式(权重1000)>id选择器(权重100)>class选择器(权重10)>元素选择器(权重1)
            (1)元素选择器(和伪元素选择器):0001
            (2)class选择器:0010

            (3)伪类选择器: 0010(建立在其他选择器的基础上进行效果展示,与其他选择器没有可比性)
            (4)id选择器:0100
            
            (5)包含类选择器:等于里面每个选择器之和
            (6)群组选择器:单独计算(打组)
            (7)如果权重相同,谁写在后面听谁的(后来居上)
            (8)若果子元素没有规定样式,则子元素会继承父元素的样式,但继承的样式权重不如后来指定的css样式
            (9)网页编写者设置的css样式优先权高于浏览器默认所设置的样式
          (10)在同一组属性设置中标有“!important”规则的优先级最大(无穷大)

                div{
                       color:pink!important;
                   }

4. 浮动

               定义了浮动的元素在一行之中向左或向右移动(会使像素向左或向右移动,其周围的元素也会重新排列,若浮动的元素父级一行装不下,则会另起一行排列)(相当于将disply属性改为inline-block,但元素之间没有空隙)

float:left;(向左浮动)/right;(向右浮动)

(1)正常情况下,父元素不设置高度的话,他的高度由子元素撑开

(2)子元素添加浮动之后,父元素高度为0,也就是高度塌陷(会影响父元素的兄弟级位置:自动补齐浮动后留下的空白)

(3)高度塌陷解决办法:
            a. 给父元素添加一个固定高度(缺点:需要元素)

            b. 给父元素添加溢出属性:隐藏 overflow:hidden(auto/scrool);(最常用,但内容增多时不会换行,有些内容可能被隐藏)

            c. 清除浮动(在最后一个浮动元素末尾添加一个空的标签,例如:

<div style="cleal:both"></div>)  缺点:增加额外标签

            clear:right(元素右边不能有浮动元素)

                   left(元素左边边不能有浮动元素)

                   both(元素左右两边都不能有浮动元素)


           d. 使用after伪类元素清除浮动(给浮动元素的父级标签添加)
              after方式为空元素额外标签升级版,即不用单独加标签了         

     .clearfix:after{
                  content:“”;
                  disply:block;
                  height:0;
                  visbility:hidden;
                  clear:both;
                  }

     .clearfix{
                    *zoom:1;(ie6和ie7浏览器不支持,需额外加上)
                }
              }


            f. 使用双伪元素清除浮动

             .clearfix:before,
             .clearfix:after{
                              content:“ ”;
                              disply:table;
                                }

             .clearfix:after{
                             clear:both;
                }     
           
             .clearfix:{
                              *zoom:1;(ie6和ie7浏览器不支持,需额外加上)
                              }

5. 定位

      元素根据参照物的不同来进行位置的设置(同float一样,绝对定位和固定定位也会将disply属性默认转换成行内块元素,同时给盒子加了浮动和定位,就不会出现垂直外边距合并的问题了)

 absolut:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位
 fixed :生成绝对定位的元素,相对于浏览器窗口进行定位
 relative:生成相对定位的元素,相对于其正常位置进行定位
 static 默认值。没有定位,元素出现在正常的流中
 inherit 规定从父元素继承 position 属性的值

position:
            (1)relative 相对定位(参照自己本身的位置移动,移动时原有位置继续保留)
            作用:a.微调元素位置 b.搭配绝对定位使用
            (方向:top上/bottom下/left左/right右)
            position:relative;
            left:100px;(向左留出100像素的距离,相当于向右移动)

            (2)absolute 绝对定位(参照第一级父级元素的位置移动,若第一级父级元素没有添加定位则参照向上一级父级元素的位置,层层递进直至参照浏览器的body位置移动)移动时不保留原有的位置
            定位原则:父相子绝(父元素是相对定位,子元素是绝对定位)
            (方向:top上/bottom下/left左/right右)
            position:absolute;
            right:0px; top:0x;(距自己的父级右上都为0像素的距离)

            (3)fixed 固定定位(参照浏览器的窗口位置进行定位)
            作用:固定导航栏,返回顶部栏,小广告
            (方向:top上/bottom下/left左/right右)
            position:fixed;
            top:0x;

        注意:绝对定位和固定定位的盒子不能通过设置margin:auto设置水平居中

        解决办法:首先left:50%(让盒子左侧移动到父级元素的中心位置),然后margin-                                          left:- 盒子自身宽度的一半像素(让盒子想左移动一半距离)

堆叠(图层)顺序:

            (只能应用与相对定位/绝对定位/固定定位的元素上,其他标准流、浮动和静态定位无效)
      z-index:正整数/负整数/0 默认是0,数值越大,盒子越靠上,如果属性值相同,则按书写顺序,后来居上
        position:absolute
        z-index:1(表示在第1层显示)
        相当于图层顺序,数字越大越在上层显示,须结合定位使用

6. 盒模型

           盒模型:CSS把每个元素视为一个盒子,每个盒子包括分为内容(content)、填充(padding)、边框 (border)、边界(margin)四个部分。盒模型是CSS布局的基本单元。

W3C标准盒模型(border-box):属性width,height只包含内容content,不包含border和padding。 
             增加padding值和border值,不会改变盒子大小,即width和height设置了多大就是多大
    

IE盒模型(也称怪异盒模型)(content-box):属性width,height包含content、border和padding
             如果内边距增大了,整个盒子也是增大的,那么要保持整个盒子 
             不变大的话,就要减小宽读或者高度,即内容区的宽度或者高度
相互转换:
1 box-sizing:content-box 盒子大小为 width+padding+border(以前默认的)

2 box-sizing:border-box  盒子大小为width

      所有html元素都可以看作盒子,在css中,盒模型是用来设计和布局时使用的,盒子描述了元素及其属性在页面布局中所占的空间大小(即规定了页面中元素和元素之间的间距,以及元素的内容到边缘之间的间距)
            组成元素:margin(外边距),border(边框),box-shadow(盒阴影),padding(内边距/填充)和content(实际内容)

            (1)内容 content:宽度和高度

            (2)内边距 padding:内容和边框之间的距离(改变盒子的大小,撑开盒子,如果这个盒子没有宽度则padding不会撑开盒子)

    padding-top/bottom/left/right:100px;

            (3)边框 border:边框粗细 线型 边框颜色         

border: 2px solid red; 
边框(线条粗细 线形(实线solid/虚线dotted(dashed)/double双实线 颜色))

 border-top/bottom/left/right


             圆角效果

border-radius:10px 20px 30px 40px; //左上顺时针开始

border-radius:50%(圆);

            (4)盒阴影

box-shadow:1px -2px 5px 0px yellow;
     (水平阴影           垂直阴影     模糊距离-虚实  阴影尺寸-大小  阴影颜色)
左右位移(左负右正)  上下位移(上负下正)               阴影粗细    阴影颜色

            (5)外边距 margin:盒子(边框)与盒子(边框)之间的距离(改变盒子(内容)的位置)--(同辈元素之间的关系)

               (外边距)塌陷现象:对于两个嵌套关系的块元素,如果父元素没有上内边距或上边框,父元素的外边距会和子元素的外边距发生合并,合并后取外边距为两者中的较大者,即会出现控制子元素的外边距时,父元素的外边距会一起跟着变
                        解决办法:
                                a.为父元素定义上边框
                                b.为父元素定义上内边距
                                c.为父元素添加overflow:hidden
          

 margin-top/bottom/left/right:100px
 margin:0 auto;(上下边距为0,水平居中)(必须是块级元素,且设置宽高才有效)

            缩写方式:

padding / margin:10px / 10px 20px / 10px 20px 30px / 10px 20px 30px 40px

(一个值:代表四个方向:上下左右/两个值:第一个值代表上下,第二个代表左右/三个值:第一个值代表上,第二个值代表左右,第三个值代表下/四个值:内边距顺时针方向分别代表上右下左)

            注意:
            (1)当盒子之间的上下外边距发生冲突时,浏览器默认取最大值
            (2)如果添加浮动的盒子之间的左右外边距发生冲突时,浏览器会默认相加
                   (行内框、浮动框或绝对定位之间的外边距不会合并)
            (3)浏览器body是最大的盒模型
            (4)元素的总大小不包括外边距margin
                  a.元素的总宽度=border-left+padding-left+padding-right+border-right
                  b.元素的总高度=border-top+padding-top+padding-bottom+border-bottom

7. 弹性盒布局

     为父元素书写弹盒属性,子元素按照弹盒样式来显示

            优点:适应性强,在做不同屏幕分辨率的时候非常实用
                       弹性盒布局实现快捷,易维护

            (1)父元素书写属性

            a.弹盒属性:

              display:flex  ;

             --弹盒布局(其下子元素浮动效果)(添加弹性盒属性后,它的大小由内容尺寸撑开,行内元素和块元素转化为行内块元素,可用text-align:center;实现居中效果,子元素的float、clear、vertical-align属性将失效)

            b.设置主轴:    

 flex-direction:row(主轴在水平方向-x轴-起点为左端-默认状态)
/row-reverse(反向-起点为右端)

 flex-direction:column(主轴在垂直方向-y轴-起点为上段端-默认状态)
/column-reverse(反向-起点为下端)

            c.控制子元素的换行效果 

flex-wrap:nowrap;不换行-弹性盒自带默认效果
/flex-wrap:wrap;换行(换行条件:所有子元素的宽和大于父元素的宽)

            d.对齐方式
            主轴(x轴)对齐:      

 justiify-content:flex-start;从行头对齐-默认
/justiify-content:flex-end;从尾端对齐
/justiify-content:center;水平居中
/justiify-content:space-between;水平平均分布(各子元素之间的间距相同)
/justiify-content:space-around;水平环绕分布(左右边距是元素间边距的一半)


            侧轴(y轴)对齐 :适用于单行排列

align-items:flex-start;从顶部对齐-默认
/align-items:flex-end;从底部对齐
/align-items:center;垂直居中

            多行排列:设置侧轴上的子元素多行排列,即换行时有效          

 align-content:flex-start;从顶部对齐-默认
/flex-end;从底部对齐
/center;垂直居中
/space-between;水平平均分布(各子元素之间的间距相同)
/space-around;水平环绕分布(左右边距是元素间边距的一半)
/stretch;设置子元素高度平分父元素高度 

          flex-flow:column wrap;复合属性,相当于同时设置了flex-dection和flex-wrap           

            (2)flex布局子项常见属性:

                 a. flex

                   子项占的份数                  

 .item {flex:1;} 默认为0,分配剩余空间

                 b. align-self

                   控制子项在自己侧轴的排列方式(允许单个项目与其他项目不一样的对齐方式,可覆盖align-items属性,默认值为auto继承父元素align-items属性,如果没有父元素则等同于stretch)

                 c. order属性

                    定义子项的排列顺序

  div span:nth-child(2){
                           order:-1; <!-- 将第2个span盒子放到第一个盒子前面 -->
                         }

8. 溢出

            (1)容器溢出:内容(纵向)溢出元素框时的处理方式

            容器添加css属性 overflow: hidden(隐藏-直接隐藏溢出的内容)/scroll(隐藏-溢不溢出都出现x轴和y轴滚动条)/auto(隐藏-若溢出出现y轴滚动条-比较智能) 

           图片元素为了方便排版一般要转换为块级元素
                   width:100% 表示img继承父级元素box的宽
                   height:100% 表示img继承父级元素box的高

   .box img{
            display:block
            width:100%
            height:100%
            }

            *正常情况下,父元素不设置高度的话,他的高度由子元素撑开(如果子元素想设置100%满屏状态下的效果,就要给父元素设置高度100%,若父元素是body,body的父元素是html,则body和HTML都要设置高度100%显示)
            
            (2)文本溢出:文字(横向)发生溢出时的处理方式

            a.文本溢出也属于容器溢出
               文本容器添加css属性 overflow: hidden(隐藏-直接隐藏溢出的内容)

            b.text-overflow:ellipsis(溢出的内容以省略形式(省略号)出现)

                                      /text-overflow:clip(直接裁剪)

           溢出条件:

                           a. 明确宽度:块级元素默认继承父元素的宽度
                           b. 限定文本不换行:white-space:nowrap

9. 转换&过渡

            (1)2D转换:可以对元素进行移动、缩放、转动、拉长或拉伸。

            a. 属性:

 transform:(向元素应用2D或3D转换)

 transform-origin:x y(默认50% 50%;
                  或是方位名词 top bottom left right center);(转换中心点)

            2D transform方法:

            函数:
            matrlx(n,n,n,n,n,n)定义2D转换,使用6个值的矩阵

            transform:(要实现多个效果需进行总写(不同转换方法之间用空格隔开),否则上面添加的转换会被下面添加的转换效果覆盖)

                   同时使用多个转换,其格式为: transform:translate() rotate() scale();

                   同时有位移和其他属性的时候,位移需放在最前面(顺序会改变转换效果,先旋转会改变坐标轴方向)

             a.位移(正-右移-下移,负数-左移-上移)-(单位:px或百分比50%)

                         -web前端里坐标轴 x轴:左负右正

                                                       y轴:上负下正

                  translate最大的优点:不会影响其他盒子的位置,
                  translate百分比单位是相对于自身元素的大小,
                  translate对行内标签没有效果      

            translate(x,y)定义2D转换,沿着x和y轴移动元素
            translateX(n)定义2D转换,沿着x轴移动元素
            translateY(n)定义2D转换,沿着y轴移动元素

            b.缩放大于1: 放大,大于0小于1: 缩小,等于0: 不显示,等于1: 不变)-(单位:px)

            scale(x,y)定义2D缩放转换,改变元素的宽度和高度
            scaleX(n)定义2D缩放转换,改变元素的宽度
            scaleY(n)定义2D缩放转换,改变元素的高度

            c.旋转-(顺时针是正数,逆时针是负数)-(单位:deg)

rotate(angle)定义2D旋转,在参数中规定角度

            d.倾斜-(单位:deg)

            skew(x-angle,y-angle)定义2D倾斜转换,沿着x轴和y轴
            skewX(angle)定义2D倾斜转换,沿着x轴
            skewY(angle)定义2D倾斜转换,沿着y轴


            (2)3d转换:(相较2d转换多了一个z轴,沿着z轴移动里负外正,即正对屏幕,越往里值越负,越往外值越正)

            透视:perspective :200px; 透视写到被观察元素的父级盒子上面,呈现出近大远小的视觉效果(数值越大,透视(视距)越大,眼睛距离盒子越远,物体越小)

            3d呈现:transform-style:flat(默认不开启)/preserve-3d(子元素开启立体空间);控制子元素是否开启三维立体环境,代码写给父级,但是影响的是子盒子
              
             3d移动:translatez:100px;z轴单位一般用px,z轴即物体距离屏幕大 小,z轴越大,物体越大
                

                  3d移动简写:transform:translate3d(x,y,z px);
                  3d旋转简写:transform:rotatate3d(x,y,z px);

  

            (3)过渡:元素从一种样式逐渐改变为另一种样式的效果(给哪个元素添加了鼠标划过效果,就给那个元素添加css过渡属性)

                属性:

            transition:all 1s;(简写属性,用于在一个属性中设置四个过渡属性)
            transition-property:(规定应用过渡的css属性名称)
            transition-duration:(规定过渡效果花费的时间,默认是0)
            transition-timing-function:(规定过渡效果的时间曲线,默认是“ease”)
            transition-delay:(规定过渡效果何时开始,默认是0)

10. 动画

            属性

        @keyframes:定义(规定)动画
( @ms.keyframes-IE浏览器,webket.@keyframes-谷歌浏览器,moz.@keyframes-火狐浏览器)

            @keyframes 动画帧的名称{
            0%/from{初始样式}
            20%/from{中间样式}

            ...可以书写多个步骤,尽量保证每个步骤的跨度相同

            100%/to{最终样式}
            }

@keyframes cheng{
            0%/from{width:0%}
            20%/from{width:20%}
            40%/from{width:40%}
            60%/from{width:60%}
            80%/from{width:80%}
            100%/to{width:100%}
            }

            animation:动画帧的名称 动画的执行时间 动画的执行次数 动画执行的速度曲线(前两个属性必须写,所有动画的简写属性,除了animation-play-state属性),多个动画之间用逗号隔开
           

 animation:cheng 2s 3/infinite(无限循环) linear(匀速)
            动画执行的速度曲线:ease-由快到慢,linear-匀速,ease-in-加速,
                               ease-out-减速,ease-in-out-先加速再减速、
                               steps(5)指定了时间函数中间断数量(步长)

animation-name:(规定@keyframes动画的名称)

animation-duration:(规定一个动画完成一个周期所花费的秒或毫秒,默认是0)

animation--timing-function:(规定动画的速度曲线,默认是“ease”)

animation-delay:(规定动画何时开始,默认是0)

animation-iteration-count:(规定动画被播放的次数,默认是1,还有infinity)

animation-direction:(规定动画是否在下一周期逆向的播放,
                       默认是“normal”,反方向就写alternate)

animation-play-state:(规定动画是否正在运行或暂停,默认是“running”,还有pause)

animation-fill-mode:(规定对象时间之外的状态,保持forwards回到起始backwards)

11. 背景声明

        css可以通过设置纯色作为背景,也可以通过设置图片作为背景(背景图片的前提条件:书写背景图片的容器必须有一个确定的尺寸)
            网页中图片的两种存在形式:html:img
                                                            css:background

            css背景属性

            (1)背景颜色 background-color:pink(背景颜色)/transparent(透明)
            background:rgb(红色,绿色, 蓝色)
            background:rgba(红色,绿色, 蓝色,不透明度(0-1))

            (2)背景图片 background-image:url(图片路径)(背景图片)
            -若图片尺寸小于容器的尺寸时,x轴y轴图片自动进行平铺显示
            -若图片尺寸大于于容器的尺寸时,图片只显示容器大小的尺寸

            (3)背景平铺 background-repeat:repeat-平铺-默认/no-repeat-不平铺/repeat-x-在x轴进行横向平铺/repeat-y-在y轴进行纵向平铺(背景图片的平铺设置)

            (4)背景位置 background-position:left  top

                                                                         /10px  50px  

                                               水平(x轴横向)位置   垂直(y轴纵向)位置

                                        (背景图片的显示位置-建立在背景图片不平铺的前提下)

            水平位置(包含左中右):left center right
            水平位置(包含上中下):top center bottom
            单位:px(距x轴y轴像素的留白)/%(距x轴y轴百分比的留白)

            (5)背景大小 background-size:水平位置(单位:px/%) 垂直位置(单位:px/%)
            /cover -常用(图片等比例缩放-当背景图片与容器尺寸宽高不一致时,可能会出现某一部分不能显示的现象)
            /contain(图片等比例缩放)(背景图片的尺寸更改-当背景图片与容器尺寸宽高不一致时,可能会出现留白的现象-只要有一个方向铺满,里面一个方向就不会发生变化,只能贴合一个边)
            (6)背景附着 background-attachment: scroll(随页面滚动)/fixed固定;

            总写方式(不包含尺寸):
            background:背景图片的链接地址 背景图片的平铺设置 背景图片的显示位置

            background: url(../img/background_img01.png) no-repeat center top;

12. 媒体查询 

            针对不同的媒体类型定义不同的样式,特别是响应式页面,可以针对不同屏幕的大小,编写多套样式,从而达到自适应的效果

            两种网站页面:
            (1)响应式网站:一套界面同时运行到pc端分辨率>1200px),平板端(980px
            <分辨率<1200px),移动端(分辨率<980px)各个不同的视口。通过检测设备的分辨率,来对页面做出不同的布局和内容(里面内容随浏览器窗口大小实时变化) 方法(采用多个css样式表)
                a.新建一个默认效果的css文件,再分别新建pc,平板和移动端页面显示效果的css文件 

                b.在html文件中分别链接这四个css样式表

                c.分别在链接pc,平板和移动端页面css样式表的标签中定义不同的屏幕分辨率大小条件(media="screen and (min-width:最小宽度)" media:属性

<link rel="stylesheet" href="css/style.css"> 默认
<link rel="stylesheet" media="screen and (max-width:980px)" 
                                                           href="css/style1.css"   > 
                                                           移动端

<link rel="stylesheet" media=“screen and (min-width:980px) 
                                     and (max-width:1200px)”
                                                           href="css/style2.css"> 
                                                           平板端

<link rel="stylesheet" media="screen and (min-width:1200px)" 
                                                           href="css/style3.css"> 
                                                           pc端

                (2)自适应网站:为不同类别的设备建立不同的网页,检测到设备分辨率大小后调用相应的网页(自适应布局主要应用在pc端)(里面内容在浏览器窗口大小变化到一定时才会更换布局)
                方法(只采用一个css样式表)
                采用media控件
        @media 设备类型 and(多个媒体类型连接到一起)/not(排除某个媒体类型)/only(指定某一个媒体类型) (设备尺寸:min-width max-width){相应元素的css属性}              

 @media screen and (min-width:980px) {
                .box{
                background-color:green
                }
                }

 @media screen and (min-width:980px) and (max-width:1200px){
                .box{
                background-color:black
                }
                }

@media screen and (max-width:980px){
                .box{
                background-color:yellow
                }
                }

         
13. 视口

                   meta视口标签   

 <meta name="viewport" content="width=device-width,user-scalable=no,
       initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">


                width     宽度设置是viewport宽度,可以设置device-width特殊值
                initial-scale   初始缩放比,大于0的数字
                maxmum-scale   最大缩放比,大于0的数字
                minimum-scale    最小缩放比,大于0的数字
                user-scalable    用户是否可以缩放,yes或no(1或0)       

14. 显示与隐藏

                   a.disply:none(隐藏元素且不再保留位置)/block(除了转换为块级元素,同时还有显示元素的效果)
                   b.visbility:hidden(对象隐藏但保留位置)/visible(对象可视)

几种隐藏元素的方法
 visibility:hidden,这个属性只是简单隐藏,但是元素占用的空间任然存在。
 opacity:0,一个 CSS3 属性,设置 0 为透明,它可以被 transition 和 animate。
 position:absolute, 元素脱离文档流,处于普通文档之上,给它设置一个很大的 left 负值
  定位,使元素定位在可见区域之外。
 display:none, 元素不可见,不占用文档空间。
 transform:scale(0), 将一个元素设置无限小,这个元素将不可见。、
 html5 hidden attribute:hidden, 属性效果和 display:none 一样,记录一个元素的状态。
  height:0;overflow:hidden; 将元素在垂直方向上收缩为 0,使元素消失。
 filter:blur(0), 将一个元素的模糊度设置为 0

              

 15. 鼠标样式

           cursor:pointer;
 
                    default      默认
                    pointer      小手
                    move         移动
                    text         文本
                    not-allowed  禁止

              
16. css精灵技术

                             将网页中的一些背景图片整合放到一张大图中(精灵图),网页中元素通常只需要精灵图中某个位置的某个小图,需要的时候只需要精确的定位到某个小图就行,这样,当用户访问页面时,只需向服务器发送一次请求,网页中的背景图片即可全部展示出来,这样可以减少服务器的访问次数,减少负荷.
                             方法:使用background-position:0 -107px ;属性精确定位                          

17 . 滑动门

                         父级盒子的宽度由内容撑开,且有背景,如导航栏效果

  <a>
       <span>首页</span>整个导航栏都是链接,所以a包含span
  </a>


                        a.设置左侧背景门
                        

         a {
				disply:inline-block;<!-- 由内容撑开盒子 -->
				height:33px; 
				padding-left:15px;
				background:url('img/220455croynga9dcjohwc8.jpg.jpg') no-repeat;
			}


                        b.设置右侧背景门  

       a span {
				disply:inline-block;
				height:33px;
				padding-right:15px; 
				background:url('img/220455croynga9dcjohwc8.jpg.jpg') no-repeat top right; 
                                                                <!-- 需要背景图片右对齐 --> 
			}

                
 18. css三角形效果   

      <div> </div>

                div {
                    width:0;
                    height:0;
                    border:1px solid transparent;
                    border-top-color: #333;角朝下
                }


                方法:a. 宽度和高度都为0
                           b. 四个边框只设置一边的边框颜色,其他颜色都设为透明                      

19.字体图标

                   图片不但增加了总文件大小,还增加了额外的http请求,这会大大降低网页性能,图片缩放时会失真,字体图标,就是将一个图标改为字体的格式(由svg格式转换为ico格式),不仅可以做出跟图片一样的效果,改变透明度,旋转等,但是本质上是文字,可以随意改变颜色,产生阴影,透明效果等,而且本身体积更小,几乎支持所有浏览器,移动端常用                 

20. 页面布局

                  (1)单独制作页面

                      a.流式布局(百分比布局):通过min-width/max-height限制随页面自由缩放的边界

                      b.flex弹性布局(父元素添加disply:flex;)

                      c.rem适配布局(可以通过修改html里面的文字大小来改变页面中元素的大小实现整体控制-通过媒体查询/flexible.js(自动分成10等份)更改html字体大小)
                         rem单位:rem是一个相对单位,类似于em,em是父元素字体大小(vscode里cssrem插件自动将px转化成rem--需根据需要修改默认的16px字体大小)
                         不同的是rem的基准是相对于html元素的字体大小
                         比如,根元素html设置font-size=12px;非根元素设置width:2em;则换成px表示非跟元素width:24px

 px 和 em 都是长度单位,区别是,px 的值是固定的,指定是多少就是多少,计算比较容易。
  em 得值不是固定的,并且 em 会继承父级元素的字体大小。
 浏览器的默认字体都是 16px。所以未经调整的浏览器都符合:1em=16px。那么
  12px=0.75em , 10px=0.625em 。

                 
                          Less

                            Less是一门css扩展语言,也称为css预处理器,他不但没有减少css功能,反而在现有基础上,为css引入了 变量、mixin(混入)、运算以及函数等功能,大大简化了css的编写,降低了css的维护成本,Less即用更少的代码做更多的事情(常见的预处理器:Sass、Less、Stylus)
                            less安装步骤(安装nodejs——基于nodejs安装Less:cmd命令 cnpm install -g Less)
                            Less使用:新建一个后缀为.less的文件,在文件里书写less语句
                            less变量:比如将css中一些常用的颜色和数值设为变量,方便调用(变量名自定义但必须@为前缀,不能包含特殊字符,不能以数字开头,大小写敏感)
                                      @变量名:值;
                            Less编译:需要把less文件编译生成css文件,html页面才能使用(vscode中使用easyless插件,保存less文件自动生成相应css文件)
                            Less嵌套:与HTML结构语法相似                              

                           .header{    <!-- 子代选择器 -->
                                         .logo{width:300px;}
                                     }
                                     
                                     .header{<!-- 伪类/交集/伪元素选择器--加&符号 -->
                                          .logo{
                                             width:300px;
                                             &hover:{color:white;}
                                             }
                                     }


                            Less运算:任何数字、颜色或者变量都可以参与加减乘除运算(运算符两侧需加空格--单位以第一个为准)
                            导入less文件:important:“文件名”;
                            
                  (2)响应式页面

  响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端,而不是为每一个
  终端做一个特定的版本。
 基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
 页面头部必须有 meta 声明的 viewport。


                      响应式布局容器:响应式需要一个父级作为布局容器,来配合子元素实现变化效果,原理就是在不同屏幕下,通过媒体查询来改变布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下不同页面布局
                     通过媒体查询根据屏幕大小控制父级元素大小        

                   <!-- 超小屏幕 -->
                      @media screen and (max-width:767px){
                          .container{
                              width:100%;
                          }
                      }    
                                    
                    <!-- 小屏幕 -->
                    @media screen and (min-width:768px){
                                              .container{
                                                  width:750px;
                                              }
                    }    
                    
                    <!-- 中等屏幕 -->
                    @media screen and (mmin-width:992px){
                                              .container{
                                                  width:970px;
                                              }
                    }
                        
                    <!-- 大屏幕 -->
                    @media screen and (mmin-width:1200px){
                                              .container{
                                                  width:1170px;
                                              }
                    }

   案例: 多种方式实现已知或者未知宽度的垂直水平居中        

第一种:
.wraper {
  position: relative;
  .box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  }
  }


第二种:
  .wraper {
  position: relative;
  .box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }
  }

第三种:
  .wraper {
  .box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  }
  }

第四种:
  .wraper {
  display: table;
  .box {
  display: table-cell;
  vertical-align: middle;
  }
  }

 21 .bootstrap前端开发框架

                   使用:创建文件夹结构--创建HTML骨架结构(布局容器.container)--引入相关文件--书写内容
                  bootstrap栅格系统:bootstrap里面container的宽度是固定的,container的宽度不同,我们再把container划分为12等份
                                    要实现平分12等份(每一列默认有15px的padding)需要给列添加类前缀:.col-xs-(超小extra small屏幕)、.col-sm-(小small屏幕)、.col-md-(中等medium屏幕)、.col-lg(大lage屏幕)
                                    列小于12,则一行留空白,列大于12,则多余的列另起一行排列
                                    可同时为一列指定多个设备类名,以便划分不同份数,例如<div class="col-md-4 col-sm-6"></div>
                    bootstrap嵌套:列嵌套最好加1个行row ,这样可以取消父元素的padding值,而且高度自动和父级一样高                 

                                  <div class="row">
                                         <div class="col-md-4">
                                         </div>
                                       <div class="col-md-8">
                                       </div>
                                  </div>


                    列偏移:使用.col-md-offset-类可以将列向右偏移,这些类实际是通过使用*选择器为当前元素增加左的边距(margin)(左右各占4份,中间4份留空白)    

                    <div class="row">
                           <div class="col-md-4">
                           </div>
                            <div class="col-md-4 col-md-offset-4">
                            </div>
                    </div>

 
                列排序:通过使用.col-md-push-(左推右)和.col-md-pull-(右拉左)类改变column的顺序
                bootstrap响应式工具:.hidden-xs(超小屏下隐藏)、.hidden-sm(小屏下隐藏)、.hidden-md(中屏下隐藏)、.hidden-lg(大屏下隐藏)
                                    .visible-xs(超小屏下显示)、.visible-sm(小屏下显示)、.visible-md(中屏下显示)、.visible-lg(大屏下显示)

22.浏览器私有前缀(兼容老版本浏览器)

-moz-:firefox浏览器私有属性
-ms-:ie浏览器私有属性
-webkit-:safari、chrome浏览器私有属性
-o-:Opera私有属性

23.移动端特殊样式:

css3盒子模型:-webkit-box-sizing:border-box;
清除超链接等标签点击时默认的高亮效果:-webkit-tap-highlight-color:transparent;
移动端默认浏览器给按钮和输入框自定义样式:-webkit-appearance:none;
禁用长按页面时弹出菜单:img ,a{-webkit-touch-callout:none;}

 22. 整体页面搭建

     页面搭建流程
     明确网站类型(常规/响应式/自适应)
     页面逻辑(页面与页面之间的跳转关系)
     页面分块编写(头部/bannner/内容/底部)
     模块内部结构(盒子与盒子之间嵌套并列关系)