小强的HTML5移动开发之路(4)——CSS2和CSS3
来自:http://blog.csdn.net/dawanganban/article/details/17653149
在上一篇中我们提到学习HTML5要具备CSS的知识,在页面设计的时候HTML5知识页面的布局与结构,要实现一个很绚丽漂亮的界面就需要借助CSS。下面我们先来回顾一下css2的基本用法,再来看看和css3的关系与区别。
1、css是什么?
cascading stylesheet(级联样式表),为网页提供表现形式。按照w3c规范,设计一个网页,应该将网页的数据与结构写在html文件里,网页的外观写在css文件里,而网页的行为写在.js文件里。这样做的目的是将网页的数据,外观,行为分离,方便代码的维护。
2、css选择器:
(1)标记选择器(简单选择器)
(2)class选择器
- .s1{
- 属性名:属性
- }
还有一种有名字的class选择器,如下:
- div.s1{
- font-size;120px;
- }
(3)id选择器
- #d1{
- font-size:italic;
- font-weight:900;
- }
(4)选择器分组
- h1,h2,h3{ //用逗号隔开
- <span style="white-space:pre"> </span>color:bllue;
- }
(5)选择器的派生
- #d2 p{
- span style="white-space:pre"> </span>color:red;
- font-size:300;
- }
CSS中的注释
- /* */
样式的优先级:
外部样式,将样式写在.css文件里
内部样式,将样式写在.html文件里
内联样式,将样式写在style=" "里面
发生冲突时:外部样式<内部样式<内联样式。
CSS中的两个关键属性:
(1)display属性
有三个值:
block 按块标记的方式显示该标记
inline 按行内标记的方式显示该标记
none 不显示
- <html>
- <!--display属性-->
- <head>
- <style>
- #d1{
- width:200px;
- height:100px;
- background-color:red;
- color:white;
- font-size:40px;
- display:inline; <!--改为行内标记-->
- }
- #d2{
- width:200px;
- height:100px;
- background-color:blue;
- color:white;
- font-size:40px;
- display:inline; <!--改为行内标记-->
- }
- </style>
- </head>
- <body>
- <div id="d1">hello1</div>
- <!--标记d2会另起一行显示-->
- <div id="d2">hello2</div>
- </body>
- </html>
(2)position属性
有三个值:
static:缺省值。浏览器会将标记按默认的方式摆放(左-右,上-下)。
absolute:相对父标记(所在的标记)偏移。
relative:先按照默认的方式摆放,然后再偏移。
常用属性如下:
- (1)文本相关的属性
- font-size:30px; //字体大小
- font-style:normal(正常)/italic(斜体)
- font-weight:800; //100-900 (粗细)
- font-family:"宋体"; //字体
- text-align:left/center/right; //文本水平对齐方式
- line-height:30px; //行高 一般和容器的高值相同放在中间
- cursor:pointer/wait; //光标的形状
- (2)背景相关的属性
- background-color:red; //背景颜色
- background-color:#88eeff; //RGB格式颜色设置
- background-color:rgb(100,100,100); //可以用这种格式输入十进制数的颜色值
- background-image:url(images/t1.jpg); //背景图片
- background-repeat:no-repeat/repeat-x/repeat-y; //平铺方式
- background-position:30px 20px; //(水平和垂直)背景位置
- background-attachment:scroll(默认)/fixed; //依附方式
- 也可以同时设置背景的多个特性:
- background:背景颜色 背景图片 平铺方式 依附方式 水平位置 垂直位置;
- (3)边框
- border-left:1px solid red;
- border-right:2px dotted black;
- border-bottom:
- border-top:
- border:1px solid red;
- (4)定位
- width:100px;
- height:200px;
- margin //外边距
- margin-left:20px;
- margin-right:30px;
- margin-top:40px;
- margin-buttom:50px;
- 可以简化为:margin:top right bottom left;
- margin:40 30 50 20;
- padding //内边距
- padding-left:
- padding-right:
- padding-top:
- padding-buttom:
- 可以简化为:padding:top right bottom left;
- 内边距会将父标记撑开
- (5)浮动
- 取消标记独占一行的特性
- float:left/right; //向左,向右浮动
- clear:both; //清除浮动的影响
- (6)其他
- list-style-type:none;除掉列表选项的小圆点。
- text-decoreation:underline; //给文本加下划线
- (7)连接的伪样式
- a:link{color:red} 没有访问时
- a:visited{color:blue} 鼠标放上时
- a:action{color:green} 鼠标点击时
- a:hover{color:yellow} 鼠标离开时
上面是我们以前学的css的基本总结,下面来看一下css3的特点,先打开css3参考手册(下载地址:http://download.csdn.net/detail/lxq_xsyu/6784027)
先看看border-color设置边框
相关属性:border-top-color,border-right-color,border-bottom-color,border-left-color
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta http-equiv="Content-Language" content="utf-8" />
- <meta name="robots" content="all" />
- <meta name="author" content="Tencent-ISRD" />
- <meta name="Copyright" content="Tencent" />
- <title>Border-color</title>
- <style>
- div{
- border: 8px solid #000;
- -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
- -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
- -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
- -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
- padding: 5px 5px 5px 15px;
- }
- </style>
- </head>
- <body>
- <div>在Firefox浏览器里能看到边框颜色渐变效果</div>
- </body>
- </html>
这个设置边框只在火狐浏览器上支持,运行效果
可以从css3.0参考书册中看到css3增加了很多样式属性,我们可以参考该手册进行比css2更加绚丽的界面效果,如果配合js还可以实现页面动画制作。
下面我们再来看看给界面元素创建圆角效果
在css2中为了实现这种效果,我们需要制作两张图片。代码如下:
- <html>
- <head>
- <style type="text/css">
- a{
- display:block;
- height:40px;
- float:left;
- font-size:1.2em;
- padding-right:0.8em;
- background:url(images/headerRight.png) no-repeat scroll top right;
- }
- a span{
- background:url(images/headerLeft.png) no-repeat;
- display:block;
- line-height:40px;
- padding-left:0.8em;
- }
- </style>
- </head>
- <body>
- <a href="#"><span>Box Title</span></a>
- </body>
- </html>
上面的方法虽然解决了问题,但是增加了一个多余的标签,下面我们来看看用css3如何解决:
- <html>
- <head>
- <style type="text/css">
- a{
- float:left;
- height:40px;
- line-height:40px;
- padding-left:0.8em;
- padding-right:0.8em;
- border-top-left-radius:8px;
- border-top-right-radius:8px;
- background-image:url(image/headerTiny.png);
- backgrount-repeat:repeat-x;
- }
- </style>
- </head>
- <body>
- <a href="#"><span>Box Title</span></a>
- </body>
- </html>
小强的HTML5移动开发之路(4)——CSS2和CSS3的更多相关文章
- 小强的HTML5移动开发之路(18)——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- 小强的HTML5移动开发之路(14)——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- 小强的HTML5移动开发之路(13)——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- 小强的HTML5移动开发之路(11)——链接,图片,表格,框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
- 小强的HTML5移动开发之路(42)——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- 小强的HTML5移动开发之路(37)——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
- 小强的HTML5移动开发之路(12)——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
- 小强的HTML5移动开发之路(3)——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
- 小强的HTML5移动开发之路(1)——HTML介绍
来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...
- 小强的HTML5移动开发之路(53)——jQueryMobile页面间参数传递
在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...
随机推荐
- 记录一些移动端H5,小程序视觉还原问题及方法
前端,特别是移动端如果对视觉还原要求比较高的时候.功能测试和性能测试完成之后.UI真的是一个像素一个像素的给你抠出来哪里还原不到位 之前项目要求还原度要达到98%以上.所以每到视觉还原的时候真的是挺痛 ...
- Node.js DNS 模块
Node.js DNS 模块用于解析域名.引入 DNS 模块语法格式如下: var dns = require("dns") 方法 序号 方法 & 描述 1 dns.loo ...
- Java第10次实验(数据库)
参考资料 数据结构实验参考文件 MySql操作视频与数据库相关jar文件请参考QQ群文件. 第1次实验 1. MySQL数据库基本操作 完整演示一遍登录.打开数据库.建表.插入 常见错误:语句后未跟; ...
- 利用QrCode.Net生成二维码 asp.net mvc c#
利用QrCode.Net生成二维码 asp.net mvc c# 里面介绍了.net的方式及js的方式,还不错. 里面用到的qrcode.net的类库下载地址:https://qrcodenet.co ...
- Spring之MVC模块
Spring MVC的Controller用于处理用户的请求.Controller相当于Struts 1里的Action,他们的实现机制.运行原理都类似 Controller是个接口,一般直接继承Ab ...
- Spark技术内幕:Storage 模块整体架构
Storage模块负责了Spark计算过程中所有的存储,包括基于Disk的和基于Memory的.用户在实际编程中,面对的是RDD,可以将RDD的数据通过调用org.apache.spark.rdd.R ...
- 乐观的并发策略——基于CAS的自旋
悲观者与乐观者的做事方式完全不一样,悲观者的人生观是一件事情我必须要百分之百完全控制才会去做,否则就认为这件事情一定会出问题:而乐观者的人生观则相反,凡事不管最终结果如何,他都会先尝试去做,大不了最后 ...
- iOS开发之自己封装的提示框(警告框)样式BHAlertView
最近需要使用到提示框(警告框)进行信息的展示和提醒,所以进行了一个类的封装,想用Swift调用此OC文件,但是发现有些困难,所以暂时先把OC代码进行展示,随后再好好研究一下在Swift中的使用. 对于 ...
- 【Netty源码分析】客户端connect服务端过程
上一篇博客[Netty源码分析]Netty服务端bind端口过程 我们介绍了服务端绑定端口的过程,这一篇博客我们介绍一下客户端连接服务端的过程. ChannelFuture future = boos ...
- API创建员工支付方式
DECLARE ln_method_id PAY_PERSONAL_PAYMENT_METHODS_F.PERSONAL_PAYMENT_METHOD_ID%TYPE; ln_ext_acc_id P ...