CSS3主要知识点复习总结+HTML5新增标签
文件夹:
|
推荐样式编写顺序
1 显示属性 :display,list-style,position,float,clear [注意依照横着的顺序] 2 自身属性(合模型):width。height,margin。padding,border,background(第3点) * 书写的CSS代码的时候请注意依照显示 自身 文本的书写顺序来书写! |
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 平铺。图片会工具边框的尺寸动态调整图片大小直至刚 好铺满整个边框
③ border-radius 相关属性 border-radius: 1-4
|
<style> .wrap { height: 500px; width: 500px; border: 50px solid; border-radius: 250px; } </style> |
text-shadow:2px 3px 2px #000;
text-shadow:-2px -3px 2px rgba(0, 118, 160, .25);
设置为负值,X -偏移阴影转移到左側。设置为负值偏移Y -转移阴影顶端。颜色能够用RGBA值。
text-shadow:0px 1px 0px #fff,0px -p1x 0px #000;
.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); } |
background:transparent; 等价 background:rgba(0,0,0,0);
color:
transparent; 等价 color:rgba(0,0,0,0); |
代码: .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; |
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; } |
-webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 20%,
rgba(0,0,0,0.6) 100%)
|
旋转(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); |
② scale(-1,1); ③scale(1,-1); ④scale(-1,-1);等价scale(-1);
一个()中的属性值之间用逗号分隔。
top、数值、百分比改变旋转中心
负数是先翻转元素然后再缩放
。包括两个參数,假设缺少第二个參数,那么第二个參数的值等于第一个參数。scaleY(<number>):表示仅仅在Y轴(垂直方向)缩放元素。
scaleZ(<number>):表示仅仅在Z轴缩放元素。
前提是元素本身或者元素的父元素设定了透视值(perspective:100;)
perspective 属性。 Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
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转换元素的透视视图。
|
參与过渡的属性、过渡时间、过渡方式(动画类型) 延迟时间 【须要写前缀】
普通情况下。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 规定过渡開始前等待几秒
表示无限循环
.wrap {
height:100px; |
规定动画。
|
|
全部动画属性的简写属性。除了animation-play-state 属性。
|
|
规定 @keyframes 动画的名称。
|
|
规定动画完毕一个周期所花费的秒或毫秒。默认是 0。
|
|
规定动画的速度曲线。默认是 "ease"。
|
|
规定动画何时開始。默认是 0。
|
|
规定动画被播放的次数。默认是 1。
|
|
规定动画是否在下一周期逆向地播放。
默认是 "normal" 。逆向alternate |
|
规定动画是否正在执行或暂停。默认是 "running",暂停时pause
|
|
规定对象动画时间之外的状态。
|
transition animation
1、animation多两个參数,循环和动画的方式
2、transition不能自行触发,通过hover等动作或结合JS进行触发。anmiation能够自行执行。
3、transition可控性较弱,仅仅能指定起始状态和结束状态。而animation能够定义多个关键帧。
4、动画在执行结束之后,须要回到初始状态
5、transition的作用,能够用一句话来概括。‘平滑’改变CSS样式
|
9.HTML5新添加标签:
figure一组媒体对象的以及文字 nav定义导航
figcaption定义figure的标题 section定义文档中的区段
footer定义页脚 time定义日期和时间
vidio 定义视频 canvas 定义图形。提供画布
audio定义音频 command表示命令button
embed插入各种多媒体 details表示用户要求得到并能够得到的具体信息
mark定义须要突出显示或者高亮的文本 wbr表示软换行
progress显示js中耗费的函数进程 hgroup定义对网页标题的组合
CSS3主要知识点复习总结+HTML5新增标签的更多相关文章
- 解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题
https://www.cnblogs.com/yangjie-space/p/4816279.html html5shiv.js和respond.min.js 做页面常用的东西,写这里用的时候省点去 ...
- 盒子模型,定位技术,负边距,html5 新增标签
盒子模型 /*[margin 外边距] margin属性最多四个 1.只写一个值,四个方向的margin均为这个值 2.写两个值:上,右两个方向,下默认=上,右 默认=左 3.写三个值:上.右.下三个 ...
- html5新增标签/删除标签
闲聊: 最近小颖工作稍微比较轻松,没事就看看慕课,看了看:HTML5之元素与标签结构,里面简单讲解了下HTML5的一些新特性,小颖之前没写过HTML5的页面,所以就当写笔记将那些新的特性整理出来,也方 ...
- 让旧浏览器支持HTML5新增标签
首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签. 接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素. ...
- HTML5新增标签及具体用法
html5自从推广普及以来,迅速被各大浏览器支持.采用html5设计的网页逐渐成为网页设计的时尚.下面就温习下html5的新增标签. HTML 5 中的新特性包括了嵌入音频.视频和图形的功能,客户端数 ...
- HTML5新增标签的汇总与详解
趁着一点闲暇时间,把HTML5的新增标签整理了一下,用了表格的形式展现,分别归纳了各标签的用法及属性分析.这样方便各位以后在运用HTML5标记遇到疑惑时,直接上来对照看下就明了了,希望对大家有帮助哦. ...
- 第二篇、HTML5新增标签
<html> <head> <meta charset="UTF-8"> <title>html5新增的标签</title&g ...
- html5新增标签兼容性
很多低版本的浏览器是不识html5新增的标签的,所以为了解决浏览器兼容性问题,主要有两种方法: js可以创建我们自定义的标签,例如,我们可以用js语句 document.createElement(' ...
- html5 新增标签和特性
文档类型设定 document HTML: XHTML: HTML5 字符设定 <meta http-equiv="charset" content="utf-8& ...
随机推荐
- NOIP 2015 跳石头
题目背景 一年一度的“跳石头”比赛又要开始了! 题目描述 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起点和终点.在起点和终点之间,有 N 块岩石(不 ...
- 【数论】【欧拉函数】【筛法求素数】【乘法逆元】【快速幂取模】bzoj2186 [Sdoi2008]沙拉公主的困惑
http://www.cnblogs.com/BLADEVIL/p/3490321.html http://www.cnblogs.com/zyfzyf/p/3997986.html 翻了翻题解,这两 ...
- 数据结构之B-树,你每天都在用的,源码发布!
五一前就筹划着写下这篇文章,但是迫于自己从来没有实现过B-树(如果大家感兴趣,我可以考虑写一篇B+树的文章),手中没有源代码,另外自己以前对B-树也是一知半解状态中,担心误人子弟,在4月30日终于把代 ...
- 命令行下的C++程序转换成VC的MFC程序需要注意的问题
在将命令行下的C++程序转换成MFC窗口程序时一般会提示下面这种错误: fatal error C1010: unexpected end of file while looking for prec ...
- JNI之Hello World!
基本流程: 1. 创建一个类(HelloWorld.java)2. 使用 javac 编译该类3. 利用 javah -jni 产生头文件4. 用本地代码实现头文件中定义的方法5. Run 备注:在一 ...
- Android 架构 2.界面
其中,最上层的界面,是变化最频繁的一个层面,也是最复杂最容易出问题的一个层面,如果规划不好,很容易做着做着,又乱成一团了.要规划好界面层,至少应该遵循几条基本的原则: 保持规范性:定义好开发规范,包括 ...
- go/golang init()方法的调用
go/golang main() init()方法的调用 u011156212 · 2015-10-20 13:00:05 · 9965 次点击 · 预计阅读时间 1 分钟 · 27分钟之前 开始浏览 ...
- Python 自用代码(某方标准类网页源代码清洗)
用于mongodb中“标准”数据的清洗,数据为网页源代码,须从中提取: 标准名称,标准外文名称,标准编号,发布单位,发布日期,状态,实施日期,开本页数,采用关系,中图分类号,中国标准分类号,国际标准分 ...
- OpenGL 资源汇编
本文收集和汇总了 OpenGL 的文档.教程和在线书籍,供学习和开发者參考. OPENGL开发教程:http://www.linuxgraphics.cn/opengl/index.html Open ...
- EffectiveJava(23)为什么不能在新生代码中使用原生态类型
泛型类和泛型接口 声明一个或者多个类型参数的类或者接口. 为什么不要在新代码中使用原生态类型 原生态类型,即泛型不带参数的类型 如List的list,list就是其原生态类型 1.使用原生态类型,插入 ...