HTML5移动开发学习笔记之CSS3基础学习

CSS回顾

在学CSS3之前首先巩固下CSS的基础知识。

1.CSS框模型

举例子：

#box { width: 70px; margin: 10px; padding: 5px; }

这个代码将出现的效果是：

HTML5移动开发学习笔记之CSS3基础学习

2.CSS定位与浮动

1）定位：

属性	描述
position	把元素放到一个静态的(static：元素框正常生成)，相对的(relative：元素框偏移某个距离[相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置])，绝对的(absolute：元素框从文档流完全删除，并相对于其包含块定位)，或固定(fixed：元素框的表现类似于absolute,不过其包含块的视窗本身)的位置中
top,right,bottom,left	定义一个元素的上，右，下，左外边距边界与其包含块上，右，下，左边界之间的距离。注：如果position的属性值为"static"，则不会有任何效果。
overflow	设置当元素内容溢出其区域发生的事。overflow: scroll(显示滚动条)\|hidden（隐藏）\|auto（浏览器自动处理）
clip	设置元素的形状，元素被剪入这个形状之中 rect (top, right, bottom, left)
vertical-align	设置元素的垂直对齐方式。如：`vertical-align:text-top;把元素的顶端与父元素字体的顶端对齐`
z-index	设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面(1>0>-1) 注：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

看下对这些知识点的练习：

效果：

HTML5移动开发学习笔记之CSS3基础学习

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style type="text/css">
 7 h2.pos_left
 8 {
 9 position:relative;
10 left:-20px;
11 top:-20px;
12 }
13 h2.pos_right
14 {
15 position:relative;
16 left:20px;
17 top:20px;
18 }
19 h2.pos_absleft
20 {
21 position:absolute;
22 left:280px;
23 top:30px;
24 color:red
25 }
26 h2.pos_absright
27 {
28 position:absolute;
29 left:-10px;
30 top:90px;
31 color:red
32 }
33 h2.one
34 {
35 position:fixed;
36 left:15px;
37 top:235px;
38 }
39 h2.two
40 {
41 position:fixed;
42 top:30px;
43 right:15px;
44 }
45 #over 
46 {
47 background-color:#00FFFF;
48 width:150px;
49 height:150px;
50 overflow: auto
51 }
52 </style>
53 </head>
54 
55 <body>
56 <p>1.绝对定位和相对定位的区别：
57 </p>
58 <h2>这是正常位置</h2>
59 <h2 class="pos_left">相对定位1</h2>
60 <h2 class="pos_right">相对定位2</h2>
61 <h2 class="pos_absleft">绝对定位的移动1</h2>
62 <h2 class="pos_absright">绝对定位的移动2</h2>
63 </body>
64 <hr />
65 <p>2.固定定位：
66 </p>
67 <h2 class="one">固定定位测试1。</h2>
68 <h2 class="two">固定定位测试2。</h2>
69 <p>&nbsp;</p>
70 <hr />
71 <p>3.overflow的使用：overflow: scroll(显示滚动条)|hidden（隐藏）|auto（浏览器自动处理）
72 </p>
73 <div id="over">
74 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
75 </div>
76 </html>

View Code

2）浮动：

W3School上讲解的浮动较简单，不过也有些不太好理解。借鉴http://www.jb51.net/css/67471.html 这篇文章，对浮动有了点理解。

浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。
正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。

我们先来看下高度塌陷的现象：

HTML5移动开发学习笔记之CSS3基础学习

代码为：

<style type="text/css">
.news {
  background-color: gray;
  border: solid 1px black;
}

.news img {
  float: left;
}

.news p {
  float: right;
}

</style>
</head>
<body>
<p>①因为浮动表现出高度为0（高度塌陷）的现象：
</p>
<div class="news" width="50px">
<img src="XiaoKeAi.jpg" />
<p>这是文本</p>
<p>这是文本</p>
<p>这是文本</p>
</div>
</body>

然后看下清理浮动的方法：

①添加额外标签的效果：

HTML5移动开发学习笔记之CSS3基础学习

代码：

