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

2.内容生成

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

选择器

:before

匹配到某一元素的最前面

:after

匹配到某一元素的最后面

内容生成属性

content

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

取值

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

url():生成的图像

计数器

示例

<div>  </div><div>  <div class="lw"></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>今天下午有时间吗?</div><div>  </div></div><div>  <div class="xm"></div><div>    你要干什么?</div><div>  </div></div><div>  <div class="lw"></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>今天下午来接我，行吗?</div><div>  </div></div><div><br></div>

4.多列

分隔列

column-count

规定元素被分隔的列数

<div>div{</div><div>            width:450px;</div><div>            border:1px solid #e4393c;</div><div>            column-count: 6;</div><div>            -webkit-column-count: 6;</div><div>}</div>

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)

<div> x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；</div><div> y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；</div><div> z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；</div><div> a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。</div>

参考：http://blog.csdn.net/tina_ttl/article/details/51279530

7.动画(animation)

通过关键帧控制动画的每一步，使元素从一种样式逐渐变化为另一种样式，实现复杂的动画效果

关键帧

@keyframes 的作用

用于声明动画

帧：用于分解动画动作

@keyframes 的语法

<div>@keyframes name</div><div>        {</div><div>            from | 0%</div><div>            {</div><div>                CSS 样式;</div><div>            }</div><div>            percent</div><div>            {</div><div>                CSS 样式;</div><div>            }</div><div>            to | 100%</div><div>            {</div><div>                CSS 样式;</div><div>            }</div><div>        }</div>

动画属性

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.复杂选择器

兄弟选择器

相邻兄弟选择器

选择紧接在元素之后的另一个元素，而且两者有相同的父元素

使用 + 作为结合符

示例

<pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:'宋体';font-size:16.5pt;"><span style="color:#e8bf6a;"><style><br></span><span style="color:#e8bf6a;"> </span><span style="color:#cc7832;">p </span>+ <span style="color:#cc7832;">b</span>{<br> <span style="color:#bababa;">font-size</span>:<span style="color:#6897bb;">30</span><span style="color:#a5c261;">px</span><span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"> </span><span style="color:#bababa;">color</span>:<span style="color:#a5c261;">green</span><span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"> </span>}<br><span style="color:#e8bf6a;"></style></span></pre>

<pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:'宋体';font-size:16.5pt;"><span style="color:#e8bf6a;"><p></span>This is a <span style="color:#e8bf6a;"><b></span>interesting<span style="color:#e8bf6a;"></b> </span>book!<span style="color:#e8bf6a;"></p><br></span><span style="color:#e8bf6a;"><b></span>Relly?<span style="color:#e8bf6a;"></b><b></span>More?<span style="color:#e8bf6a;"></b></span></pre>

通用兄弟选择器

匹配某元素后面的所有兄弟元素

使用 ~ 作为结合符

示例

<pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:'宋体';font-size:16.5pt;"><span style="color:#cc7832;">p</span>{<br> <span style="color:#bababa;">border</span>:<span style="color:#6897bb;">1</span><span style="color:#a5c261;">px solid black</span><span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"> </span><span style="color:#bababa;">padding</span>:<span style="color:#6897bb;">5</span><span style="color:#a5c261;">px</span><span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"> </span><span style="color:#bababa;">width</span>:<span style="color:#6897bb;">200</span><span style="color:#a5c261;">px</span><span style="color:#cc7832;">;<br></span>}<br><span style="color:#cc7832;">div</span>.<span style="color:#e8bf6a;">d1 </span>+ <span style="color:#cc7832;">p</span>{<br> <span style="color:#bababa;">color</span>:<span style="color:#a5c261;">red</span><span style="color:#cc7832;">;<br></span>}<br><span style="color:#cc7832;">div</span>.<span style="color:#e8bf6a;">d1 </span>~ <span style="color:#cc7832;">p</span>{<br> <span style="color:#bababa;">background-color</span>:<span style="color:#6897bb;">#ccc</span><span style="color:#cc7832;">;<br></span>}</pre>

<pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:'宋体';font-size:16.5pt;"><span style="color:#e8bf6a;"><p></span>段落1<span style="color:#e8bf6a;"></p><br></span><span style="color:#e8bf6a;"><div </span><span style="color:#bababa;">class=</span><span style="color:#a5c261;">"d1"</span><span style="color:#e8bf6a;">></span>指定<span style="color:#e8bf6a;"><p></span>元素<span style="color:#e8bf6a;"></p></div><br></span><span style="color:#e8bf6a;"><p></span>段落2<span style="color:#e8bf6a;"></p><br></span><span style="color:#e8bf6a;"><p></span>段落3<span style="color:#e8bf6a;"></p></span></pre>

属性选择器

将元素附带的属性用于选择器，从而对带有所指定属性的元素设置样式

示例

