CSS3笔记-加强版

属性选择器:

 

E[attr]只使用属性名，但没有确定任何属性值

E[attr="value"]指定属性名，并指定了该属性的属性值

E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写

E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的

E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的

E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value

E[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）

备注：IE7及以上支持;

 

结构性伪类选择器：

 

E:nth-child(n) 表示E父元素中的第n个字节点

p:nth-child(odd){background:red}/*匹配奇数行*/

p:nth-child(even){background:red}/*匹配偶数行*/

p:nth-child(2n){background:red}

E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算

E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E

E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算

E:empty 表示E元素中没有子节点。注意：子节点包含文本节点

E:first-child 表示E元素中的第一个子节点

E:last-child 表示E元素中的最后一个子节点

E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的

E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的

E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点

E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点

 

伪类选择器：

 

E:target 表示当前的URL片段的元素类型，这个元素必须是E

E:disabled 表示不可点击的表单控件

E:enabled 表示可点击的表单控件

E:checked 表示已选中的checkbox或radio

E:first-line 表示E元素中的第一行

E:first-letter 表示E元素中的第一个字符

E::selection表示E元素在用户选中文字时

 

E:before 生成内容在E元素前

E:after 生成内容在E元素后

before和after中的content填写要添加的内容

 

E:not(s) 表示E元素不被匹配

E~F表示E元素其后的F元素

 

 

新增颜色模式:

 

rgba:

 

r Red 红 0-255

g Green 绿 0-255

b Blue 蓝 0-255

a Alpha 透明 0-1

 

实例: 背景透明，文字不透明(只给背景加上rgba)

 

问题：注意边框颜色透明有问题

 

 

Hsl：

 

H Hue 色调 任意数值

S saturation 饱和度 0%-100%

L Lightness 亮度 0%-100%

 

文字阴影：

 

text-shadow：x y blur color, …,…

 

参数：

x 横向偏移

y 纵向偏移

blur 模糊距离

color 阴影颜色

 

文本阴影如果加很多层，会很卡很卡很卡

 

文字阴影应用

 

最简单用法

text-shadow:2px 2px 4px black

阴影叠加

text-shadow:2px 2px 0px red, 2px 2px 4px green;

先渲染后面的，再渲染前面的

 

几个好玩的例子

层叠：color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;

文字移入模糊：

h1{ font:100px/200px "微软雅黑"; text-align:center; color:#000; text-shadow:0 0 0 rgba(0,0,0,1); border:1px solid #000; transition:1s;}

h1:hover{color:rgba(0,0,0,0);text-shadow:0 0 100px rgba(0,0,0,0.5);}

 

 

文字描边：

 

-webkit-text-stroke:宽度 颜色

 

 

新增文本功能（浏览器全兼容）：

 

direction 定义文字排列方式(全兼容)

rtl 从右向左排列

ltr 从右向左排列

注意要配合unicode-bidi (文字排列顺序)一块使用

 

text-overflow 定义省略文本的处理方式

clip 无省略号

ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap(文本不换行)一块使用)

 

---

 

 

 

弹性盒模型：

注意在使用弹性盒模型的时候
父元素必须要加display:box 或 display:inline-box

box-orient 定义盒模型的布局方向: 
参数：
horizontal 水平显示 
vertical 垂直方向

box-direction 元素排列顺序: 
参数：
normal 正序 
reverse 反序 
box-ordinal-group (数字，1最先)设置元素的具体位置

box-flex 定义盒子的弹性空间： 
子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和 
.box div:nth-of-type(1){-webkit-box-flex:1;} 
.box div:nth-of-type(2){-webkit-box-flex:3;} // 分成四份，第一个占1份，第二个占3份

box-pack 对盒子富裕(空白无元素)的空间进行管理： 
参数：
start 所有子元素在盒子左侧显示，富裕空间在右侧 
end 所有子元素在盒子右侧显示，富裕空间在左侧 
center 所有子元素居中 
justify 富余空间在子元素之间平均分布

box-align 在垂直方向上对元素的位置进行管理： 
参数：
star 所有子元素在居顶 
end 所有子元素在居底 
center 所有子元素垂直居中

盒模型阴影：

box-shadow:[inset] x y blur [spread] color 
参数： 
[inset]：可选，投影方式，inset：内投影；默认：外投影。 
x、y：阴影偏移 
blur：模糊半径 
spread：扩展阴影半径。先扩展原有形状，再开始画阴影 
color：颜色

box-reflect 倒影：
参数： 
direction 方向 above|below|left|right; 
距离 
渐变（可选）-webkit-linear-gradient(red 0,blue 100%)

resize 自由缩放：
参数： 
both 水平垂直都可以缩放 
horizontal 只有水平方向可以缩放 
vertical 只有垂直方向可以缩放 
注意：一定要配合overflow:auto 一块使用

怪异盒子：

box-sizing 盒模型解析模式 
content-box 标准盒模型 width/height=border+padding+content 
corder-box 怪异盒模型 width/height=content

css3分栏布局:

column-width 每一栏目的宽度 
column-count 栏目的列数 
column-gap 栏目相隔的距离 
column-rule 栏目的间隔线

css3响应式布局:

媒体类型 
all 所有媒体 
braille 盲文触觉设备 
embossed 盲文打印机 
print 手持设备 
projection 打印预览 
screen 彩屏设备 
speech '听觉'类似的媒体类型 
tty 不适用像素的设备 
tv 电视

关键字 
and 
not not关键字是用来排除某种制定的媒体类型 
only only用来定某种特定的媒体类型

媒体特性 
(max-width:600px) 
(max-device-width: 480px) 设备输出宽度 
(orientation:portrait) 竖屏 
(orientation:landscape) 横屏 
(-webkit-min-device-pixel-ratio: 2) 像素比 
devicePixelRatio 设备像素比 window.devicePixelRatio = 物理像素 / dips

样式引入

外部引入css写法：
横屏 
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
竖屏
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css">
屏幕大于800px时： 
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 800px)"> 
屏幕大于600px小于800px时：
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)"> 
屏幕小于600px时：
<link rel="stylesheet" type="text/css" href="styleC.css" media="screen and (max-width: 600px)">

