CSS3
2016-11-28 16:00:43 0 举报AI智能生成
CSS3 高级知识点
作者其他创作
大纲/内容
2.内容生成
通过CSS向元素的前面或后面增加一部分内容
选择器
:before
匹配到某一元素的最前面
:after
匹配到某一元素的最后面
内容生成属性
content
配合 before 或 after 元素，插入生成内容
取值
字符串（纯文本），插入到指定的位置处
url():生成的图像
计数器
示例
<!-- \t1、lw 的前面 要添加 老王:\t2、xm 的前面 要添加 小明:\t3、:与其他文本要有5px间隔\t 老王: 今天有..... --> <div class=\"lw\">\t今天下午有时间吗? </div> <div class=\"xm\"> 你要干什么? </div> <div class=\"lw\">\t今天下午来接我，行吗? </div>
4.多列
分隔列
column-count
规定元素被分隔的列数
div{ width:450px; border:1px solid #e4393c; column-count: 6; -webkit-column-count: 6;}
column-gap
设置列与列之间的间隔，以数值为单位
column-gap:40px;
column-rule
大小，样式，颜色
column-rule-width
column-rule-style
column-rule-color
column-rule: 3px solid navy;
兼容性
IE10 和 Opera支持
Firefox 前缀 -moz-
chrome safari 前缀 -webkit-
5.转换(transform)
定义：使元素改变形状，尺寸和位置的一种效果( 又叫变形 )
2D转换：使元素在X轴和Y轴平面上发生改变
3D转换：元素还可以在Z轴上发生变化
转换属性
transform
取值：none/transform-function
none:表示元素不进行转换（默认值）
transform-function:表示一个或多个转换函数，中间以空格分隔。
transform-origin
用来指定元素的转换原点位置
默认情况下，原点是在当前元素的中心点上
数值 / 百分比 / 关键字
数值：当前元素的左上角为 X：0 Y：0
百分比：宽度百分比 高度百分比 0% 0% 左上角
关键字：top bottom left right center
值的个数
当只给一个值时，表示X，Y 使用同一值
2D
位移
translate
沿 坐标方向 移动指定的距离
语法：translate(x轴移动距离，y轴的移动距离)
x:正为右，负为左
y:正为下，负为上
注意：位移不会影响其他元素，但有可能移动后盖住其他元素
缩放
scale
将指定坐标轴上的坐标缩放指定的倍数
语法：scale(倍数)
倍数： 0-1 缩小 >1 放大
只带一个参数，则表示沿 X，Y 轴等比缩放
两个参数，分别表示X轴，Y轴 缩放比例
旋转
rotate
围绕一个参照原点(transform-origin)，旋转指定角度，默认顺时针
语法：transform:rotate(Ndeg);
N为正数，顺时针旋转
N为负，逆时针旋转
注意：rotate 在旋转的过程中，不但能够旋转元素，同时能够旋转绘图的坐标系方向。如果配合其他的变形一起来做的话，rotate在前，会影响之后沿坐标轴的其他变形。
解决方案：如果配合变形一起来做，最好将rotate放在最后来执行
倾斜
skew
沿着坐标轴方向，倾斜指定角度
skew(ndeg)
沿X轴倾斜
沿着X轴和Y轴同时倾斜
注意：X轴 角度为正，向左倾斜，角度为负，向右倾斜
Y轴 角度为正，向下倾斜，角度为负，向上倾斜
http://www.bbs0101.com/archives/248.html
3D
prespective
设置在父元素上
Firefox: -moz-perspective
3D位移可以改变元素在Z轴上的位置
translateZ(z)
scaleZ(距离)
scaleX() scaleY
rotateX( n deg)
以X为轴进行旋转
rotateY( n deg)
以Y为轴进行旋转
rotateZ( n deg)
以Z为轴进行旋转
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值； y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值； z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值； a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
参考：http://blog.csdn.net/tina_ttl/article/details/51279530
7.动画(animation)
通过关键帧控制动画的每一步，使元素从一种样式逐渐变化为另一种样式，实现复杂的动画效果
关键帧
@keyframes 的作用
用于声明动画
帧：用于分解动画动作
@keyframes 的语法
@keyframes name { from | 0% { CSS 样式; } percent { CSS 样式; } to | 100% { CSS 样式; } }
动画属性
animation 属性
animation:name duration timing-function delay iteration-count direction;
动画子属性
animation-name
调用动画，规定需要绑定到选择器的keyframe的名称
animation-duration
完成一个动画周期需要的时间
animation-timing-function
规定动画的速度曲线
animation-delay
播放之前的延迟时间
取值为数值，单位为秒或者毫秒
animation-iteration-count
播放次数
取值为数值或者为infinite
animation-direction
动画播放方向
normal 为默认值，表示正常播放
alternate 表示轮流播放，即动画会在奇数次数正常播放，偶数次数向后播放
animation-fill-mode 属性
规定动画在播放之前或之后，其动画效果是否可见
none: 不改变默认行为
forwards: 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards:在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both: 向前和向后填充模式都被应用
animation-play-state 属性
规定动画运行还是暂停
paused:暂停
running:动画播放
CSS3
1.复杂选择器
兄弟选择器
相邻兄弟选择器
选择紧接在元素之后的另一个元素，而且两者有相同的父元素
使用 + 作为结合符
<style> p + b{ font-size:30px; color:green; }</style>
<p>This is a <b>interesting</b> book!</p><b>Relly?</b><b>More?</b>
通用兄弟选择器
匹配某元素后面的所有兄弟元素
使用 ~ 作为结合符
p{ border:1px solid black; padding:5px; width:200px;}div.d1 + p{ color:red;}div.d1 ~ p{ background-color:#ccc;}
<p>段落1</p><div class=\"d1\">指定<p>元素</p></div><p>段落2</p><p>段落3</p>
属性选择器
将元素附带的属性用于选择器，从而对带有所指定属性的元素设置样式
[id] 或 p[id]
p[id][class]
p[id=\"summary\"]
p[class~=\"myClass\"]
以空格隔开的单词列表，包含有\"myClass\"单词 (必须为独立单词，以空格分隔)
<input class=\"myClass current\">
p[class^=\"b\"]
class 属性值以“b”开头的所有<p>元素
p[class*=\"b\"]
包含字串\"b\"的所有<p>元素
p[class$=\"b\"]
以“b\"结尾的所有<p>元素
p[class!=\"b\"
class属性不等于b的所有p元素
伪类选择器
:link :visited :hover :active
目标伪类
突出显示活动的HTML锚，用于选取当前活动的目标元素
:target
div:target
div:target{ color:red;}:target{ font-size:30px;}
<a href=\"#d1\">测试1</a><br><a href=\"#p1\">测试2</a><br><a href=\"#a1\">测试3</a><br><div class=\"split\"></div><div id=\"d1\">div锚</div><p id=\"p1\">p锚</p><a name=\"a1\">a锚</a>
案例
点击链接按钮，显示相应图片
img{ display:none; } img:target{ display:block; } </style></head><body><a href=\"#img1\">img1</a><a href=\"#img2\">img2</a><a href=\"#img3\">img3</a><a href=\"#img4\">img4</a><div> <img id=\"img1\" src=\"data/1.jpg\"> <img id=\"img2\" src=\"data/2.gif\"> <img id=\"img3\" src=\"data/3.png\"> <img id=\"img4\" src=\"data/4.jpg\"></div>
元素状态伪类
主要匹配元素的禁用，启用，选中状态 ( 主要用于表单元素 )
:enabled
:disabled
:checked
只用于单选按钮和复选按钮
结构伪类
从元素的结构（层级结构）上来进行划分的
什么时候使用结构伪类
找第一个子元素
:first-child
最后一个子元素
:last-child
没有子元素
:empty
注意：文本也算子元素，也就是文本也不能有
pre style=\
仅仅包含一个子元素
:only-child
<div> <span></span> <span></span></div><div> <span></span> span:only-child</div>
练习：
<body><!--1.修改第一个子元素p，颜色为红色--><!--2.修改最后一个子元素p，颜色为蓝色--><!--3.匹配所有的空元素，高度50像素，边框1像素，实线，绿色--><!--4.匹配是其父元素中唯一的一个div元素，修改边框为黑色--><div> <p>段落1</p> <p></p> <p>段落2</p> <p>段落3</p></div></body>
否定伪类
匹配非 指定元素/选择器 的每个元素
:not(selector)
selector不支持复杂选择器，兼容性不如jquery选择器
<!--1.除text外，所有的表单元素颜色全部改为红色--><!--2.除最后一个元素外，所有的表单元素全部改为粗体，绿色背景色--><input type=\"text\" value=\"请您输入\"><br><input type=\"password\" value=\"123456\"><br><input type=\"email\" value=\"abc@qq.com\"><br>
注意：最后一个元素为<br>
伪元素选择器
主要针对元素中的文本内容进行匹配的。
:first-letter
选取指定选择器的首字母
一般用于排版，首字符突出等操作
:first-line
指定选择器的首行
是页面中渲染的首行，不是代码中的首行
::selection
匹配用户选取的部分
3.计数器
作用：向已经存在的HTML内容增加序号
如何使用计数器
属性
counter-reset
定义一个计数器，并设置初始值为0
使用
body{ counter-reset:计数器名称 初始值 计数器名称 初始值;}
注意：一般放在body中，放在其他标签中，则会初始化很多同名计数器
counter-increament
设置计数器的增量值，默认值是1
注意：哪个元素使用，则在哪个元素中声明
div{ counter-increment:count 10; }
函数
counter( 计数器名称 )
<head> <meta charset=\"UTF-8\"> <title>Title</title> <style> body{ counter-reset:count; } div{ counter-increment:count 1; } div:before{ content:\"第\"counter(count)\"章\" } </style></head><body><div>啊啊啊</div><div>啊啊啊</div><div>啊啊啊</div></body>
5.CSS Hack
为什么需要CSS Hack
浏览器兼容性引发的问题
不同浏览器渲染出来的效果存在差别
浏览器的运行模式
1.混杂模式
2.标准模式（standard Mode )
3.准标准模式 ( Almost Standard Mode )
浏览器主要通过 DOCTYPE 进行模式选择
触发混杂模式：不声明DOCTYPE
触发准标准模式
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Frameset//EN\" \"http://www.w3.org/TR/html4/Frameset.dtd\">
触发标准模式
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 //EN\" \"http://www.w3.org/TR/html4/strict.dtd\">
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD XHTML 1.0 Strict //EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<!DOCTYPE html>
兼容性问题
margin 和 padding
在不同IE版本下显示效果不同（6，7，8）
解决方案，重置为0
text-align
ie低版本中（ie8以下），通过text-align 使子元素居中，但ie高版本和其它浏览器没有效果
ie高版本和其他浏览器通过设置子元素 margin:0 auto 实现居中效果( ie6 也能兼容)
元素高度与内容
ie6及低版本中，元素的高度包括内容
ie高版本中，元素的高度与设定有关，内容会超出容器
解决方案： overflow:hidden
子元素设置上外边距(margin-top)时，变成父元素的上边距
子元素的上外边距会认为是父元素的父外边距( ie的一些版本，包括chrome)
解决方案
设置父元素边框 border:1px solid transparent;
ie6下透明边框显示有误，另外加入了边框的1px距离
父元素相应撑大了
CSS Hack原理
CSS类内部Hack
属性前缀
选择器Hack
在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀
*前缀
*html
*+前缀
IE7
*+html
其他
HTML头部引用Hack
IE条件注释
gt:greater than
选择条件版本以上版本，不包含条件版本
lt:less than
选择条件版本以下版本，不包含条件版本
gte:greater than or equal
选择条件版本以上版本，包含条件版本
lte: less than or equal
选择条件版本以下版本，包含条件版本
!: 选择条件版本以外所有版本，无论高低
<!--[if IE 7]> <style> div{ width:200px; height:200px; background:red; } </style> <![endif]-->
<!--[if lt IE 7]> <link href=\"CSSHack.css\" rel=\"stylesheet\"> <![endif]-->
\t只在IE下生效\t<!--[if IE]>\t这段文字只在IE浏览器显示\t<![endif]-->\t\t只在IE6下生效\t<!--[if IE 6]>\t这段文字只在IE6浏览器显示\t<![endif]-->\t\t只在IE6以上版本生效\t<!--[if gte IE 6]>\t这段文字只在IE6以上(包括)版本IE浏览器显示\t<![endif]-->\t\t只在IE8上不生效\t<!--[if ! IE 8]>\t这段文字在非IE8浏览器显示\t<![endif]-->\t\t非IE浏览器生效\t<!--[if !IE]>\t这段文字只在非IE浏览器显示\t<![endif]-->
6.过渡(transition)
使得CSS的属性值在一段时间内平滑过渡
要素
指定过渡属性
语法：transition-property:none | all | property
可以设置过渡的属性
颜色属性
取值为数值的属性
渐变属性
visbility 属性
阴影属性
https://www.w3.org/TR/css3-transitions/#properties-from-css-
过渡所需的时间
transition-duration: s | ms
默认值是0，意味着不会有任何效果
必须设置transition-duration 属性，否则时长为0，就不会有任何效果
过渡函数(方式，速度)
transition-timing-function 规定过渡效果的速度曲线
预定义函数
ease
默认值，慢速开始，快速变快，慢速结束
linear
以相同速度开始到结束
ease-in
以慢速开始，加速效果
ease-out
快速开始，慢速结束，减速效果
ease-in-out
慢速开始，慢速结束，先加速再减速
过渡延迟时间
规定过渡效果何时开始
transition-delay: m | ms;
触发过渡
过渡由用户行为( 悬浮，点击 )触发
由元素的状态变化触发
由Javascript 触发
多个过渡效果
为transition设置多个属性值，值之间用逗号（，）隔开
8.CSS优化
减轻服务器压力
减少HTTP请求个数
CSS sprites
合并多个背景图像到一个单独图像，然后通过background-image去进行调整
将CSS 和 JS 放在外部文件中
页面引入外部文件，将由浏览器缓存
后续页会使用缓存
缩短服务器响应时间
代码优化
合并样式
提前定义统一的样式
利用CSS继承
缩小样式文件
尽量使用简写属性
选择更优的样式属性值
比如：border:none;
代码压缩
使用工具压缩CSS代码
不要在HTML中缩放图像
图像在网络传输时仍然保持原来图像的字节数
应该提前处理好图像
避免空的src 和 href
提高用户的体验度
页面顶部引入CSS
可以提高页面加载速度
样式表放在头部，允许页面逐步呈现
放在body中将因等待加载CSS文件，可能引起阻塞
0 条评论
回复 删除
下一页
