码迷,mamicode.com
首页 > Web开发 > 详细

CSS3笔记-加强版

时间:2017-07-22 16:46:21      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:标识   结构性   obj   hover   声明   统一   响应式布局   display   scale   

属性选择器:
 
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);
 
 

CSS3笔记-加强版

标签:标识   结构性   obj   hover   声明   统一   响应式布局   display   scale   

原文地址:http://www.cnblogs.com/hello-web/p/7221481.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!