<style type="text/css">
.clear {
  clear: both;
}
</style>
</head>
<body>
<p>①添加额外标签消除高度塌陷的现象：
</p>
<div class="news" width="50px">
<img src="XiaoKeAi.jpg" />
<p>这是文本</p>
<p>这是文本</p>
<p>这是文本</p>
<div class="clear"></div>
</div>
</body>

②使用 br标签和其自身的 html属性 (这个方法有些小众，br 有 clear=“all | left | right | none” 属性) 【效果如上述方法一样，亲测通过】

代码：

<body>
<p>②使用br标签和其自身的 html属性消除高度塌陷的现象：
</p>
<div class="news" width="50px">
<img src="XiaoKeAi.jpg" />
<p>这是文本</p>
<p>这是文本</p>
<p>这是文本</p>
<br clear="all" /> 
</div>
</body>

③父元素设置 overflow：hidden

通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1(试了下，这里可以不需要的)；【效果如上述方法一样，亲测通过】

代码：

<body>
<p>③父元素设置 overflow：hidden 消除高度塌陷的现象：
</p>
<div class="news" width="50px" style="overflow:hidden;*zoom:1;" >
<img src="XiaoKeAi.jpg" />
<p>这是文本</p>
<p>这是文本</p>
<p>这是文本</p>
</div>
</body>

④父元素设置 overflow：auto 属性

将上述的style="overflow:hidden;" 这行代码改为style="overflow:auto;"

⑤父元素也设置浮动

效果有点不一样：

HTML5移动开发学习笔记之CSS3基础学习

代码只在这里变动了：

.news {
  background-color: gray;
  border: solid 1px black;
float: left;
  }

⑥父元素设置display:table
效果跟上述⑤是一样一样滴~~

代码只在这里变动了：

.news {
  background-color: gray;
  border: solid 1px black;
 display:table;
  }

⑦使用:after伪元素【注：after是伪元素，不是伪类】（听说这种方法是最好滴~~）

效果跟方法①是一样的~

增加了这个代码：

.news:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }

3.CSS选择器

元素选择器，选择器分组，类选择器，ID选择器，属性选择器，后代选择器，子元素选择器，相邻兄弟选择器这些知识点已经在W3School回顾温习了下，不记录了。主要学习下CSS 伪类，CSS伪元素。

1）CSS伪类

①锚伪类

