总结CSS3新特性(选择器篇)

【总结CSS3新特性(选择器篇)】的更多相关文章

总结CSS3新特性(选择器篇)

CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行; ~: p ~ p { color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth-of-type(1)),但是权重要低于后者*/ } [attribute^=value]: 选择该属性以特定值开头的元素 [attribute$=value]: 选择该属性以特定值结尾的元素 [attribute*=value]: 选择该属性中出现了特定值的元素上边三个是可以组合使用的,方法如…

总结CSS3新特性(Transform篇)

概述: CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起文档的重排,只有重排),以及形状,还有些3D形变.结合 Animation(这里以后会有个链接的) 能实现酷炫的动画; 旋转(rotate): rotate支持一个参数,一个角度值 0-360deg #demo { transform:rotate(180deg) ;/*实现旋转,左上角的东西会在右下角显示*/ } 缩放(scale): scale支持两个参数(x,y),如果没有填y的话,则取x的值;1为正…

总结CSS3新特性(颜色篇)

颜色: CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值; hsl(): hsl函数:h(色调),s(饱和度),l(亮度); 色调:为0-360之间的数值[经实验,可以为小数]; 饱和度与亮度:均为百分比; 下图截自http://www.w3.org/wiki/CSS/Properties/color/HSL 当亮度为100%时为白色,当亮度为0%为黑色; 饱和度100%以及亮度50%时生成的颜色均为web安全色 rgb(): rgb函数:r(re…

总结CSS3新特性(Animation篇)

动画(Animation),是CSS3的亮点.//之一通过animation属性指定@keyframe来完成关键帧动画; @keyframe用法: @keyframes name { 0% { top:; }/*0%可用from关键字替代*/ 50% { top: 10px; } 100% {; }/*100%可用to关键字替代*/ } 由于是CSS3,所以不出意外的各种前缀: --图片来自MDN,CSS中的关键帧单个帧中可填写多个属性,而且不需要保证一致,如: @-webkit-keyfr…

总结CSS3新特性(Transition篇)

CSS 过渡(transition), 是 CSS3 规范的一部分, 用来控制 CSS 属性的变化速率. 可以让属性的变化过程持续一段时间,而不是立即生效.比如,将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 transition 后,将按一个曲线速率变化.这个过程可以自定义. Transition是一个简写属性,四个值(单独使用均加transition-前缀)的顺序: property duration timing-function delay 过渡就是在一定时间内完成某属性值的…

css3新特性选择器（补充）

1.选择p标签中的第一个字符 p:first-letter{ color:red; font-size:25px; } 2.选择p标签中的第一行 p:first-line{ color:red; font-size:25px; } 3.在p的前面和后面添加伪类 p:before/after{ content:"': 设置属性样式 } 4.设置input在得到焦点.可以被修改.不能被修改.选中时的样式 input:focus/enabled/disabled/cheked{ background:…