HTML5 移动开发(CSS3设计移动页面样式)
2014-08-01 15:26
309 查看
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);
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);
相关文章推荐
- 3、用CSS3设计移动页面样式
- HTML5 移动Web界面样式 CSS3 - 5
- HTML5 移动Web界面样式 CSS3 - 5
- Css3 Media Queries移动页面的样式和图片的适配问题(转)
- 55-002-1 HTML5图片列表页面的制作 鼠标移动图片动态显示,文字动态阴影效果,渐变效果 列表前增加样式序列号
- 基于 HTML5 的校园网站移动平台 web 页面设计
- 第九十三节,html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计
- 使用HTML5和CSS3来设计slider
- HTML5和CSS3登录页面制作实录
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
- 自适应移动设备页面的设计
- 分享最新收集的HTML5和CSS3的网站设计模板
- HTML5基本用法二(图片,css3样式等等)
- 20个 css3 html5 设计工具
- HTML5实践 -- 如何使用css3丰富我们的图片样式
- HTML5实践 -- 如何使用css3丰富我们的图片样式 - part2
- css3选项卡标题样式设计2
- HTML5 CSS3实现圆角样式,兼容所有浏览器(一)
- 移动Web界面样式-CSS3