[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

示例

<pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:'宋体';font-size:16.5pt;"><span style="color:#cc7832;">div</span>:<span style="color:#e8bf6a;">target</span>{<br> <span style="color:#bababa;">color</span>:<span style="color:#a5c261;">red</span><span style="color:#cc7832;">;<br></span>}<br>:<span style="color:#e8bf6a;">target</span>{<br> <span style="color:#bababa;">font-size</span>:<span style="color:#6897bb;">30</span><span style="color:#a5c261;">px</span><span style="color:#cc7832;">;<br></span>}</pre>

<pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:'宋体';font-size:16.5pt;"><span style="color:#e8bf6a;"><a </span><span style="color:#bababa;">href=</span><span style="color:#a5c261;">"#d1"</span><span style="color:#e8bf6a;">></span>测试1<span style="color:#e8bf6a;"></a><br><br></span><span style="color:#e8bf6a;"><a </span><span style="color:#bababa;">href=</span><span style="color:#a5c261;">"#p1"</span><span style="color:#e8bf6a;">></span>测试2<span style="color:#e8bf6a;"></a><br><br></span><span style="color:#e8bf6a;"><a </span><span style="color:#bababa;">href=</span><span style="color:#a5c261;">"#a1"</span><span style="color:#e8bf6a;">></span>测试3<span style="color:#e8bf6a;"></a><br><br></span><span style="color:#e8bf6a;"><div </span><span style="color:#bababa;">class=</span><span style="color:#a5c261;">"split"</span><span style="color:#e8bf6a;">></div><br></span><span style="color:#e8bf6a;"><div </span><span style="color:#bababa;">id=</span><span style="color:#a5c261;">"d1"</span><span style="color:#e8bf6a;">></span>div锚<span style="color:#e8bf6a;"></div><br></span><span style="color:#e8bf6a;"><p </span><span style="color:#bababa;">id=</span><span style="color:#a5c261;">"p1"</span><span style="color:#e8bf6a;">></span>p锚<span style="color:#e8bf6a;"></p><br></span><span style="color:#e8bf6a;"><a </span><span style="color:#bababa;">name=</span><span style="color:#a5c261;">"a1"</span><span style="color:#e8bf6a;">></span>a锚<span style="color:#e8bf6a;"></a><br></span></pre>

案例

点击链接按钮，显示相应图片

<div>        img{    </div><div>            display:none;</div><div>        }</div><div>        img:target{</div><div>            display:block;</div><div>        }</div><div>    </style></div><div></head></div><div><body></div><div><a href="#img1">img1</a></div><div><a href="#img2">img2</a></div><div><a href="#img3">img3</a></div><div><a href="#img4">img4</a></div><div><div></div><div>    <img id="img1" src="data/1.jpg"></div><div>    <img id="img2" src="data/2.gif"></div><div>    <img id="img3" src="data/3.png"></div><div>    <img id="img4" src="data/4.jpg"></div><div></div></div>

元素状态伪类

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

:enabled

:disabled

:checked

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

结构伪类

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

什么时候使用结构伪类

找第一个子元素

:first-child

最后一个子元素

:last-child

没有子元素

:empty

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

<pre style="color: rgb(0, 0, 0); font-family: 宋体; font-size: 19.5pt;"><<span style="color:#000080;font-weight:bold;">p</span>>这是一个段落</<span style="color:#000080;font-weight:bold;">p</span>> 非empty<br><<span style="color:#000080;font-weight:bold;">div</span>></<span style="color:#000080;font-weight:bold;">div</span>> empty</pre>

仅仅包含一个子元素

:only-child

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

练习：

否定伪类

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

:not(selector)

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

注意：最后一个元素为<br>

伪元素选择器

主要针对元素中的文本内容进行匹配的。

:first-letter

选取指定选择器的首字母

一般用于排版，首字符突出等操作

:first-line

指定选择器的首行

是页面中渲染的首行，不是代码中的首行

::selection

匹配用户选取的部分

3.计数器

作用：向已经存在的HTML内容增加序号

如何使用计数器

属性

counter-reset

定义一个计数器，并设置初始值为0

使用

<div>body{</div><div>            counter-reset:计数器名称初始值计数器名称初始值;</div><div>}</div>

注意：一般放在body中，放在其他标签中，则会初始化很多同名计数器

counter-increament

设置计数器的增量值，默认值是1

注意：哪个元素使用，则在哪个元素中声明

<div>div{</div><div>            counter-increment:count 10;</div><div>        }</div>

函数

counter( 计数器名称 )

示例

<div><head></div><div>    <meta charset="UTF-8"></div><div>    <title>Title</title></div><div>    <style></div><div>        body{</div><div>            counter-reset:count;</div><div>        }</div><div>       div{</div><div>           counter-increment:count 1;</div><div>       }</div><div>        div:before{</div><div>            content:"第"counter(count)"章"</div><div>        }</div><div>    </style></div><div></head></div><div><body></div><div><div>啊啊啊</div></div><div><div>啊啊啊</div></div><div><div>啊啊啊</div></div><div></body></div>

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

其他

<div>@media screen\9{...}只对IE6/7生效</div><div>@media \0screen {body { background: red; }}只对IE8有效</div><div>@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效</div><div>@media screen\0 {body { background: green; }} 只对IE8/9/10有效</div><div>@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效</div><div>@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效</div><div>等等</div>

HTML头部引用Hack

IE条件注释

gt:greater than

选择条件版本以上版本，不包含条件版本

lt:less than

选择条件版本以下版本，不包含条件版本

gte:greater than or equal

选择条件版本以上版本，包含条件版本

lte: less than or equal

选择条件版本以下版本，包含条件版本

!: 选择条件版本以外所有版本，无论高低

示例

<div>    </div>

<div><span class="Apple-tab-span" style="white-space:pre"> </span>只在IE下生效</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>只在IE6下生效</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>只在IE6以上版本生效</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>只在IE8上不生效</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>非IE浏览器生效</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div>

6.过渡(transition)

使得CSS的属性值在一段时间内平滑过渡

要素

指定过渡属性

语法：transition-property:none | all | property

可以设置过渡的属性

颜色属性

取值为数值的属性

转换属性

渐变属性

visbility 属性

阴影属性