CSS3主要知识点复习总结+HTML5新增标签

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3主要知识点复习总结+HTML5新增标签相关的知识,希望对你有一定的参考价值。


1、显示属性,自身属性,文本属性
推荐样式编写顺序
    1 显示属性 :display,list-style,position,float,clear [注意依照横着的顺序]
    2 自身属性(合模型):width。height,margin。padding,border,background(第3点)
    3 背景:background
    4 行高:line-height
    5 文本属性:color,font。text-decoration,text-align。vertical-align,white-space,content
    6 其它 cursor/z-index/zoom
    7 css3属性:trandsform/transition/animation/box-shadow/border-radius
    8 链接的样式请严格依照例如以下顺序加入:
      a:link-->a:visited-->a:hover-->a:active(LoVeHAte)
  * 书写的CSS代码的时候请注意依照显示 自身 文本的书写顺序来书写!

分享2014-4-1 html5上课笔记

2、CSS3属性(内核前缀)

Mozilla 内核   css前缀-moz; 
WebKit  内核   css前缀-webkit ;(谷歌已换用blink内核)
Opera   内核   css前缀 -o ;    (欧朋已换用blink内核)
Trident 内核   css前缀 -ms ; 

CSS3新属性:

1)边框

① border-colors  

相关属性 border-top-colors  border-right-colors  border-bottom-colors  border-left-colors 

   技术分享
② border-image  :
stretch 拉伸方式来填充边框背景图 | 
repeat 平铺 图片碰到边界时超出截断 | 
round 平铺。图片会工具边框的尺寸动态调整图片大小直至刚 好铺满整个边框
   技术分享技术分享技术分享
<style>
    .wrap {
        height: 100px;
        width: 100px;
        border: 20px solid;
        /*border-image: url(‘border-image.png‘) 30 30 repeated;简写形式*/
        border-image: url(‘border-image2.png‘) repeat;
        border-image-slice:30 30;
        text-align: center;
     }
 </style>

③ border-radius  相关属性  border-radius: 1-4 length | % / 1

   border-radius数值为合模型的一半就变成圆 ,记住:不是相对于合模型的width(如:965x1611)。
    而是整个框才是
     <style>
          .wrap {
               height: 500px;
               width: 500px;
               border: 50px solid;
               border-radius: 250px;
          }
     </style>

结果就显示的不是正圆,所以border-radius: 300px; 才干显示正圆,加上border的值
技术分享        技术分享

            
/前面表示水平方向,后面表示垂直方向。每一个方向都能够用1~4个值,缩写的规则遵循“左上開始,
 顺时针旋转仅仅能写一个 

2)阴影

1.文本阴影 text-shadow(不须要推断浏览器)
    技术分享
text-shadow:2px 3px 2px #000;
文字阴影的结构是依照下面顺序:X--偏移,Y--偏移,模糊,和颜色;

text-shadow:-2px -3px 2px rgba(0, 118, 160, .25);
设置为负值,X -偏移阴影转移到左側。设置为负值偏移Y -转移阴影顶端。颜色能够用RGBA值。

text-shadow:0px 1px 0px #fff,0px -p
1x 0px #000;
文字阴影的列表(以逗号分隔),1px的顶部和底部1px的阴影。
 
text-shadow:水平偏移量 垂直偏移量 阴影模糊值 颜色,
               水平偏移量 垂直偏移量 阴影模糊值 颜色。(多个阴影用。隔开)
eg:
.con2 p {
     font-size: 90px;
     color:#fff;
     text-shadow: -1px -1px 1px rgba(0,0,255,1),
                  -2px -2px 1px rgba(0,0,254,0.5),
                  -6px -6px 10px rgba(0,0,252,0.2);
}

2.盒阴影 box-shadow(不须要推断浏览器)

  盒阴影的使用语法结构与文本阴影类似,如box-shadow: 5px 5px 5px rgba(255,15,255,0.5);
  可是。盒阴影多了个属性:外延值,inset
  如box-shadow: 5px 5px 25px rgba(0,0,255,0.5) inset;
  技术分享       技术分享
        
补充个知识点:
background:transparent; 等价 background:rgba(0,0,0,0);
color: transparent; 等价 color:rgba(0,0,0,0);


3)背景图
   
 1.CSS3蒙版(须要推断浏览器)
    技术分享
   
实现上面的效果,须要用到一张蒙版图。注意这张图中间不透明,跟平时PS设计蒙版不一样,
不透明的区域显示出来的效果就变为要的效果
        技术分享        技术分享 
