欢迎来到IT培训的黄埔军校——智游教育!
加入收藏
联系我们
0371-88888598 4006-371-555
Toggle navigation
首页
高端课程
Java
VR+游戏开发
Web大前端
大数据
信息安全
UI全栈设计
PHP
Python
iOS
专家师资
高薪就业
就业喜报
就业渠道
创业学员
学员专区
学员感言
学员作品
学员活动
研发中心
校企合作
入门知识库
在线精品课
技术干货
关于智游
智游简介
智游新闻
山西校区
智游论坛
首页
技术干货
HTML5知识库
HTML5知识库
java知识库
UI知识库
PHP知识库
HTML5知识库
大数据知识库
Python知识库
VR+虚幻引擎
iOS知识库
Android知识库
网络运营知识库
动画导演知识库
网络信息安全
热点新闻
梦想启航丨智游集团储备
一篇文章读懂智游教育就
智游双选会丨为了梦想,
智游教育2018年58个项目获
强强联合!智游集团与3
劳逸结合丨智游山西分公
学无止境丨智游集团、蓝
圯桥授书丨智游集团现代
热搜标签
智游
Java
大数据
HTML5
Python
专家师资
课程咨询
咨询电话:
4006-371-555
0371-88888598
微信公众号:zhiyou_group
小强的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 不显示
<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>
4006-371-555