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

2022-08-20 18:44:42


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代码的时候请注意按照显示 自身 文本的书写顺序来书写！


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 

   CSS3主要知识点复习总结+HTML5新增标签 
② border-image  ：
stretch 拉伸方式来填充边框背景图 | 
repeat 平铺 图片碰到边界时超出截断 | 
round 平铺，图片会工具边框的尺寸动态调整图片大小直至刚 好铺满整个边框
CSS3主要知识点复习总结+HTML5新增标签       CSS3主要知识点复习总结+HTML5新增标签      CSS3主要知识点复习总结+HTML5新增标签
<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的值

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

‘/‘前面表示水平方向，后面表示垂直方向。每个方向都可以用1~4个值，缩写的规则遵循“左上开始，
 顺时针旋转/ 只能写一个 

2）阴影

1.文本阴影 text-shadow（不需要判断浏览器）
    CSS3主要知识点复习总结+HTML5新增标签
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 -p1x 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;
  CSS3主要知识点复习总结+HTML5新增标签    CSS3主要知识点复习总结+HTML5新增标签
        
补充个知识点：
background:transparent; 等价 background:rgba(0,0,0,0);
color: transparent; 等价 color:rgba(0,0,0,0);


3）背景图
   
 1.CSS3蒙版（需要判断浏览器）

   CSS3主要知识点复习总结+HTML5新增标签
实现上面的效果，需要用到一张蒙版图，注意这张图中间不透明，跟平时PS设计蒙版不一样，
不透明的区域显示出来的效果就变为要的效果
 
    CSS3主要知识点复习总结+HTML5新增标签      CSS3主要知识点复习总结+HTML5新增标签
           
代码：
    .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); 
            CSS3主要知识点复习总结+HTML5新增标签                 CSS3主要知识点复习总结+HTML5新增标签                  CSS3主要知识点复习总结+HTML5新增标签                         CSS3主要知识点复习总结+HTML5新增标签    

① 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,n, n,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表示命令按钮
embed插入各种多媒体                details表示用户要求得到并可以得到的详细信息
mark定义需要突出显示或者高亮的文本 wbr表示软换行
progress显示js中耗费的函数进程     hgroup定义对网页标题的组合 

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

CSS3主要知识点复习总结+HTML5新增标签,布布扣,bubuko.com

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

上一篇：JSP中include指令和include动作区别


下一篇：向HTML中插入视频，兼容所有浏览器