代码:
    .wrap img{
         height: 160px;
         width: 160px;
         background: #F00;
         background: url(teacher_li.jpg);
         -webkit-mask-image:url(pro_pho_show_pic.png);
         -webkit-mask-position:50% 50%;
         -webkit-mask-repeat:no-repeat;
    }
缩写:
-webkit-mask:url(pro_pho_show_pic.png) 50% 50%  no-repeat;

  -webkit-mask-clip 蒙版裁剪位置
  -webkit-mask-origin 蒙版原点位置
  蒙版是可以应用渐变的。可是由于浏览器兼容的问题比較严重。通常不使用渐变作为蒙版的属性值,
  而是使用有“透明度梯度”的图片替代掉渐变。产生相同的功能。

  2. 多重背景 background-image: url(teacher_li.jpg),url(teacher_li.jpg);
  
  div{
    width:500px;
    border:1px solid #FA0;
    background:-webkit-linear-gradient(left,#f00,#ff0 25%,#0ff 55%,#00f 70%,#f00);     /*横向渐变*/
    background:-webkit-gradient-gradient(left,#f00,#ff0 25%,#0ff 55%,#00f 70%,#f00); /*纵向渐变*/
    -webkit-background-clip:text;
 /*仅仅有webkit内核支持text的剪切模式*/
    color:transparent;
  }

 4. CSS3倒影 -webkit-box-reflect
     1.方向 -webkit-box-reflect:  below/above/left/right
     2.距离
     3.透明度
    -webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 20%,
    rgba(0,0,0,0.6) 100%)


4)CSS3变形transform 
  二。三维变形的变形方式:四种方法 
  旋转——缩放——平移——扭曲
旋转(1个值) 缩放(1个值) 平移(2个值) 扭曲(2个值)
rotate

rotate(30deg) 
scale

能够取值正,负,小数
translate
translate(x,y)   针对2D平面平移

skew

  rotateX(30deg);
  rotateY(30deg);
  rotateZ(30deg);
   缩放的值,X为负时,字体先沿Y轴翻转再缩放
   缩放的值。Y为负时,字体先沿X轴翻转再缩放
       
        translateX   translateY
  skew(30deg,15deg);
  skewX(30deg);
  skewY(15deg);

旋转:-webkit-transform: rotate(120deg);
平移:-webkit-transform: translate(20px, 10px);  -moz-transform: translateX(20px);
缩放-webkit-transform: scale(1.1,0.5); X方向缩放1.1倍。Y方向缩放0.5倍
① scale(1,1);   ② scale(-1,1);   ③scale(1,-1);  ④scale(-1,-1);等价scale(-1); 
            技术分享                技术分享                   技术分享                      技术分享 
① transform:变形种类;的名称(相应的属性值),多个种类之间使用空格分隔。

一个()中的属性值之间用逗号分隔。

② 二维平面的旋转,旋转环绕点进行。而旋转正方向默觉得顺时针方向
③ 默认的旋转中心就是这个块的正中心。能够通过transform-origin去改变旋转中心,通过left top、数值、百分比改变旋转中心
④ scale(<number>[, <number>]);表示使元素在X轴和Y轴同一时候缩放。<number>表示缩放倍数,能够是正数,负数和小数

负数是先翻转元素然后再缩放。包括两个參数,假设缺少第二个參数,那么第二个參数的值等于第一个參数。

   scaleX(<number>):表示仅仅在X轴(水平方向)缩放元素。


   scaleY(<number>):表示仅仅在Y轴(垂直方向)缩放元素。
   scaleZ(<number>):表示仅仅在Z轴缩放元素。

前提是元素本身或者元素的父元素设定了透视值(perspective:100;)

5.视角-webkit-persepective:0。
      0没设置 (值) 800px;  通常在body元素下
  CSS3 perspective属性 眼下浏览器都不支持 perspective 属性。 Chrome 和 Safari 支持替代的 -webkit-perspective 属性。


6. backface-visibility: visible | hidden;  定义当元素不面向屏幕时是否可见。可用在扑克牌旋转上。
 
matrix3d(n,n,n,n,n,nn,n,n,n,n,n,n,n,n,n)

定义3D转换。使用16个值的4x4矩阵。
translate3d(x,y,z)
定义3D转化。
translateX(x)
定义3D转化。仅使用用于X轴的值。
translateY(y)
定义3D转化。仅使用用于Y轴的值。
translateZ(z)
定义3D转化,仅使用用于Z轴的值。
scale3d(x,y,z)
定义3D缩放转换。
scaleX(x)
定义3D缩放转换,通过给定一个X轴的值。

