来自：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选择器

  1. .s1{
  2. 属性名：属性
  3. }

还有一种有名字的class选择器，如下：

  1. div.s1{
  2. font-size;120px;
  3. }

（3）id选择器

  1. #d1{
  2. font-size:italic;
  3. font-weight:900;
  4. }

（4）选择器分组

  1. h1,h2,h3{   //用逗号隔开
  2. <span style="white-space:pre">  </span>color:bllue;
  3. }

（5）选择器的派生

  1. #d2 p{
  2. span style="white-space:pre">   </span>color:red;
  3. font-size:300;
  4. }

CSS中的注释

  1. /*   */

样式的优先级：

外部样式，将样式写在.css文件里
内部样式，将样式写在.html文件里
内联样式，将样式写在style=" "里面
发生冲突时：外部样式<内部样式<内联样式。

CSS中的两个关键属性：

（1）display属性

有三个值：
block  按块标记的方式显示该标记
inline  按行内标记的方式显示该标记

none 不显示

  1. <html>
  2. <!--display属性-->
  3. <head>
  4. <style>
  5. #d1{
  6. width:200px;
  7. height:100px;
  8. background-color:red;
  9. color:white;
  10. font-size:40px;
  11. display:inline; <!--改为行内标记-->
  12. }
  13. #d2{
  14. width:200px;
  15. height:100px;
  16. background-color:blue;
  17. color:white;
  18. font-size:40px;
  19. display:inline; <!--改为行内标记-->
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div id="d1">hello1</div>
  25. <!--标记d2会另起一行显示-->
  26. <div id="d2">hello2</div>
  27. </body>
  28. </html>

（2）position属性
有三个值：
 static:缺省值。浏览器会将标记按默认的方式摆放(左－右，上－下)。
 absolute:相对父标记(所在的标记)偏移。
 relative:先按照默认的方式摆放，然后再偏移。

