来自：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. Spring Security安全框架入门篇

    一.Spring Security相关概念 1.1..Spring Security介绍: Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安 ...

  2. Android 实现串口的移植

    安卓串口的实现,需要底层C++配合,不过这次我们根据framework中的思想,直接用API修改提供给JAVA层调用,这个就比较简单了. DEV项目需要,要实现在Android中实现串口的收发功能,有 ...

  3. 快速排序quick_sort（python的两种实现方式）

    排序算法有很多,目前最好的是quick_sort:unstable,spatial complexity is nlogN. 快速排序原理 python实现 严蔚敏的 datastruct书中有伪代码 ...

  4. cassandra 并发技术介绍

    摘要 本文主要介绍cassandra线程技术,cassandra的实现是基于java的,所以线程技术使用的也是jdk包提供的线程类.cassandra是分布式数据库,整个并发架构是基于阶段事件驱动架构 ...

  5. Apache shiro集群实现 （七）分布式集群系统下---cache共享

    Apache shiro集群实现 (一) shiro入门介绍 Apache shiro集群实现 (二) shiro 的INI配置 Apache shiro集群实现 (三)shiro身份认证(Shiro ...

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

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

  7. The packages can be overrided by Java Endorsed Standards

     Endorsed Standards APIs The Endorsed Standards for Java SE constitute all classes and interfaces ...

  8. 生活沉思录 via 哲理小故事

    本文转载:http://www.cnblogs.com/willick/p/3174803.html 1.小托蒂的悲剧 意大利小男孩托蒂,有一只十分奇怪的眼睛,因为从生理上看,这是一只完全正常的眼睛, ...

  9. 【移动开发】EditText输入字数限制总结（包括中文输入内存溢出的解决方法）

    限定EditText输入个数的解决方案很多,但是一般主要考虑两点,也就是处理两件事:(1)不同语言字符(英文.中文等)处理方式(2)输入字符达到数目后,是否仍然允许用户输入 第一点,涉及的东东其实蛮多 ...

  10. 皮尔森相似度计算举例(R语言)

    整理了一下最近对协同过滤推荐算法中的皮尔森相似度计算,顺带学习了下R语言的简单使用,也复习了概率统计知识. 一.概率论和统计学概念复习 1)期望值(Expected Value) 因为这里每个数都是等 ...