scaleY(y)
定义3D缩放转换,通过给定一个Y轴的值。
scaleZ(z)
定义3D缩放转换,通过给定一个Z轴的值。

rotate3d(x,y,z,angle)
定义3D旋转。
rotateX(angle)
定义沿X轴的3D旋转。
rotateY(angle)
定义沿Y轴的3D旋转。
rotateZ(angle)
定义沿Z轴的3D旋转。

perspective(n)
定义3D转换元素的透视视图。


 7)CSS3过渡 trabsition
參与过渡的属性、过渡时间、过渡方式(动画类型) 延迟时间 【须要写前缀】
普通情况下。transition加入在基本效果上。而不是hover效果中。css原状态和hover状态设置为两种不同的样式,然后通过CSS3过渡进行‘渐变’处理padding、color全部浏览器都支持渐变

transition 属性是一个简写属性,用于设置四个过渡属性:

  • transition-property  哪个属性实现过渡如:width
  • transition-duration  完毕过渡效果须要多少秒/毫秒
  • transition-timing-function  速度效果的运动曲线,如linear 、ase-in 、ease 、 ease-out 、ease-in-out 、 cube-bezier(贝塞尔曲线) 
  • transition-delay  规定过渡開始前等待几秒
简写:transition:width 2s ease;

 8)CSS3动画 animation
animation基本參数与transition全然同样,第一个參数表示的是调用哪个动画 infinite 表示无限循环
.wrap {
   height:100px;
   margin:10px;
   -webkit-animation:colorChange 10s linear 1.5s infinite;
}

@-webkit-keyframes colorChange {

      0%{ background:#f00;}
      10%{ background:#ff0;}
}


animation属性值:
规定动画。
全部动画属性的简写属性。除了animation-play-state 属性。
规定 @keyframes 动画的名称。
规定动画完毕一个周期所花费的秒或毫秒。默认是 0。
规定动画的速度曲线。默认是 "ease"。

 
规定动画何时開始。默认是 0。

规定动画被播放的次数。默认是 1。
规定动画是否在下一周期逆向地播放。

默认是 "normal" 。逆向alternate

规定动画是否正在执行或暂停。默认是 "running",暂停时pause
规定对象动画时间之外的状态。

  
CSS3过渡与动画的差别:
 transition  animation     
1、animation多两个參数,循环和动画的方式
2、transition不能自行触发,通过hover等动作或结合JS进行触发。anmiation能够自行执行。
3、transition可控性较弱,仅仅能指定起始状态和结束状态。而animation能够定义多个关键帧。
4、动画在执行结束之后,须要回到初始状态
5、transition的作用,能够用一句话来概括。‘平滑’改变CSS样式



9.HTML5新添加标签:

优势:① 语义性好 少类名  有利于SEO  代码少
      ②  文档易读 、搜索引擎可以更好的理解页面中的内容、作为开发人员,可以更快更准确的搜索到信息

①<新增标签>
article 定义文章、帖子、用户评论、 代表文档、页面或者应用程序中独立、完整、能够独自被外部引用的内容
header 定义页眉                    aside 定义文章的側边栏
figure一组媒体对象的以及文字       nav定义导航
figcaption定义figure的标题         section定义文档中的区段
footer定义页脚                     time定义日期和时间
vidio 定义视频                     canvas 定义图形。提供画布
audio定义音频                      command表示命令button
embed插入各种多媒体                details表示用户要求得到并能够得到的具体信息
mark定义须要突出显示或者高亮的文本 wbr表示软换行
progress显示js中耗费的函数进程     hgroup定义对网页标题的组合 

②新增的input元素类型
<email>  输入E-mail地址的文本输入框
<url>    输入URL地址
<number> 输入数值的文本输入框
<range>  表示必须输入一定范围内的数字值的文本输入框
artical:定义文章 代表文档、页面或者应用程序中独立、完整、能够独自被外部引用的内容
section:用于对站点或应用程序中的页面上的内容进行分块。一个section元素通常由内容以及标题组成。但section元素并不是一个普通的容器元素。当一个容器须要被直接定义样式或通过脚本定义行为时。推荐使用div而非section元素。
























































































































以上是关于CSS3主要知识点复习总结+HTML5新增标签的主要内容,如果未能解决你的问题,请参考以下文章

HTML5新特性CSS3新特性

HTML5 新增语义化结构

HTML5+CSS3静态页面项目-PayPaul的总结

HTML5新增属性

HTML5新增属性

HTML5+CSS3新增内容总结!!!!!绝对干货