a:link {color: #FF0000}/* 未访问的链接 */a:visited {color: #00FF00}/* 已访问的链接 */a:hover {color: #FF00FF}/* 鼠标移动到链接上 */a:active {color: #0000FF}/* 选定的链接 */

注：a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的；a:active 必须被置于 a:hover 之后，才是有效的。伪类名称对大小写不敏感。

②:focus伪类

向拥有键盘输入焦点的元素添加样式。

③:first-child伪类

:first-child 伪类来选择元素的第一个子元素，特定伪类很容易遭到误解，最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素（我就是这样错误的认为( ╯□╰ )）实际上却是选择器匹配作为任何元素的第一个子元素的 p 元素。

④:lang伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则。

综合练习下：效果如下

HTML5移动开发学习笔记之CSS3基础学习

代码：

 1 <html>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <head>
 4 <style type="text/css">
 5 a:link {color: #FF0000}
 6 a:visited {color: #00FF00}
 7 a:hover {color: #FF00FF}
 8 a:active {color: #0000FF}
 9 input:focus
10 {
11 background-color:yellow;
12 }
13 p > i:first-child {
14   font-weight:bold;
15   }
16   q:lang(no)
17    {
18    quotes: "~" "~"
19    }
20 </style>
21 </head>
22 
23 <body>
24 <p>1.锚伪类的应用：<br />
25 <b><a href="/index.html" target="_blank">这是一个链接。</a></b>
26 </p>
27 <p>2.focus伪类的应用：<br />
28 First name: <input type="text" name="fname" />
29 </p>
30 <p>3.first-child伪类的应用：<br />
31 <p>some <i>text</i>. some <i>text</i>.</p>
32 <p>some <i>text</i>. some <i>text</i>.</p>
33 </p>
34 <p>4. lang 伪类的应用：<br />
35 <p>文字<q lang="no">段落中的引用的文字</q>文字</p>
36 </p>
37 </body>
38 </html>

View Code

2）CSS伪元素

①:first-line 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。"first-line" 伪元素只能用于块级元素。

②:first-letter 伪元素

"first-letter" 伪元素用于向文本的首字母设置特殊样式。

③:before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容。

④:after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容。

综合练习下：效果如下

HTML5移动开发学习笔记之CSS3基础学习

代码：

 1 <html>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <head>
 4 <style type="text/css">
 5 p:first-line 
 6 {
 7 color: #ff0000;
 8 font-variant: small-caps
 9 }
10 h5:first-letter 
11 {
12 color: #ff0000;
13 font-size:xx-large
14 }
15 h3:before
16 {
17 content:"台词：";
18 }
19 h4:after
20 {
21 content:"- 台词";
22 }
23 </style>
24 </head>
25 
26 <body>
27 1.first-line 伪元素的应用：<br />
28 <p>
29 You can use the :first-line pseudo-element to add a special effect to the first line of a text!
30 </p>
31 2.first-letter 伪元素的应用：<br />
32 <h5>
33 You can use the :first-line pseudo-element to add a special effect to the first line of a text!
34 </h5>
35 3.:before 伪元素的应用：<br />
36 <h3>我是唐老鸭。</h3>
37 <h3>我住在 Duckburg。</h3>
38 
39 4.:after伪元素的应用：<br />
40 <h4>我是唐老鸭。</h4>
41 <h4>我住在 Duckburg。</h4>
42 </body>
43 </html>

View Code

小结下：伪类和伪元素有什么区别呢？做的时候就在想。。。又发现好文章一枚 http://m.blog.csdn.net/blog/zhuizhuziwo/7897837

【伪类：作用对象是整个元素；伪元素：作用于元素的一部分】

CSS3学习

CSS3完全向后兼容，因此不必改变现有的设计。CSS3被划分为模块，最重要的CSS3模块包括：

1）选择器；2）框模型； 3）背景和边框；4）文本效果；5）2D/3D转换；6）动画；7）多列布局；8）用户界面

下面学习其中的一些模块：

1.背景和边框

1）CSS3背景

CSS3包含多个新的背景属性，下面我们看下这三个属性

属性	描述
background-size	绘制背景图片的尺寸，可以以像素或百分比（相对于父元素的宽度和高度）规定尺寸
background-origin	规定背景图片的定位区域，可以放置于 content-box、padding-box 或 border-box 区域（这些区域的分布见附图1）
background-clip	规定背景的绘制区域，语法：background-clip: border-box\|padding-box\|content-box;

2）CSS3边框

通过 CSS3能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框。学习下实现这些效果的这三个属性

属性	描述
border-image	设置所有border-image-*属性的简写属性，看了W3school的介绍觉得有些还没弄懂，再认真看了http://www.jb51.net/css/27855.html和http://www.jb51.net/css/38358.html这两篇文章。
border-radius	设置所有四个 border-*-radius 属性的简写属性。
border-shadow	向方框添加一个或多个阴影，语法box-shadow: h-shadow v-shadow blur spread color inset；说明：h-shadow 水平阴影的位置，允许负值。v-shadow 垂直阴影的位置，允许负值。blur 模糊距离。spread 阴影的尺寸。color 阴影的颜色。inset 将外部阴影改为内部阴影。

附图1：

HTML5移动开发学习笔记之CSS3基础学习

看个综合的练习：

效果：

HTML5移动开发学习笔记之CSS3基础学习

代码：

  1 <!DOCTYPE html>
  2 <html>
  3 <meta charset="utf-8" />
  4 <head>
  5 <style type="text/css">
  6 #div1
  7 {
  8 background:url(XiaoKeAi.jpg);
  9 background-size:100px 180px;
 10 background-repeat:no-repeat;
 11 padding-top:180px;
 12 }
 13 #div3
 14 {
 15 border:1px solid black;
 16 width:200px;
 17 height:200px;
 18 padding:50px;
 19 background:url(XiaoKeAi.jpg);
 20 background-repeat:no-repeat;
 21 background-position:left;
 22 background-origin:border-box;
 23 }
 24 #div4
 25 {
 26 border:1px solid black;
 27 width:200px;
 28 height:200px;
 29 padding:50px;
 30 background:url(XiaoKeAi.jpg);
 31 background-repeat:no-repeat;
 32 background-position:left;
 33 background-origin:content-box;
 34 }
 35 #div5
 36 {
 37 width:200px;
 38 height:200px;
 39 padding:50px;
 40 background-color:yellow;
 41 background-clip:border-box;
 42 border:2px solid #92b901;
 43 }
 44 #div6
 45 {
 46 width:200px;
 47 height:200px;
 48 padding:50px;
 49 background-color:yellow;
 50 background-clip:content-box;
 51 border:2px solid #92b901;
 52 }
 53 #div7
 54 {
 55 width:250px;
 56 height:100px;
 57 background-color:#ff9900;
 58 -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
 59 box-shadow: 10px 10px 5px #888888;
 60 }
 61 #div8
 62 {
 63 text-align:center;
 64 border:2px solid #a1a1a1;
 65 padding:10px 40px; 
 66 background:#dddddd;
 67 width:250px;
 68 border-radius:25px;
 69 -moz-border-radius:25px; /* 老的 Firefox */
 70 }
 71 #div9
 72 {
 73 border:15px solid transparent;
 74 width:250px;
 75 padding:10px 20px;
 76 -moz-border-image:url(border.jpg) 30 30 round;    /* Old Firefox */
 77 -webkit-border-image:url(border.jpg) 30 30 round;    /* Safari and Chrome */
 78 -o-border-image:url(border.jpg) 30 30 round;        /* Opera */
 79 border-image:url(border.jpg) 30 30 round;
 80 }
 81 #div10
 82 {
 83 border:15px solid transparent;
 84 width:250px;
 85 padding:10px 20px;
 86 -moz-border-image:url(border.jpg) 30 30 stretch;    /* Old Firefox */
 87 -webkit-border-image:url(border.jpg) 30 30 stretch;    /* Safari and Chrome */
 88 -o-border-image:url(border.jpg) 30 30 stretch;        /* Opera */
 89 border-image:url(border.jpg) 30 30 stretch;
 90 }
 91 </style>
 92 </head>
 93 <body>
 94 <table>
 95 <tr width="500px">
 96 <th width="250px">
 97 <p>1，看下background-size的效果:</p>
 98 <div id=div1>拉伸的背景图片</div>
 99 </th>
100 <th width="250px">
101 <p>&nbsp;</p>
102 <div id=div2>原始图片：<img src="XiaoKeAi.jpg" width="200" height="200" alt="小可爱"></div>
103  </th>
104  </tr>
105  
106 <tr width="500px">
107 <th >
108 <p>2，看下background-origin的效果：</p>
109 <p>background-origin:border-box:</p>
110 <div id="div3">
111 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
112 </div>
113 </th>
114 
115 <th>
116 <p>&nbsp;</p>
117 <p>background-origin:content-box:</p>
118 <div id="div4">
119 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
120 </div>
121 </th>
122 
123 </tr>
124 
125 <tr width="500px">
126 <th>
127 <p>3，看background-clip的效果：</p>
128 <p>background-clip:border-box:</p>
129 <div id="div5">
130 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
131 </div>
132 </th>
133 <th>
134 <p>&nbsp;</p>
135 <p>background-clip:content-box:</p>
136 <div id="div6">
137 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
138 </div>
139 </th>
140 </tr>
141 <tr width="500px">
142 <th>
143 <p>4，看CSS3边框属性的圆角和阴影效果：</p>
144 <p>background-clip:border-box:</p>
145 <div id="div7">
146 </div>
147 </th>
148 <th>
149 <p>&nbsp;</p>
150 <p>background-clip:content-box:</p>
151 <div id="div8">
152 border-radius 属性允许您向元素添加圆角。
153 </div>
154 </th>
155 </tr>
156 <tr width="500px">
157 <th>
158 <p>5，看CSS3边框图片效果：</p>
159 <p>图片铺满整个边框:</p>
160 <div id="div9"> 在这里，图片铺满整个边框。
161 </div>
162 </th>
163 <th>
164 <p>&nbsp;</p>
165 <p>图片被拉伸以填充该区域:</p>
166 <div id="div10">
167 在这里，图片被拉伸以填充该区域。
168 </div>
169 </th>
170 </tr>
171 </body>
172 </html>

View Code

2.文本效果和字体应用

1）文本效果

新的文本属性挺多，这里介绍下text-shadow和text-wrap

属性	描述
text-shadow	向文本设置阴影，语法：text-shadow: h-shadow v-shadow blur color;
word-wrap	允许长单词换行到下一行，语法：word-wrap: normal\|break-word; normal 表示只在允许的断字点换行（浏览器保持默认处理）。break-word 在长单词或 URL 地址内部进行换行。

2）CSS3字体

在CSS3之前，Web设计师必须使用已在用户计算机上安装的字体。通过CSS3，Web设计师可以使用任意字体（将该字体存放到web服务器上，它会在需要时自动下载到用户的计算机上）

介绍下 @font-face 规则中定义的所有字体描述符：

①font-family 规定字体的名称； ② src 定义字体文件的 URL； ③font-stretch 定义如何拉伸字体 ④font-style 定义字体的样式； ⑤font-weight 定义字体的粗细；⑥unicode-range 定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

看下综合的练习：

HTML5移动开发学习笔记之CSS3基础学习

代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8" />
 4 <head>
 5 <style>
 6 h1
 7 {
 8 text-shadow: 5px 5px 5px #FF0000;
 9 }
10 p.test
11 {
12 width:11em; 
13 border:4px solid #000000;
14 }
15 p.test1
16 {
17 width:11em; 
18 border:4px solid #000000;
19 word-wrap:break-word;
20 }
21 @font-face
22 {
23 font-family: myFirstFont;
24 src: url('Sansation_Regular.ttf')
25     ,url('Sansation_Regular.eot'); /* IE9+ */
26 }
27 @font-face
28 {
29 font-family: myFirstFont;
30 src: url('Sansation_Regular.ttf'); /* IE9+ */    
31     font-weight:bold;  /* 为了使字体变粗，须为粗体文本添加另一个包含描述符的 @font-face：可是为毛我这里没管用，RP问题？ */
32 }
33 #div1
34 {
35 font-family:myFirstFont;
36 }
37 </style>
38 </head>
39 <body>
40 
41 <h1>文本阴影效果！</h1>
42 <p class="test">没有换行的效果 This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
43 <p class="test1">换行的效果 This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
44 <div id="div1">
45 字体的应用：
46 With <b>CSS3</b>, websites can finally use fonts other than the pre-selected "web-safe" fonts. This
47 </div>
48 <p><b>注释：</b>Internet Explorer 9+ 支持新的 @font-face 规则。Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。</p>
49 </body>
50 </html>

View Code

3.2D转换

在这一小节中，我们将学到2D转换的几种方法

函数	描述
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。扩展translateX(n)和translateY(n)，意思分别是沿着x,y轴移动元素
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。扩展scaleX(n)，scaleY(n)
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。扩展skewX(angle)，skewY(angle)
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。

看下综合练习的效果：

HTML5移动开发学习笔记之CSS3基础学习

代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8" />
 4 <head>
 5 <style> 
 6 div
 7 {
 8 width:100px;
 9 height:105px;
10 background-color:yellow;
11 border:1px solid black;
12 }
13 div#div1
14 {
15 transform:translate(100px,10px);
16 
17 }
18 div#div2
19 {
20 /* Rotate div */
21 transform:rotate(30deg);
22 float:left;
23 }
24 div#div3
25 {
26 margin:100px;/*注意这里的运用，这似乎可以看出基点所在*/
27 transform:scale(2,2);
28 float:left;
29 }
30 div#div4
31 {
32 transform:skew(10deg,20deg);
33 float:left;
34 }
35 div#div5
36 {
37 transform:matrix(0.866,0.5,-0.5,0.866,0,0);
38 float:left;
39 }
40 </style>
41 </head>
42 <body>
43 <div id="div1">Hello1，我是translate()方法，沿X轴移动100px,Y移动10px</div>
44 <div id="div2">Hello2，我是rotate()方法，旋转了30度</div>
45 <div id="div3">Hello3，我是scale()方法 把宽度和高度转换为原始尺寸的 2 倍。</div>
46 <div id="div4">Hello4，我是skew()方法 围绕 X 轴把元素翻转 10 度，围绕 Y 轴翻转 20 度。</div>
47 <div id="div5">Hello5，我是skew()方法，使用六个值的矩阵。</div>
48 </body>
49 </html>

View Code

4.3D转换

3D转换的方法包含了2D转换的哪些方法，不过加了Z轴。所以转换的效果是不同，3D立体嘛。。。

看下3D转换方法中使用这两个方法 rotateX()；rotateY()的效果：

HTML5移动开发学习笔记之CSS3基础学习

代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8" />
 4 <head>
 5 <style> 
 6 div
 7 {
 8 width:100px;
 9 height:105px;
10 background-color:yellow;
11 border:1px solid black;
12 }
13 div#div1
14 {
15 transform:rotateX(120deg);
16 float:left;
17 }
18 div#div2
19 {
20 transform:rotateY(130deg);
21 float:left;
22 }
23 </style>
24 </head>
25 <body>
26 <div id="div">Hello,我是标准。看下其他两种方法旋转的效果</div>
27 <div id="div1">Hello1，我是rotateX()方法，围绕X轴旋转120度</div>
28 <div id="div2">Hello2，我rotateY()方法，围绕Y轴旋转130度</div>
29 </body>
30 </html>

View Code

5.过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。这种效果像动画挺好玩的~~【原来就是CSS3中的动画( ╯□╰ )】

举例：

请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。

关键代码：

div
{
width:100px;transition: width 2s;
}

div:hover
{
width:300px;
}

可以看出这个transition属性起的作用，学习下它。

语法：transition: property duration timing-function delay;

属性	描述
transition-property	规定应用过渡的 CSS 属性的名称
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。语法：transition-timing-function: linear\|ease\|ease-in\|ease-out\|ease-in-out\|cubic- bezier(n,n,n,n); 说明下ease的描述，ease：规定慢速开始，然后变快，然后慢速结束的过渡效果（等于cubic-bezier(0.25,0.1,0.25,1)）。
transition-delay	规定过渡效果何时开始。默认是 0。

6.动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。

CSS3 动画

举例：

关键代码：

@keyframes myfirst 
 {  
  0% {background:red; left:0px; top:0px;}  
  25% {background:yellow; left:50px; top:0px;} 
  50% {background:blue; left:50px; top:50px;}  
  75% {background:green; left:0px; top:50px;}  
  100% {background:red; left:0px; top:0px;}
 }
div {
 width:50px;
 height:50px;
 background:red;
 position:relative;
 animation:myfirst 5s linear 2s infinite alternate;
 }

可以看出，首先用@keyframes 规则创建动画，

上述的myfirst 规则中百分比是来规定动画在某个时间段做的事情，0% 是动画的开始，100% 是动画的完成（也可以用关键词"from" 和 "to"，等同于 0% 和 100%。）再来看animation属性

语法：animation: name duration timing-function delay iteration-count direction;

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。默认值：ease（跟上述的过渡是一样的）
animation-delay	规定在动画开始之前的延迟。值以秒或毫秒计。
animation-iteration-count	定义动画的播放次数 infinite 表示无限次
animation-direction	规定是否应该轮流反向播放动画 alternate表示轮流反向播放

7.多列能够创建多个列来对文本进行布局 - 就像报纸那样！主要是这三个属性的应用 ①column-count 规定元素应该被分隔的列数。 ②column-gap 规定列之间的间隔。 ③设置所有 column-rule-* 属性的简写属性。语法column-rule: column-rule-width column-rule-style column-rule-color; 8.用户界面在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等. ①resize 规定是否可由用户调整元素尺寸。语法：resize: none|both|horizontal|vertical; 对应意思为：用户无法调整元素尺寸|可调高度和宽度|可调宽度|可调高度 ②box-sizing 确切的方式定义适应某个区域的具体内容语法：box-sizing: content-box|border-box|inherit; ③outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。语法：outline-offset: length(轮廓与边框边缘的距离)|inherit(从父元素继承 outline-offset 属性的值);

秒客网

HTML5移动开发学习笔记之CSS3基础学习

相关文章