css3_note

css3基础

css3选择器

1. 属性选择器

   属性选择器基本上IE7+都支持，可以放心的使用，参见caniuse

   • [attr]
   • [attr=val]
   • [attr*=val]
   • [attr^=val]
   • [attr$=val]
   • [attr~=val] //[title~=bar]匹配 <a title="foo bar baz">
   • [attr|=val] //[lang|=us]匹配 <div lang="en-us">

2. 伪类选择器（结构伪类 和 状态伪类）
   
   结构伪类选择器：

   • :root //根元素
   • :empty //空元素(不包含文本或子元素)
   • :targt //锚点目标
   • :not() //不包含子元素如： #floor :not(.nav), 不包含.nav的#floor
   • :first-child //.nav li:first-child 选择作为第一个子元素的li
   • :last-child //.nav li:last-child 选择作为最后一个子元素的li
   • :nth-child(n) :nth-child(odd)奇 :nth-child(even)偶 :nth-child(2n+1)
   • :nth-last-child(n) // child->last-child表示反方向
   • :nth-of-type(n) :nth-of-type(odd) :nth-of-type(even) //child->of-type表示同类型的子元素范围
   • :nth-last-of-type(n) //of-type->last-of-type 反方向
   • :only-child //唯一子元素 ul li:only-child ul只有一个li,无其他元素

   状态伪类选择器：

   • :link
   • :visited
   • :hover
   • :active
   • :focus //获得焦点
   • :enable //可用
   • :disable //禁用
   • :read-only //input 只读
   • :read-write //读写
   • :default //单选 复选 用户未交互
   • :checked //单选 复选 选中
   • :selected //select下拉框

3. 伪元素
   
   常用伪元素 ::after, ::before 和 ::selection , css3为了区分伪元素和伪类选择器，伪元素改为用 双冒号作为前缀 如 ::after， 其实 :after 兼容性更好一点.

   • ::selection //代表选中的内容

   • ::before //代表元素开始标签后的位置 如：p::before

   • ::after //代表元素结束标签前的位置 如：p::after

       **伪元素通常都要设置 content 样式属性，指定其包含内容**
       content:string/url()/none/attr()/counter()
       content属性可以直接指定字符串，加载url的内容，读取标签属性值，读取计数器值
       如：
       p:after{content:'...'}
       p:after{content:none, background:url(..); position:absolute; width:100px; height:100px;}
       p:after{content:url('../images/tuijian.jpg');}
       img:after{content:attr('alt');} //将图片alt属性作为after的内容
     
       h1{counter-increment:titleNum;}//为h1定义计数器titleNum, 每遇到一个h1, titleNum自增1
       h1:before{content:counter(titleNum);} //在before中输出计数器的值
       h1:before{content:"第"counter(titleNum)"个标题";}
       h1:before{content:"第"conter(titleNum, upper-alpha)"个标题";} //大写字母形式的计数器
     

css3常用样式属性

• border-radius:tl tr br bl (左上角顺时针 同border)

• box-shadow: offsetX offsetY blurPx color
  
  blurPx是以投影开始位置为中心，向内向外虚化的像素值，如box-shadow:10px 10px 3px #000其实7 8 9， 11 12 13都是虚化的像素，10是虚化中心

• text-shadow:offsetX offsetY blurPx color
  
  属性值参考 box-shadow， text-shadow据说是很早就支持的属性

css3渐变

css3的渐变分线性渐变和径向渐变，常用来做渐变背景，效果非常赞，节约n多字节

可视化生成渐变的网站

