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

Posted 2020-09-30

tags:

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

文件夹：

1、CSS 属性编写顺序

2、CSS3属性（内核前缀）

3、position相对/绝对定位

4、overflow：scroll等的差别

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-radius 相关属性 border-radius: 1-4 length | % / 1

border-radius数值为合模型的一半就变成圆，记住：不是相对于合模型的width（如：965x1611）。

而是整个框才是

结果就显示的不是正圆，所以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 -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;

补充个知识点：

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);

3. CSS3渐变 css3实现背景颜色线性渐变

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; 定义当元素不面向屏幕时是否可见。可用在扑克牌旋转上。

【W3CSchool资料】 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属性值：

@keyframes	规定动画。
animation	全部动画属性的简写属性。除了animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完毕一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 "ease"。
	规定动画何时開始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal" 。逆向alternate
animation-play-state	规定动画是否正在执行或暂停。默认是 "running"，暂停时pause
animation-fill-mode	规定对象动画时间之外的状态。

★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元素。