CSS3知识笔记

CSS3知识

• 选择器
  • a[class^="abc"]{xxx;}:以“abc”开头的任何字符串类名；
  • a[class$="abc"]{xxx;}:以“abc”结尾的任何字符串类名；
  • a[class*="abc"]{xxx;}:以包含"abc"的任何字符串类名；
  • [attribute]{xxxx}:代表包含attribute属性的元素设置样式；
  • [attribute=value]{xxx}:代表属性名为attribute，属性值为value的元素设置此样式；
• 相邻兄弟选择器
  • 符号为“+”;
  • 适用场景：需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
  • 代码：input[type="text"]+span{xxx:xxx}；
• 自定义字体引入font-face

   @font-face {
       font-family: 'YourWebFontName';
       src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
       src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
                url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
                url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
     }
  

• CSS3变形transform
  • transform:rotate():旋转；
  • transform:scale():缩放；
  • transform: skew():扭曲；
  • transform: translate():位移；
  • transform-origin:原点设置；
  • 注意：变形均对块状元素和内联块状元素有效，内联元素无效；
• CSS3动画之过渡transition
  • transition-property: 过渡属性；
  • transition-duration: 过渡总时间；
  • transition-timing-function:过渡函数；
  • transition-delay:过渡延迟时间；
  • 过渡的设置步骤：
    1）设置过渡属性的初始值；
    2）设置改变属性值的事件；
    3）事件触发后设置的改变后新的值；
  • 注意：哪个元素设置过渡功效，就将transition添加到此元素中，与初始值设置在一起；
• CSS3动画之运动animation
  • keyframes:关键帧，用于设置运动动画名称；

   @keyframes  around{
    0%{
       transform: translateX(0);
     }
    25%{
       transform: translate(180px,0);
     }
    50%{
       transform: translate(180px,180px);
     }
    75%{
       transform: translate(0,180px);
     }
    100%{
       transform: translateY(0);
     }
   }
  

  • animation-name:关键帧设置的运动名称；
  • animation-duration：运动总时间；
  • animation-timing-function:运动函数；在关键帧中设置的每个阶段的运动形式；
  • animation-delay:运动延迟时间；
  • animation-iteration-count: infinite|<number>:infinite（无限次）;
  • animation-direction: normal/alternate(轮流)；其中：alternate指的是，奇数次从0%-100%运动，偶数次从100%-0%运动；
  • animation-play-state: running（播放）/paused（暂停）;暂停的时候停在原地，在播放时从停下的位置继续运动；
  • animation-fill-mode:none/forwards/backwards/both;
    • 作用：定义动画开始之前和动画结束之后的操作；
    • none:默认值；指的是：
      1）动画在开始时，从初始位置迅速到达第一帧的位置，即0%设置的位置；然后开始；需注意的是，在延迟时间之后发生，即延迟时间过后，迅速到达第一帧的位置，然后开始运动；
      2）动画结束后，迅速从最后一帧位置（即100%设置出）,回到初始位置；
    • forwards:指动画开始时，从初始位置迅速到达第一帧的位置，然后开始经过延迟时间，然后开始运动；区别在于，在延迟时间之前就到达第一帧的位置；动画结束后同none;
    • backwards:指动画结束后，停留在最后一帧的位置；不会到原始位置；动画开始前同none；
    • both:指同时具有forwards和backwards两个效果；
• CSS3多列布局-Columns
  • columns:<column-width>||<column-count>；简写：column:200px 5
    • column-width:主要用来定义多列中每列的宽度；
    • column-count:主要用来定义多列中的列数；
  • column-gap:normal/length:用来设置列与列之间的间距;
  • column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>：用来定义列与列之间的边框宽度、边框样式和边框颜色；类似于border;
  • column-span:none|all：用来定义一个分列元素中的子元素能跨列多少；
• CSS3盒子模型
  • box-sizing:content-box|border-box|inherit
    • content-box:默认值；即设置的width/height设置的是内部内容宽高；
    • border-box:设置的width/height为盒子的总宽高，即内容的宽高+padding+border；即元素的可视尺寸；
    • inherit：使元素继承父元素的盒模型；
