在XHTML中CSS的意义
传统的HTML能够并已经创建了大量优秀美观使用的网页，但随着时代的发展和客户要求的逐步提高，传统HTML网页将网页的数据，表现和行为混杂的方式妨碍了自身可维护性和精确性的提高。
在XHTML中，CSS能把网页的数据和表现（主要是格式和样式规则）分隔开来，使人对网页能有更精确细致的控制，同时可维护性也变得更好，更方便。
在本文中，我们将学习CSS的相关知识。
框模型
在CSS处理网页时，它认为网页包含的每一个元素都包含在一个不可见的框中，这个框由内容（Content），内容外的内边距（padding），内边距的外边框（border）和外边框的不可见空间-外边距（margin）组成。
块级元素和行内元素
在XHTML中，元素可能是块级（block）的，也可能是行级（inline）的。
块级元素会产生一个新行（段落），而行级元素是行内的，不会产生新行（段落）。
常见的块级元素有div，p等，常见的行级元素有a，span等。
在默认情况下，元素按照在XHTML中从上到下的次序显示，并且在每个块级元素的框的开头和结尾换行。
注意：块级元素和行级元素不是绝对的，我们可以通过样式设置来改变元素的这个属性。
元素的基本属性
内边距：padding
边框：border
外边距：margin
大小：width，height
对齐：text-align
颜色：color
背景：background
使元素浮动：float
下面将讲述如何对这些元素属性进行设置。
改变元素背景
Background有以下子属性：
background-color：背景颜色，默认值transparent，输入#rrggbb即可。
background-image：背景图像，默认值none
background-repeat：背景图像的重复显示，默认值repeat（纵横重复），repeat-x（水平重复），repeat-y（垂直重复），no-repeat（使图像不并排显示）
background-attachment：默认值scroll，表示随页面滚动，如果是fixed则不随页面滚动。
background-posistion：默认值top left。
这些属性也可以统一设置，如：background:#ccc url(theadbg.gif) repeat-x left center;
例：
TABLE.Listing TH {
FONT-WEIGHT: bold;
background:#ccc url(theadbg.gif) repeat-x left center;
BORDER-BOTTOM: #6b86b3 1px solid
}
设定元素的大小
设置width和height即可，如：
width:180px;
height:50%;
注意这里可以设置绝对大小如180px也可以设置相对大小50%，其中百分数是相对与父元素的比例，父元素即容纳本元素的元素。
此外设置元素大小还可以使用min-width，max-width，max-height，min-height等，但在部分浏览器中不支持这些属性。
例：
#content{
width:640px;
height:500px;
float:right;
background:#f8f8f8;
}
Px和em的区别
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册) 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
设置元素的外边距
外边距是一个元素与下一个元素之间的透明空间量，位于元素的边框外边。
设置外边距设置margin的值即可，如margin:1;它将应用与四个边。
如果要为元素的上右下左四个边设置不同的外边距，可以设置margin-top，margin-right，margin-bottom，margin-left四个属性。
例：
fieldset{
margin:1em 0;
padding:1em;
border:1px solid #ccc;
background:#f8f8f8;
}
添加元素的内边距
内边距是边框到内容的中间空间。使用它我们可以把内容和边界拉开一些距离。
设置内边距如右：padding:1px;
如果要为元素的上右下左四个边设置不同的内边距，可以设置padding-top，padding-right，padding-bottom，padding-left四个属性。
例：
li{
padding-left:10px;
}
控制元素浮动
float属性可以使元素浮动在文本或其它元素中，这种技术的最大用途是创建多栏布局（layout）
float可以取两个值：left，浮动到左边，right：浮动到右边
例：
#sidebar{
width:180px;
height:500px;
float:left;
background:#f8f8f8;
padding-top:20px;
padding-bottom:20px;
}
#content{
width:640px;
height:500px;
float:right;
background:#f8f8f8;
}
设置边框
边框位于外边距和内边距中间，在应用中常用来标示特定的区域。它的子属性有：
border-style：可以设定边框的样式，常见的有solid，dotted，dashed等。
border-width：边框的宽度。
border-color：边框颜色
border-top，border-right，border-bottom，border-left可以把边框限制在一条或几条边上。
例：
ul a{
display:block;
padding:2px;
text-align:center;
text-decoration:none;
width:130px;
margin:2px;
color:#8d4f10;
}
ul a:link{
background:#efb57c;
border:2px outset #efb57c;
}
控制元素内容的对齐
text-align属性可以让我们设置元素内容的对齐，它可以取的值有left，center，right等。
例：
body{
margin:0 auto;
text-align:center;
min-width:760px;
background:#e6e6e6;
}
#bodyDiv{
width:822px;
margin:0 auto;
text-align:left;
background:#f8f8f8;
border:1px solid #FFFFFf;
}
控制元素在父元素的垂直对齐
设置vertical-align可以控制元素在父元素的垂直对齐位置，它可以取的值有：
middle：垂直居中
text-top：在父元素中顶对齐
text-bottom：是元素的底线和父元素的底线对齐。
在网页中引入样式表
<title>"記賬系统"单项收支记录浏览页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="web/js/ajax.js" type="text/javascript"></script>
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
type="text/css" />
</head>
样式表示例
body{
margin:0 auto;
text-align:center;
min-width:760px;
background:#e6e6e6;
}
#bodyDiv{
width:822px;
margin:0 auto;
text-align:left;
background:#f8f8f8;
border:1px solid #FFFFFf;
}
TABLE.Listing {
MARGIN: 0px 0px 8px;
WIDTH: 92%;
BORDER-BOTTOM: #6b86b3 3px solid
}
#content{
width:640px;
height:500px;
float:right;
background:#f8f8f8;
}
#content h1,#content h2,#content p{
padding-left:20px;
}
#footer{
clear:both;
}
fieldset{
margin:1em 0;
padding:1em;
border:1px solid #ccc;
background:#f8f8f8;
}
如何知道页面元素对应样式表的那部分？
如果页面元素设置了id，则它对应的样式表部分是#id，如#bodyDiv。
如果页面元素设定了class，则它在样式表中寻找”元素类型.class”对应的部分，如TABLE.Listing。
如果没有写明，则元素会找和自己类型对应的样式设置，如fieldset。
注意CSS中没有大小写的区别。
例：
<div id="content">
<table id="TbSort" class="Listing" width=100% align=center>
<fieldset><legend>添加账目</legend>
JavaScript的运行环境和代码位置
编写JavaScript脚本不需要任何特殊的软件，一个文本编辑器和一个Web浏览器就足够了,JavaScript代码就是运行在Web浏览器中。
用JavaScript编写的代码必须嵌在一份html文档才能得到执行，这可以通过两种方法得到，第一种是将JavaScript代码直接写在html文件中，这多用于仅适用于一个页面的JS程序；另一种是把JavaScript代码存入一个独立的文件中（.js作为扩展名）,在利用<Script>标签的src属性指向该文件.
将JavaScript直接嵌入页面文件中
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>欢迎进入"我的事务备忘录"</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="web/js/strUtil.js" type="text/javascript"></script>
</head>
<body>
<div>这个页面应该很快消失,如果它停止说明Web容器已经停止运作了，或JavaScript功能未开启
<form method=post action="ShowPage?page=login">
</form>
<div>
</body>
</html>
<script LANGUAGE="JavaScript">
<!--
document.body.onload=function(){
document.forms[0].submit();
}
//-->
</script>
将JavaScript存入单独的文件中(页面文件)
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>"我的事务备忘录"用户登录页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="web/js/ajax.js" type="text/javascript"></script>
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
type="text/css" />
</head>
<body>
<div id="branding">欢迎进入"个人事务备忘录",请输入您的用户名和密码,再按登录键登录
<form method=post action="ShowPage?page=loginCheck">
<table bgcolor="#ffffff" id="TbSort" class="Listing" width="200" align=center>
<tbody id="loginTable">
<tr><th align="center" colspan=3>用户登录.</th></tr>
<tr>
<td width=50>用户名:</td>
<td width=150><input type="text" name="userName" value=""
style="width: 300px; height: 20px" /></td>
</tr>
<tr>
<td width=50>密码:</td>
<td width=150><input type="text" name="userPswd" value=""
style="width: 300px; height: 20px" /></td>
</tr>
<tr>
<td width=50></td>
<td width=150><input type="submit" value="登录"
style="width: 100px; height: 20px" /></td>
</tr>
</tbody>
</table>
</form>
<div>
</body>
</html>
将JavaScript存入单独的文件中(ajax.js)
var prjName="/MyTodoes/";
var ajaxObj;
function createAjaxObject(){
try{return new ActiveXObject("Msxml2.XMLHTTP");}catch(e){};
try{return new ActiveXObject("Microsoft.XMLHTTP");}catch(e){};
try{return new XMLHttpRequest();}catch(e){};
alert("XmlHttpRequest not supported!");
return null;
}
function $(id){
return document.getElementById(id);
}
JavaScript中的语句和注释
JavaScript中的语句和Java中一样,也是一行书写一条语句,末尾加上分号’;’,虽然js中也可以把多条语句写在一行,但推荐不要这样做.
JavaScript中注释也和Java中一样,以// 来注释单行,/*….*/来注释多行,虽然HTML风格的注释<!-- ***** --> 在JS中也有效,但建议不要这样做.
JavaScript中的变量
在js中,变量允许字母,数字,美元符号和下划线字符.变量定义使用var关键字,如
var age;
age=23;
var name=“andy”;
虽然js允许程序员可以直接对变量进行赋值而无需提前对它们做出声明,但我们强烈建议不要这样做.
Js中变量和其它语法元素都是区分字母大小写的,如变量age,Age,AGE没有任何关系,它们都不是同一个变量.
JavaScript是一种弱类型语言
和强制要求程序员对数据类型做出声明的强类型(Strongly typed)程序设计语言如java,C#等不一样,js不要求程序员进行类型说明,这就是所谓的弱类型”weakly typed”语言.这意味着程序员可以随意改变某个变量的数据类型.
以下写法在Java中是绝对不允许的,但在js中完全没有问题:
var age=23;
age=“Twenty three”
Js并不关心age的值是字符串还是变量.
JavaScript中的数据类型-字符串
字符串必须放在单引号或双引号中.如
var name=“Andy”;
var name=‘Bill’;
一般情况下宜使用双引号,但如果字符串中有双引号则应该把字符串放在单引号中,反之则应该把字符串放在双引号中.
JavaScript中的数据类型-数值
Js中并没有int,float,double,long的区别,它允许程序员使用任意位数的小数和整数,实际上js中的数值应该被称为浮点数.
如:
var salary=10000;
var price=10.1;
var temperature=-6;
JavaScript中的数据类型-布尔值
Js中的布尔值和Java中的一致,true表示真,false表示假,如:
var isMale=true;
var isFemale=false;
注意布尔值true和false不要写成了字符串”true”和’false’.
JS中的函数
如果需要多次使用同一组语句，可以把这些语句打包成一个函数。所谓函数就是一组允许人们在代码中随时调用的语句。从效果上看，每个函数都相当于一个短小的脚本。
和Java中每个函数都在类中不一样，JS中函数不必属于一个类，在使用上它类似于Java中的静态公有函数，只要引入这个函数所在的文件就可以使用它。
JS中函数的语法
JS中，一个函数的大致语法如下：
function fname(args){
statements;
}
Function是函数的固定标志；fname是函数名；args是函数参数，它可以有很多个，只要你把它们用逗号分割开来即可；statements是其中的语句，每句结尾都和java中一样用“；”表示结束。
在定义了这个函数的脚本（页面）中，你可以从任意位置去调用这个函数；引入这个页面后，你还可以从其它页面访问它。
一般来说，对于共通性强，适用面广，会在多个页面中调用的函数，我们一般把它们放在一个JS页面中，然后由需要使用这些函数的页面引入它们；而对于只适用于一个页面的函数，还是把它放在单个页面中较好。
JS函数的返回值
在JS中，函数不仅能够以参数的形式接受数据，运行代码，它和其它编程语言中的函数一样，可以返回数据。
让JS函数返回数据，你不需要也不能在函数签名上动任何手脚，只需要用return语句返回你想返回的数字即可，举例如下：
function substract(op1,op2){
return op1-op2; }
}
JS中变量的作用域
在JS中，我们提倡用var来定义一个变量，凡是变量就会有作用域的问题，根据定义方式和位置的不同，它既可能是全局的，也有可能是局部的。
用var定义在脚本文件中，不属于任何一个函数的变量，它的作用域就是全局性的，它可以在脚本中的任何位置被引用，包括有关函数的内部。全局变量的作用域是整个脚本。
用var定义在函数中的变量，它的作用域就是局部性的，它的作用域仅限于这个函数，在函数的外部是无法使用它的。
不用var定义在函数中的变量，它的作用域是全局的，如果你的脚本里已经存在一个与之同名的变量，这个函数将覆盖那个现有变量的值。
定义函数时，我们必须明确的把它内部的变量都明确的声明为局部变量，如果从来没有忘记在函数中使用var关键字，就可以避免任何形式的二义性隐患。
JS中的数组
在JS中，我们使用Array关键字声明数组，在声明时对数组长度进行限定，如：
var arr=Array(3)；
有时运行起来才知道数组长度，JS中我们也可以这样定义数组：
var arr=Array();
向数组中添加元素时你需要给出新元素的值，还需要在数组中为新元素制定存放位置，这个位置由下标给出，如arr[1]=4。
在JS中定义数组的例子
定义方式一：
var arr=Array(3)；
arr[0]=“刘备”； arr[1]=“关于”； arr[2]=“张飞”；
定义方式二：
var arr=Array();
arr[0]=3; arr[1]=4;arr[2]=5;
定义方式三：
Var arr=Array(“1”,2，true);
定义方式四：
var arr=[“征东”,”平西”,”镇南”,”扫北”];