语法1: background:-webkit-gradient(linear, pos1, pos2, colorBlock1, colorBlock2, colorBlock3..);
.main{background:-webkit-gradient(linear, 10% 10%, 100% 100%, color-stop(0.2,#aa0022), color-stop(0.5, #22aa00), color-stop(1, #0022aa) ); } //多种颜色渐变

语法2：background:-webkit-gradient(linear, pos1, pos2, from(color1), to(color2));
.main{background:-webkit-gradient(linear, 0 0, 100% 100%, from(#00aa22), to(#aa0011)); }

//firefox的渐变语法
background:-moz-linear-gradient(pos deg, colorBlock1, colorBlock2..);
.main{ background:-moz-linear-gradient(10 10 90deg, #00aa33 20%, #aa0012 50%, #3300aa 100%); }
background:-moz-linear-gradient(direction, color1, color2);
.main{ background:-moz-linear-gradient(top, #aa0023, #0022aa); }

//IE渐变用滤镜实现
filter:progid:DXImageTransform.Microsoft.gradient(...);
.main{filter:progid:DXImageTransform.Microsoft.gradent(startColor=#aa0033, endColor=#33aa00, gradientType=1);

css3变形属性 transform

• transform:scale(n); //缩放变形 scaleX(n) scaleY(n)
• transform:skew(xdeg, ydeg); //斜切变形 应用的不是很多 skewX(ndeg) skewY(ndeg)
• transform:rotate(ndeg);//旋转 顺时针角度增大， 转盘抽奖的场景较常用 rotateX(ndeg) rotateY(ndeg) rotateZ(ndeg)
• transform:translate(x,y);//位移 百分比值是相对元素自身大小的，常用实现水平垂直都居中
  
  可分开设置 transform:translateX(npx), transform:translateY(npx) transform:translateZ(npx);
  
  transform:translate3d(x,y,z)同时设置3个维度的translate;
  
  transform:translate(x,y)同时设置xy方向的translate.
  
  css3的transfroam属性和PS的变形工具(ctrl+T)实现同样的效果，可参考来理解

css3动画属性

• transition: prop1 duration timing-fun delay, prop2 duration timing-fun delay,..

    起始值和终值之间的过渡动画, 如：
    //指定当高度变化时的过渡动画
    .nav{-webkit-transition:height 1s linear; cursor:pointer}
    //鼠标悬停时改变高度，触发过渡动画
    .nav:hover{height:300px;}
  

• animation: animateName duration timing-fun delay iteration-count, fill-mode;

    //定义动画
    @-webkit-keyframes bgAni{
    	0% {background:#0f0;}
    	50% {background:#f00;}
    	100% {background:#00f;}
    }
  
    //调用动画
    .nav:hover{-webkit-animate:bgAni 2s linear;}
  

animation 和 transtion 之间的区别：

使用transtion只能指定属性的开始值和结束值，然后在两值之间平滑过渡来实现动画； animation可以定义动画过程的多个值，实现更复杂的动画。

timing-function包括：

• linear：线性过渡，等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)；
• ease：平滑过渡，等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)；
• ease-in：由慢到快，等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)；
• ease-out：由快到慢，等同于贝塞尔曲线(0, 0, 0.58, 1.0)；
• ease-in-out：由慢到快再到慢，等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)；
• cubic-bezier(n,n,n,n)：自定义贝塞尔曲线类型，4个数值需在[0, 1]区间内；

css3媒体查询

针对不同的媒体类型(screen, tv, print)，或不同媒体尺寸，定义对应的样式，这样我们就可以轻松地实现响应式布局

其实媒体查询一直都支持，只是功能有限，仅支持查询媒体类型

媒体查询的使用

• link标签media属性 <link rel="stylesheet" type="text/css" href="style.css" media="print" />
• 样式表中@media定义 @media screen{ .nav{ color:blue;} }
• @import导入 @import url("css/reset.css") screen;

媒体查询的条件

常用的媒体查询条件有 width, height, device-width, device-height和orientation

//媒体类型
all //所有设备
screen //电脑显示器
handheld //便携设备
print //打印用纸或者打印预览图
projection //各种摄影设备
tv //电视类型的设备  

常用设备特性：
width | min-width | max-width |  //浏览器窗口的宽度

height | min-height | max-height |  //浏览器窗口的高度

device-width | min-device-width | max-device-width |  //设备屏幕分辨率的宽度值

device-height | min-device-height | max-device-height |  //设备屏幕分辨率的高度值

orientation有两个值 portrait|landscape。  //浏览器窗口的方向是纵向还是横向。当窗口的高度大于等于宽度时，是portrait，否则为landscape
.  

媒体查询示例：
1、link标签使用媒体查询
<link href='css/480.css' media='only screen and (max-width: 480px)' rel='stylesheet' type='text/css'>  

2、样式表中使用
@media only screen and (max-width: 768px) { }
@media only screen and (min-width: 480px) { }  

//多条件媒体查询 and表示与 ,表示或
@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px){}
@media all and (max-width:800px) and (min-width: 500px) {
	.nav{
		width: 100%;
		background: pink;
	}
}

3、Orientation
@media (orientation: portrait) { }
@media (orientation: landscape) { }