HTML5入门

小强的HTML5移动开发之路(4)——CSS2和CSS3

字号+ 作者:水寒 来源:csdn 2015-06-02 14:48 我要评论( )

在上一篇中我们提到学习HTML5要具备CSS的知识,在页面设计的时候HTML5知识页面的布局与结构,要实现一个很绚丽漂亮的界面就需要借助CSS。下面我们先来回顾一下css2的基本用法,再来看看和css3的关系与区别。1、css是什么?cascading stylesheet(级联样式表),

在上一篇中我们提到学习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>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5学得好不好,看掌握多少标签

    html5学得好不好,看掌握多少标签

    2015-09-28 12:53

  • 小强的HTML5移动开发之路(53)——jQueryMobile页面间参数传递

    小强的HTML5移动开发之路(53)——jQueryMobile页面间参数传递

    2015-06-02 14:32

  • 小强的HTML5移动开发之路(52)——jquerymobile中的触控交互

    小强的HTML5移动开发之路(52)——jquerymobile中的触控交互

    2015-06-02 14:34

  • 小强的HTML5移动开发之路(51)——jquerymobile中改善页面访问

    小强的HTML5移动开发之路(51)——jquerymobile中改善页面访问

    2015-06-02 14:34

网友点评