首先,从基础的开始。
1. DIV布局和TABLE布局的区别
传统TABLE布局方式实际上是利用了HTML table表格元素具有的无边框特性,由于table元素可以在显示时使得单元格的边框和间距为0,即不显示边框,因此可以将网页中的各个元素按版式划分放入表格的各个单元格中,从而实现复杂的排版组合。
表格布局的代码最常见的是在HTML标签之间嵌入一些设计代码,如width=100%,border=0等。表格布局的 混乱代码就是这样编写的,大量样式年设计代码混杂在表格,单元格中,使得可读性大大降低,维护起来成本也相当高,尽管有类似于Dreamweaver(以下简单称dw)这样可视化的界面进行编写,只要你需要什么,他帮你写入什么样式,最终结果是表格中到处留下设计的足迹,混合式代码也由此而成。
DIV可以理解成一个块,是有个比表格简单的元素,从语法上只有<div></div>这样简单的定义。DIV最大的好处就是样式是由CSS来控制。
但总体上而言:
1. div+css布局比table布局节省页面代码,代码结构也更清晰明了.
2. div+css的页面对搜索引擎支持好,而且速度更快了,能够比table 更加快速的显示网站内容.
3. div+css布局使网站版面布局修改变的更简单,因为版面代码都写在独立的css文件里修改起来方便多了,不象table要在页面中修改很多信息.
页面中:
<div class="style2"></div> //表示调class名为style2的样式 也可以这样写 <div id="style2"></div> 不过CSS表示就有所不同了 |
CSS中
.style2{ width: 800px; //宽度 height: 100%; //高度 margin: 0px auto; //页面边距离,如 margin-top:10px 表示上边距为10像素,这里是为自动 margin-bottom:20px; //下边距 border:1px solid #9BDF70; //边框 background-color: #F0FBEB //背景色 } (在样式指定为div id=的时候必须这样写) #style2{…… |
不够,第一种写法明显可以提高代码重用率。
2. 符合WEB标准的网站
符合WEB标准的网站首先一点是网页能够通过W 3C 的代码校验,地址http://www.w3.org/QA/Tools/
目前提供了HTML/XHTML/CSS/RDF/P3PXML等多种标记语言的校验工具.
但仅仅为符合标准通过W 3C 校验而设计的网页是没有价值的。个人认为通过这个标准最大的意义在于不同浏览器的兼容性。
3. XHTML
其实XHTML就是HTML的下一个版本,用于替代HTML并帮助转向XML的一套过渡型标记语言.在强调表现分离的WEB标准时代,HTML的语法模式已经不能满足需求. XHTML是一门面向结构的语言,设计目的不象HTML仅仅是为了网页设计与表现,XHTML主要用于对网页内容进行结构设计,其严严谨的语法结构有利于浏览器进行解析处理。
目前XHTML的使用标准也存在多种选者,包含Transitional,Strict和Frameset三种。
1. Transitional代表一种松散过渡型的XHTML应用,允许用户使用一部分旧式的HTML标签来编写XHTML文挡。
2. Strict是一种严格型的应用方式,在这种形式下XHTML中不能使用任何样式表现的标签及属性。如在元素中直接使用bgcolor.
3. Frameset方式是针对框架页的应用方式。
一般情况下还是使用Transitional。
3.1 XHTML(如无特殊说明,开发环境都为dw)
在DW中新建一个HTML页
在代码中可以看到
<!DOCTYPE html PUBLIC "-//W 3C //DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
这段代码的意思是告诉浏览器该网页代码是什么类型的,如这段代码中后面的参数,指定为XHTML1.0 Transitional类型.
这里提到的XHTML 是XHTML1.0规范,与HTML4.01几乎完全相同。
大概看了下,其语法基本和HTML基本没什么区别,所以这里就不多说了,如果有区别的会下文中提到。
3.2 XHTML编写习惯
虽然说不区分大小写,但要符合标准的话,还是得按照以下建议的做。
1. 属性名称必须小写
在标签中编写树型,必须使用小写,正确的写法是:
<div class=”style”>
2. 属性值必须使用双引号
不允许使用<div id=content>这样的形式
3. 不允许属性简写
在HTML中,特别是表单中,常使用简写属性,如
<input checked> <option selected>
而XHTML对此要求更严格,允许使用简写属性,必须使用完整的写法,正确写法:
<input checked=”checked”/> <option selected=”selected”/>
4. 使用ID代替name
5. 必须使用结束标签,例如
<div></div> <p></p>
如果使用IMG或BR这样的单体标签,那么必须使用正斜钱作为结束,如
<img src=”” /> <br/>
4. CSS语法结构
4.1 CSS属性与选择符
选择符是CSS控制XHTML文挡中对象的一种方式,简单的函索,它用于告诉浏览器这段样式应用到哪个对象。
CSS的语法结构仅仅由三部分组成:选择符(selector)、属性(propetry)和值(value).
Selector { Property:value; }
l 选择符:指这组样式编码所要针对的对象,可以是一个XHTML标签,如body,h1;也可以是定义了特定id 或calss的标签,
如#dd表示 <div id=”dd”> .dd表示<div class=”dd”>
l 属性: 是CSS样式控制的核心,对于每有个XHTML中的标签,CSS都提供了丰富的样式属性,如颜色,大小,定位,浮动方式等。
l 值: 是指属性的值,形式有两种,一种是指定范围的值,如float属性,只可能是left,right,none三种值,另一种数值,如width能够使用0-9999px, 0%-100%或其他数学单位来指定。
如body { backgroud-color:blue;}
表示选择符为body,即选择了页面中的<body>标签,属性为backgroud-color(背景颜色),value为CSS编码中的蓝色.
多个属性的表示就如
P{ color: # 3f 3f 3f 3; font-family:arial; } |
4.2 类型选择符
所谓类型选择符是指网页中已有的标签类型做为名称的选择符,body是网页中的一个标签类型,div也是,span也是.将控制页面中所有的body或div或span。
4.3 群组选择符
除了对于单个XHTML对象进行样式指定,同样可以对一组对象进行相同的样式指派,如:
h1,h2,h3,p,span{ font-size:12px; font-family: arial; } |
4.4 包含选择符
h1 span{ font-weight:bold; } |
当我们仅仅想对某一个对象中的子对象进行样式指定时,包含选择符就被派上了用场。包含选择符指选择符组合中前一个对象包含后一个对象,对象之间使用空格做为分隔符。
<h1>这是一段文本><span>这是span内的文本></span></h1> <h1>单独文本</h1> <span>单独的span</span> <h2>被h2标签套用的文本<span>这是h2下的span</span></h2> |
如上代码,只有第一段代码会调用上面的样式。
4.5 id与class选择符
上面已多次提到,简单的说就是CSS中 #style 与.style 页面中 id=”style”与class=”style”的区别了。
4.6 组合选择符
对于上述所有CSS选择符而言,无论是什么样的选择符,均可以进行组合使用。
h1 .p1{} 表示HT标签下所有的class为p1的标签。
#content h1{} 表示ID为conten的标签下的所有有h1标签.
h1 .p1,#content h1 {} 表示以上二者进行群组选择
h1 #content h2{} 表示id为content的h1标签下的h2标签.
4.7 伪类及伪对象
是一种特殊的类和对象,由CSS自动支持,属CSS的一种扩展类和对象,名称不能被用户自定义,使用时只能按标准格式进行应用。
a:hover{ backgroud-coloir: # 3f 3f 3f ; }
本例中的hover便是一个伪类,用于指定标签a的鼠标移上状态,CSS内置了几个标准的伪类用于用户的样式定义。
伪类 | 用途 |
:link | a连接标签的未被访问前的样式 |
:hover | 对象在鼠标移上时的样式 |
:active | 对象被用户点击及被点击释放之间的样式 |
:visited | a连对象被访问后的样式 |
:focus | 对象成为输入焦点的样式 |
:first-child | 对象的第一个子对象的样式 |
:first | 对于页面的第一页使用的样式 |
同样CSS内置了几个标准伪对象用于用户的样式定义。
伪对象 | 用途 |
:after | 设置某一个对象之后的内容 |
:first-letter | 对象内的第一个字符样式设置 |
:first=line | 对象内第一行的样式设置 |
:before | 设置某一个对象之前的内容 |
实际上, 除了:hover,:active几个伪类之外,大多数伪类及伪对象在实际使用上并不常见到。
4.8 通配选择符
*{ color:blue;}
*表示所有对象,如上所示,页面中所有对象都会使用color的字体颜色
4.9 CSS数值单位
单位 | 描述 | 示例 |
px | 像素(Pixel) | width:12px; |
em | 相对于当前对象内文本的字体尺寸 | font-size: 1.2em; |
Ex | 相对于字符的高度的相对尺寸 | font-size:1.2ex; 当前字符的1.2倍高度 |
pt | 点/磅(point) | font-size: 9pt |
pc | 派卡(pica) | font-size: 0.5pc |
in | 英寸(Omcj) | font-size: 12in ; |
mm | 毫米(Millmeter) | font-size: 4mm ; |
cm | 厘米(Centimeter) | font-size: 0.2cm ; |
rgb | 颜色单位 | color:rgb(255,255,255); color:rgb(12%,100%,50%); |
#RRGGBB | 十六进制颜色单位 | color:000FFF; |
ColorName | 浏览器所支持的颜色名称 | color:blue; |
4.10应用CSS到网页中
l 行间样式表
如<h1 style=”font-size:12px;color:#000FFF”>
l 内部样式表
在HTML代码里,如在head下
<style type="text/css"> u1 { border::dotted; float:left; } </style> |
l 外部样式表
通俗的说就是把样式内容放在CSS文件下,如meta下,添加如下代码
<link rel=”stylesheet” rev=”stylesheet” href=”style.css” type=”text/css”/>
今天就先到这里,下午还有课,晚上还要开会....