CSS3 思维导图模板_ProcessOn思维导图、流程图

2.内容生成

通过CSS向元素的前面或后面增加一部分内容

选择器

:before

匹配到某一元素的最前面

:after

匹配到某一元素的最后面

内容生成属性

content

配合 before 或 after 元素，插入生成内容

取值

字符串（纯文本），插入到指定的位置处

url():生成的图像

计数器

示例

<!--

1、lw 的前面要添加老王:

2、xm 的前面要添加小明:

3、:与其他文本要有5px间隔

老王: 今天有.....

-->

今天下午有时间吗?

</div>

你要干什么?

</div>

今天下午来接我，行吗?

</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 使用同一值

两个值分别对应X,Y的数值

三个值表示 X, Y, Z轴的值，Z轴的值需要特殊处理（3D）

2D

位移

translate

沿坐标方向移动指定的距离

语法：translate(x轴移动距离，y轴的移动距离)

x:正为右，负为左

y:正为下，负为上

注意：位移不会影响其他元素，但有可能移动后盖住其他元素

translateX(距离), translateY(距离)

缩放

scale

将指定坐标轴上的坐标缩放指定的倍数

语法：scale(倍数)

倍数： 0-1 缩小 >1 放大

只带一个参数，则表示沿 X，Y 轴等比缩放

两个参数，分别表示X轴，Y轴缩放比例

scaleX(),scaleY()

旋转

rotate

围绕一个参照原点(transform-origin)，旋转指定角度，默认顺时针

语法：transform:rotate(Ndeg);

N为正数，顺时针旋转

N为负，逆时针旋转

注意：rotate 在旋转的过程中，不但能够旋转元素，同时能够旋转绘图的坐标系方向。如果配合其他的变形一起来做的话，rotate在前，会影响之后沿坐标轴的其他变形。

解决方案：如果配合变形一起来做，最好将rotate放在最后来执行

倾斜

skew

沿着坐标轴方向，倾斜指定角度

skew(ndeg)

沿X轴倾斜

skew(ndeg, ndeg)

沿着X轴和Y轴同时倾斜

skewX(ndeg) , skewY(ndeg)

注意：X轴角度为正，向左倾斜，角度为负，向右倾斜

Y轴角度为正，向下倾斜，角度为负，向上倾斜

http://www.bbs0101.com/archives/248.html

3D

prespective

设置在父元素上

兼容性

chrome,safari: -webkit-perspective

Firefox: -moz-perspective

位移

3D位移可以改变元素在Z轴上的位置

translateZ(z)

translate3d(x,y,z)

缩放

scaleZ(距离)

scale3d(x,y,z)

scaleX() scaleY

旋转

rotateX( n deg)

以X为轴进行旋转

rotateY( n deg)

以Y为轴进行旋转

rotateZ( n deg)

以Z为轴进行旋转

rotate3d( x,y,z deg)

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

规定动画的速度曲线

ease,linear,ease-in,ease-out,ease-in-out

animation-delay

播放之前的延迟时间

取值为数值，单位为秒或者毫秒

animation-iteration-count

播放次数

取值为数值或者为infinite

animation-direction

动画播放方向

normal 为默认值，表示正常播放

alternate 表示轮流播放，即动画会在奇数次数正常播放，偶数次数向后播放

animation-fill-mode 属性

规定动画在播放之前或之后，其动画效果是否可见

取值

none: 不改变默认行为

forwards: 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）

backwards:在动画显示之前，应用开始属性值（在第一个关键帧中定义）

both: 向前和向后填充模式都被应用

animation-play-state 属性

规定动画运行还是暂停

取值

paused:暂停

running:动画播放

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"单词 (必须为独立单词，以空格分隔)

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>

<div>

</div>

元素状态伪类

主要匹配元素的禁用，启用，选中状态 ( 主要用于表单元素 )

:enabled

:disabled

:checked

只用于单选按钮和复选按钮

结构伪类

从元素的结构（层级结构）上来进行划分的

什么时候使用结构伪类

找第一个子元素

:first-child

最后一个子元素

:last-child

没有子元素

:empty

注意：文本也算子元素，也就是文本也不能有

<p>这是一个段落</p> 非empty
<div></div>  empty

仅仅包含一个子元素

:only-child

<div>

</div>

<div>

<span></span> span:only-child

</div>

练习：

<body>

<div>

<p></p>

</div>

</body>

否定伪类

匹配非指定元素/选择器的每个元素

:not(selector)

selector不支持复杂选择器，兼容性不如jquery选择器

注意：最后一个元素为<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>

<title>Title</title>

<style>

body{

counter-reset:count;

}

div{

counter-increment:count 1;

}

div:before{

content:"第"counter(count)"章"

}

</style>

</head>

<body>

</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距离

设置父元素的padding-top,来代替子元素的margin-top

父元素相应撑大了

CSS Hack原理

CSS类内部Hack

属性前缀

选择器Hack

在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀

*前缀

IE6,IE7

*html

*+前缀

IE7

*+html

其他

@media screen\9{...}只对IE6/7生效

@media \0screen {body { background: red; }}只对IE8有效

@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效

@media screen\0 {body { background: green; }} 只对IE8/9/10有效

@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

等等

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]>

<![endif]-->

只在IE下生效

<!--[if IE]>

这段文字只在IE浏览器显示

<![endif]-->

只在IE6下生效

<!--[if IE 6]>

这段文字只在IE6浏览器显示

<![endif]-->

只在IE6以上版本生效

<!--[if gte IE 6]>

这段文字只在IE6以上(包括)版本IE浏览器显示

<![endif]-->

只在IE8上不生效

<!--[if ! IE 8]>

这段文字在非IE8浏览器显示

<![endif]-->

非IE浏览器生效

<!--[if !IE]>

这段文字只在非IE浏览器显示

<![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文件，可能引起阻塞