 |
文件夹：
|
1、显示属性。自身属性，文本属性
|
推荐样式编写顺序
2 自身属性（合模型）：width，height，margin，padding。border。background（第3点）1 显示属性 ：display，list-style，position，float，clear [注意依照横着的顺序] 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 ② border-image ：
stretch 拉伸方式来填充边框背景图 |
repeat 平铺 图片碰到边界时超出截断 |
round 平铺，图片会工具边框的尺寸动态调整图片大小直至刚 好铺满整个边框
  
③ 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值。
文字阴影的列表（以逗号分隔）,1px的顶部和底部1px的阴影。
text-shadow：水平偏移量 垂直偏移量 阴影模糊值 颜色，
水平偏移量 垂直偏移量 阴影模糊值 颜色。（多个阴影用，隔开）
eg：
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;
  补充个知识点：
|
| 代码： .wrap img{ height: 160px; 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{ 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%)
|
二。三维变形的变形方式：四种方法
旋转——缩放——平移——扭曲
| 旋转（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;）
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转换元素的透视视图。
|
|
參与过渡的属性、过渡时间、过渡方式（动画类型） 延迟时间 【须要写前缀】
普通情况下，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。
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样式
|
优势：① 语义性好 少类名 有利于SEO 代码少
② 文档易读 、搜索引擎可以更好的理解页面中的内容、作为开发人员，可以更快更准确的搜索到信息
①<新增标签>
article 定义文章、帖子、用户评论、 代表文档、页面或者应用程序中独立、完整、能够独自被外部引用的内容
header 定义页眉 aside 定义文章的側边栏
figure一组媒体对象的以及文字 nav定义导航
figcaption定义figure的标题 section定义文档中的区段
footer定义页脚 time定义日期和时间
vidio 定义视频 canvas 定义图形，提供画布
audio定义音频 command表示命令button
embed插入各种多媒体 details表示用户要求得到并能够得到的具体信息
mark定义须要突出显示或者高亮的文本 wbr表示软换行
progress显示js中耗费的函数进程 hgroup定义对网页标题的组合
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元素。