• CSS3伸缩布局Flexbox布局
  • 定义：具有很大的功能，减少使用浮动或固定宽度+百分比来进行布局；
  • 创建一个flex容器，为此元素设置display属性值为flex;需注意的是在Safari浏览器中，需要添加前缀-webkit；
  • flex-direction:row/column/column-reverse/row-reverse;默认值row，用来定义沿主轴和侧轴方向排列；
  • justify-content:用来表示可伸缩项目在主轴方向上的对齐方式；取值：flex-start/flex-end/space-between,space-around;
  • align-items:用来表示可伸缩项目在侧轴方向上的对齐方式；取值：flex-start/flex-end/center/baseline/stretch;
• 媒体查询 Media Queries
  • 使用方法：@media 媒体类型 and (媒体特性){ 选择器：{xxx:xxx} }
  • 注：如果没有明确指定媒体类型，那么默认为all;
  • 媒体特性取值：
    • max-width：指媒体类型小于或等于指定的宽度时，样式生效；
      • 代码：

       @media screen and (max-width) {
             .ads{
               display: none;
        } 
      

    • min-width：指媒体类型大于或等于指定的宽度时，样式生效；
    • 多个特性同时使用，通过and将多个媒体特性连接起来；
      • 屏幕在600px-900px之间，使body背景色为红色；

       @media screen (min-width: 600px) and (max-width: 900px) {
            body{ 
              background-color: red;
            }    
         }
      

    • 设备屏幕的输出宽度Device Width
      • 定义：在智能设备上，例如iPhone,iPad等，可以根据屏幕设备的尺寸来设置相应的样式，同样对于屏幕设备同样可以使用"max/min"对应参数，如min-device-width或max-device-width；
      • 代码：指的是"iphone.css"样式适用于最大设备宽度为480px，比如说在iphone设备上显示，"max-device-width"指的是设备的实际分辨率，也就是指可视面积分辨率；

       <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
      

    • not关键词
      • 定义：用来排除某种指定的媒体类型；
      • 代码：表示除了打印设备和设备宽度小于等于1200px下的所有设置中生效；

       @media not print and (max-width: 1200px) {
          body{
              background-color: red;
           }
        }
      

    • only关键词：
      • 定义：用来排除不支持媒体查询的浏览器；很多时候用来对不支持Media Query但支持Media Type的设备隐藏样式表的；
      • 解读：1）支持媒体特性的设备，正常调用样式，此时就当only不存在；2）不支持媒体特性但又支持媒体类型的设备，不会读取样式；3）不支持Media Queries的浏览器，不论是否支持only,样式不会被采用；

       <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="adn.css" />
      

    • 使用多条语句来将同一样式应用到不同的媒体类型和媒体特性中；
      • 代码：代表style.css样式应用到宽度小于或等于500px的手持设备上，或被用于屏幕宽度大于等于900px的设备上；

       <link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width: 500px), screen and (min-width: 900px)" />
      

  • 兼容性：除了IE6-8浏览器不支持，其余浏览器都支持，无需添加前缀；
• CSS3外轮廓属性
  • 特点：
    • 在页面中呈现的效果和边框border呈现的效果极其相似；
    • 与边框完全不同，外轮廓线不占据网页布局空间；
    • 外轮廓的内边缘紧贴边框的外边缘；
    • 只有元素获取到焦点或者被激活时呈现；
  • 语法：outline: [outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit
  • 解读：
    • outline-color,outline-style,outline-width三个属性与border属性相同；
    • outline-offset:定义轮廓边框的偏移位置的数值；
      • 正值：表示轮廓边框向外偏离的像素值；
      • 负值：表示轮廓边框向内偏离的像素值；
      • 0：不偏移，指轮廓内边缘与边框外边缘重合；
• CSS生成内容content属性
  • 伪类：:after和before；伪元素：::before和::after
  • content配合伪类生成内容，但这个属性对于img和input元素不起作用；
  • 语法：content: none || attr || url || string
    • attr("属性名")：插入标签身上属性名的属性值；
    • url():使用指定的绝对或相对地址插入一个外部资源；
    • string：字符串，可以是空字符串，常用于清除浮动；
  • 实例：通过伪类在a便签后，插入一段内容，内容值为a便签身上的title的属性值；
    • 代码:

     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>content</title>
         <style>
             a{
                 font-size: 24px;
                 color: red;
                 text-decoration: none;
             }
             a:after{
                 content: attr(title);
                 padding-left: 100px;
             }
         </style>
     </head>
     <body>
     <a href="#" title="这是插入的内容值">链接</a>
     </body>
     </html>
    

• css3学习链接： css3入门教程