HTML5 移动开发（CSS3设计移动页面样式）

1.如何创建CSS样式表

2.CSS3的卓越特性

3.基于设备属性改变样式的媒体查询

4.如何使用属性改变元标签创建更美观移动页面

 

层叠样式表是移动WEB开发中的一个重要组成部分，本次分享将学到如何编写CSS并用它为移动页面定制样式，其中包括媒体查询为特定设备定制样式表。此外还将了解一些影响移动设备内容显示的元标签

 

创建好的样式，可通过三种方法附加到样式表里

1.内联到标签中   【建议在测试的时候这么做】

2.内嵌于HTML的开头

3.放在一个独立文档中作为样式表  【推荐的做法】*能够提高网站加载速度，加载样式表后，将其保存在浏览器缓存中，打开同一个网站中的其它页面时不需要重新加载。

 

 

使用font属性的语法为：

font: font-style font-variant font-weight font-size/line-height font-family;

 

为了确保WEB页面外观与设想一致，可以使用顺序的字体列表，也称为字体堆栈

 

在为Web页面布局之前，需要了解Web页面的行程。文档中的每一个元素的默认形状都是方形，即使这个形状不显示出来也是如此。最简单的方法就是使用border属性为元素加上一个边框，语法如下：

border: 1px solid red;

 

下图为盒子模型： 

中心为内容区域（width）

补白（padding）

边框（border）

边距（margin）

 

 

CSS3带来了以下卓越的新特性：

多列布局和网格布局

圆角

边框图形

文本及盒阴影

非浏览器设备山固定滚动溢出

字体及排版修改

动画

三维变换

 

浏览器并不直接支持CSS3样式属性。大部分Web浏览器的做法是在使用新属性时，需要在属性前加上相应的关键字，以表明它是浏览器专用属性。如下：

-moz   Firefox 和 Mozlla

-ms     Internet Explorer

-wap   WAP 和 Opera

-o        Opera

-webkit    Chrom 和 Safari

在添加了相关浏览器专用扩展名后，才可以使用许多CSS3新属性。

 

下面就列举几个为例：

 

圆角: css3中的圆角是通过一个名为border-radius的属性来实现的。几乎每一个开发者都在期待CSS圆角，以为人们已经厌倦CSS2 的方块表现了。

border-bottom-left-radius

border-bottom-right-radius

border-top-left-radius

border-top-right-radius

当然为了兼容还要考虑FF与Webkit的扩展名

 

盒阴影及文字阴影

可以使用CSS3属性text-shadow 和 box-shadow为文字与盒添加阴影

text-shadow:horizontal-offset vertical-offset blur-radius color;

text-shadow:horizontal-offset vertical-offset blur-radius color;

Offset指阴影从原元素出发的偏移量。Blur radius 为模糊两； color为阴影颜色。

 

透明色：

之前我们CSS2.0用的都是 RGB 现在CSS3.0推出了RGBA就是多了一个通道，可以设置透明度了

第四位加入一个在0到1之间的数字，0为完全透明，而1为完全不透明。rgba(0, 0, 0, 0.4);