css3基础
css3选择器
-
属性选择器
属性选择器基本上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">
-
伪类选择器(结构伪类 和 状态伪类)
结构伪类选择器:- :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下拉框
-
伪元素
常用伪元素::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; 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- 480px)' rel='stylesheet' type='text/css'>
2、样式表中使用
@media only screen and (max- 768px) { }
@media only screen and (min- 480px) { }
//多条件媒体查询 and表示与 ,表示或
@media handheld and (max- 480px), screen and (max-device- 480px), screen and (max- 600px){}
@media all and (max-800px) and (min- 500px) {
.nav{
100%;
background: pink;
}
}
3、Orientation
@media (orientation: portrait) { }
@media (orientation: landscape) { }