常用属性如下：

  1. (1)文本相关的属性
  2. font-size:30px; //字体大小
  3. font-style:normal(正常)/italic(斜体)
  4. font-weight:800; //100－900 (粗细)
  5. font-family:"宋体"; //字体
  6. text-align:left/center/right;  //文本水平对齐方式
  7. line-height:30px;  //行高  一般和容器的高值相同放在中间
  8. cursor:pointer/wait;   //光标的形状
  9. (2)背景相关的属性
  10. background-color:red;  //背景颜色
  11. background-color:#88eeff;  //RGB格式颜色设置
  12. background-color:rgb(100,100,100);  //可以用这种格式输入十进制数的颜色值
  13. background-image:url(images/t1.jpg);  //背景图片
  14. background-repeat:no-repeat/repeat-x/repeat-y;   //平铺方式
  15. background-position:30px 20px; //(水平和垂直)背景位置
  16. background-attachment:scroll(默认)/fixed;  //依附方式
  17. 也可以同时设置背景的多个特性：
  18. background:背景颜色 背景图片 平铺方式 依附方式  水平位置 垂直位置；
  19. (3)边框
  20. border-left:1px solid red;
  21. border-right:2px dotted black;
  22. border-bottom:
  23. border-top:
  24. border:1px solid red;
  25. (4)定位
  26. width:100px;
  27. height:200px;
  28. margin  //外边距
  29. margin-left:20px;
  30. margin-right:30px;
  31. margin-top:40px;
  32. margin-buttom:50px;
  33. 可以简化为：margin:top right bottom left;
  34. margin:40 30 50 20;
  35. padding  //内边距
  36. padding-left:
  37. padding-right:
  38. padding-top:
  39. padding-buttom:
  40. 可以简化为：padding:top right bottom left;
  41. 内边距会将父标记撑开
  42. (5)浮动
  43. 取消标记独占一行的特性
  44. float:left/right;  //向左，向右浮动
  45. clear:both;  //清除浮动的影响
  46. (6)其他
  47. list-style-type:none;除掉列表选项的小圆点。
  48. text-decoreation:underline;    //给文本加下划线
  49. (7)连接的伪样式
  50. a:link{color:red} 没有访问时
  51. a:visited{color:blue} 鼠标放上时
  52. a:action{color:green} 鼠标点击时
  53. 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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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. <meta http-equiv="Content-Language" content="utf-8" />
  6. <meta name="robots" content="all" />
  7. <meta name="author" content="Tencent-ISRD" />
  8. <meta name="Copyright" content="Tencent" />
  9. <title>Border-color</title>
  10. <style>
  11. div{
  12. border: 8px solid #000;
  13. -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
  14. -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
  15. -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
  16. -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
  17. padding: 5px 5px 5px 15px;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div>在Firefox浏览器里能看到边框颜色渐变效果</div>
  23. </body>
  24. </html>

这个设置边框只在火狐浏览器上支持，运行效果

可以从css3.0参考书册中看到css3增加了很多样式属性，我们可以参考该手册进行比css2更加绚丽的界面效果，如果配合js还可以实现页面动画制作。

下面我们再来看看给界面元素创建圆角效果

在css2中为了实现这种效果，我们需要制作两张图片。代码如下：

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. a{
  5. display:block;
  6. height:40px;
  7. float:left;
  8. font-size:1.2em;
  9. padding-right:0.8em;
  10. background:url(images/headerRight.png) no-repeat scroll top right;
  11. }
  12. a span{
  13. background:url(images/headerLeft.png) no-repeat;
  14. display:block;
  15. line-height:40px;
  16. padding-left:0.8em;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <a href="#"><span>Box Title</span></a>
  22. </body>
  23. </html>

上面的方法虽然解决了问题，但是增加了一个多余的标签，下面我们来看看用css3如何解决：

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. a{
  5. float:left;
  6. height:40px;
  7. line-height:40px;
  8. padding-left:0.8em;
  9. padding-right:0.8em;
  10. border-top-left-radius:8px;
  11. border-top-right-radius:8px;
  12. background-image:url(image/headerTiny.png);
  13. backgrount-repeat:repeat-x;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <a href="#"><span>Box Title</span></a>
  19. </body>
  20. </html>

小强的HTML5移动开发之路（4）——CSS2和CSS3的更多相关文章

  1. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  2. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  3. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  4. 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...

  5. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  6. 小强的HTML5移动开发之路（37）——jqMobi快速入门

    在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...

  7. 小强的HTML5移动开发之路（12）——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

  8. 小强的HTML5移动开发之路（3）——HTML5与HTML4比较

    来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...

  9. 小强的HTML5移动开发之路（1）——HTML介绍

    来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...

  10. 小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

    在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...

随机推荐

  1. 利用Python进行数据分析——Numpy基础：数组和矢量计算

    利用Python进行数据分析--Numpy基础:数组和矢量计算 ndarry,一个具有矢量运算和复杂广播能力快速节省空间的多维数组 对整组数据进行快速运算的标准数学函数,无需for-loop 用于读写 ...

  2. C++笔记十二：C++对C的扩展——struct关键字类型增强

    C语言的struct定义了一组变量的集合,C编译器并不认为这是一种新的类型. C++中的struct是一个新类型的定义声明. struct Student { char name[100]; int  ...

  3. 一起撸个简单粗暴的Tv应用主界面的网格布局控件（上）

    这一篇是真的隔了好久了~~,也终于可以喘口气来好好写博客了,这段时间实在是忙不过来了,迭代太紧.好,废话不多说,进入今天的主题. 效果 图一是Tv应用:当贝市场的主页 图二是咱自己撸的简单粗暴的 Tv ...

  4. Rails多路径调用相同方法原路返回的方法

    有时候可能有多条path到达同一个method,此时,我们希望在该方法完成后自动转到之前进入的path中去,其实实现起来非常简单,只需要实现如下两个方法: def redirect_back_or(d ...

  5. 初识Spark2.0之Spark SQL

    内存计算平台spark在今年6月份的时候正式发布了spark2.0,相比上一版本的spark1.6版本,在内存优化,数据组织,流计算等方面都做出了较大的改变,同时更加注重基于DataFrame数据组织 ...

  6. iOS 应用提交到iTunes Connect，显示"正在处理"后消失不见

    打包上传iTunes Connect 成功后,进入iTunes Connect 会看到如下的构建信息: 可是,过一会再刷新该页面,构建的版本就消失了. 出现如上所述的情况,主要目前已知的有两种原因: ...

  7. Android线性布局

    线性布局 LinearLayout 是一个视图组,用于使所有子视图在单个方向(垂直或水平)保持对齐. 您可以使用 android:orientation 属性指定布局方向. LinearLayout ...

  8. iOS学习笔记--触摸事件

    最近空闲时间在学习iOS相关知识,几周没有更新文章了,今天总结下这些天的学习内容,也整理下iOS的学习笔记,以便以后查阅翻看- iOS中的事件可以分为3大类型: 触摸事件 加速计事件 远程控制事件 响 ...

  9. Apache shiro集群实现 （一） shiro入门介绍

    近期在ITOO项目中研究使用Apache shiro集群中要解决的两个问题,一个是Session的共享问题,一个是授权信息的cache共享问题,官网上给的例子是Ehcache的实现,在配置说明上不算很 ...

  10. Servlet - Listener、Filter、Decorator

    Servlet 标签 : Java与Web Listener-监听器 Listener为在Java Web中进行事件驱动编程提供了一整套事件类和监听器接口.Listener监听的事件源分为Servle ...