欢迎来到it培训的黄埔军校——智游教育!

小强的html5移动开发之路(4)——css2和css3-永利国际

于2017-04-10 14:50:54 发表在html5知识库
在上一篇中我们提到学习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{   //用逗号隔开 color:bllue;
}
(5)选择器的派生
 #d2 p{ color:red;
font-size:300;
    }
css中的注释
/*   */
样式的优先级:
外部样式,将样式写在.css文件里
内部样式,将样式写在.html文件里
内联样式,将样式写在style=" "里面
发生冲突时:外部样式<内部样式<内联样式。
css中的两个关键属性:
(1)display属性
有三个值:
block  按块标记的方式显示该标记
inline  按行内标记的方式显示该标记
none 不显示






hello1


hello2




  (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:;  //背景图片
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参考手册(下载地址:)
先看看border-color设置边框
相关属性:border-top-color,border-right-color,border-bottom-color,border-left-color








border-color



在firefox浏览器里能看到边框颜色渐变效果




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

可以从css3.0参考书册中看到css3增加了很多样式属性,我们可以参考该手册进行比css2更加绚丽的界面效果,如果配合js还可以实现页面动画制作。
下面我们再来看看给界面元素创建圆角效果
在css2中为了实现这种效果,我们需要制作两张图片。代码如下:








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