页面内style样式写法： 
@media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0 auto;}}

为移动设备添加 viewport：

<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> 
content 参数：
width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)

移动端的头部标签和meta大全：

<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
<!-- 声明文档使用的字符编码 -->
<meta charset='utf-8'>
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>
<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 网页作者 -->
<meta name="author" content="name, email@gmail.com"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边http://bigc.at/ios-webapp-viewport-meta.orz -->

<!-- iOS 设备 begin -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- iOS 图标 begin -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
<!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<!-- iOS 图标 end -->

<!-- iOS 启动画面 begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
<!-- iPad 竖屏 768 x 1004（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
<!-- iPad 竖屏 1536x2008（Retina） -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
<!-- iPad 横屏 1024x748（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
<!-- iPad 横屏 2048x1496（Retina） -->

<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
<!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
<!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
<!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
<!-- iOS 启动画面 end -->

<!-- iOS 设备 end -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- Windows 8 磁贴图标 -->

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- 添加 RSS 订阅 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<!-- 添加 favicon icon -->

<title>标题</title>
</head>

---

圆角：

 

border-radius: 1-4个数字 / 1-4个数字

前面是水平，后面是垂直

不给“/”则水平和垂直一样

border-radius: 10px/5px; 类似椭圆

参数个数：

用法

1个：都一样

border-radius: 一样

2个：对角

border-radius: 左上&右下 右上&左下

3个：斜对角

border-radius: 左上 右上&左下 右下

4个：全部，顺时针

border-radius: 左上 右上 右下 左下

 

边框：

 

边框图片 border-image

border-image-sourceg 引入图片

border-image-slice 切割图片

border-image-width 边框宽度

border-image-repeat 图片的排列方式

round 平铺,repeat 重复,stretch拉伸

边框颜色 border-colors

 

 

线性渐变:

 

线性渐变格式：

linear-gradient([<起点> || <角度>,]? <点>, <点>…)

linear-gradient(60deg,red 0,blue 50%,green 100%)//由红渐变到蓝再渐变到绿

repeating-linear-gradient：平铺

参数 ：

起点：从什么方向开始渐变 left、top、left top 默认：top。

角度：从什么角度开始渐变 xxx deg的形式

点：渐变点的颜色和位置 black 50%，位置可选

 

加入<点>的位置：

top, red 40%, green 60%

top, red 50%, green 50%

同一个位置两个点——直接跳变

也可以用px

配合rgba：

top, rgba(255,255,255,1), rgba(255,255,255,0)

 

加入背景图片：

background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)

 

只能用在背景上：

IE：filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');

 

 

 

径向渐变：

 

radial-gradient([<起点>]? [<形状> || <大小>,]? <点>, <点>…);

起点：可以是关键字（left,top,right,bottom），具体数值或百分比

形状： ellipse、circle

大小 :具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;

注意firefox目前只支持关键字

 

 

背景：

 

多背景，逗号分开：

background: url(a.jpg) 0 0, url(b.jpg) 0 100%;

 

背景尺寸：

background-size:x y

background-size:100% 100%

cover 放大

contain 缩小

 

background-origin ： border | padding | content

border-box： 从border区域开始显示背景。

padding-box： 从padding区域开始显示背景。

content-box： 从content区域开始显示背景。

background-clip

border： 从border区域向外裁剪背景。

padding： 从padding区域向外裁剪背景。

content： 从content区域向外裁剪背景。

no-clip： 从border区域向外裁剪背景。

text: 除了设置透明文字的部分，其余部分都已经被裁减掉

 

遮罩：

 

mask-image

mask-position

mask-repeat

实例：特殊形状的幻灯片效果

 

 

 

 

 

 

 

---

w3c标准：

-ms-transform:translate(100px,100px); //-ms代表IE内核识别码（360属于IE内核）

-moz-transform:translate(100px,100px);//-moz代表火狐【Firefox】内核识别码

