在上一篇中我们提到学习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的内容,更多相关内容请关注PHP中文网(www.php.cn)!