-webkit-transform:translate(100px,100px); //-webkit代表谷歌【Chrome】和苹果【safari】内核识别码

-o-transform:translate(100px,100px); //-o代表欧朋【opera】内核识别码

transform:translate(100px,100px); //统一标识语句

 

transition过渡:

参数：
transition-property 要运动的样式 （all || [attr] || none） 
transition-duration 运动时间 
transition-delay 延迟时间 
transition-timing-function 运动形式 
ease：（逐渐变慢）默认值 
linear：（匀速） 
ease-in：(加速) 
ease-out：（减速） 
ease-in-out：（先加速后减速） 
cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ） http://matthewlein.com/ceaser/

例如：宽度在1s变宽，接着高度在2s变高，接着背景颜色改变（高度延迟了1s，这一秒钟宽度正在变化）
.box{width:100px;height:100px;background:red; transition:1s width,2s 1s height,3s 3s background;}
.box:hover{width:500px;height:300px;background:blue;}

过渡完成事件 ：

Webkit内核： obj.addEventListener('WebkitTransitionEnd',function(){},false);

firefox: obj.addEventListener('transitionend',function(){},false);

添加过渡完成事件：在transition完成之后触发
function addEnd(obj,fn)
{
obj.addEventListener('WebkitTransitionEnd',fn,false); 
obj.addEventListener('transitionend',fn,false);
}
移除过渡完成事件：
function removeEnd(obj,fn)
{
obj.removeEventListener('WebkitTransitionEnd',fn,false);
obj.removeEventListener('transitionend',fn,false);
}

2D变换 transform：

rotate() 旋转函数 取值度数 （deg） 
transform-origin 旋转的基点，改变元素 x 和 y 轴，默认是center中心点。 
skew() 倾斜函数 取值度数 
skewX() 
skewY() 
scale() 缩放函数 取值 正数、负数和小数 
scaleX() 
scaleY() 
translate() 位移函数 
translateX() 
translateY()

transform 执行顺序问题：后写的变换先执行

matrix(a,b,c,d,e,f) 矩阵函数

 

默认：matrix(1,0,0,1,0,0)

 

通过矩阵实现缩放

x轴缩放 a=x*a c=x*c e=x*e;

y轴缩放 b=y*b d=y*d f=y*f;

通过矩阵实现位移

x轴位移: e=e+x

y轴位移: f=f+y

通过矩阵实现倾斜

x轴倾斜: c=Math.tan(xDeg/180*Math.PI)

y轴倾斜: b=Math.tan(yDeg/180*Math.PI)

通过矩阵实现旋转

a=Math.cos(deg/180*Math.PI);

b=Math.sin(deg/180*Math.PI);

c=-Math.sin(deg/180*Math.PI);

d=Math.cos(deg/180*Math.PI);

 

变换兼容IE9以下IE版本只能通过矩阵来实现：

 

filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');

 

IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d

 

3D变换：

 

transform-style：preserve-3d 给父级添加，建立3D空间

perspective：100px; 景深,离变换元素的垂直距离为100px

perspective- origin 景深基点,观察的角度，默认是center

transform 新增函数

rotateX()

rotateY()

rotateZ()

translateZ()

scaleZ()

 

animation：

 

1、animate——关键帧：

关键帧——keyframes

类似于flash

只需指明两个状态，之间的过程由计算机自动计算

关键帧的时间单位

数字：0%、25%、100%等；

字符：from(0%)、to(100%)；可以只有to

格式

@keyframes 动画名称

{

动画状态

}

 

2、animate——调用动画

 

 

调用的标签(#div1、xxx:hover之类的)

 

eg：调用.box元素在4s内以无限次、匀速、一正一倒序执行domove动画

.box{-webkit-animation:4s domove infinite linear alternate;}

 

 

必要属性:

 

animation-name 动画名称（关键帧名称）

animation-duration 动画持续时间

例如：

-webkit-animation:miaov 4s;

-webkit-animation-name: ‘miaov';

-webkit-animation-duration: 4s;

 

可选属性:

 

animation-play-state 播放状态（ running 播放 和paused 暂停 ）

 

animation-timing-function动画运动形式：

linear 匀速。

ease 缓冲。

ease-in 由慢到快。

ease-out 由快到慢。

ease-in-out 由慢到快再到慢。

cubic-bezier(number, number, number, number) 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

 

animation-delay动画延迟

只是第一次

 

animation-iteration-count重复次数：

infinite为无限次

 

animation-direction 播放前重置：

动画是否重置后再开始播放

alternate 动画直接从上一次停止的位置开始执行

normal 动画第二次直接跳到0%的状态开始执行

 

3、animate——和JS结合

 

通过class:

在class里加入animation的各种属性

直接给元素加-webkit-animation-xxx样式

 

animation的问题:

写起来麻烦

没法动态改变目标点位置

 

动画end事件：

 

obj.addEventListener('webkitAnimationEnd', function (){}, false);

obj.addEventListener('animationend', function (){}, false);