网页布局基础-XHTML与CSS基础

原创 2007年09月19日 10:54:00

首先,从基础的开始。

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-top10px 表示上边距为10像素,这里是为自动

       margin-bottom:20px;  //下边距

       border:1px solid #9BDF70;   //边框

       background-color: #F0FBEB  //背景色

       }

 (在样式指定为div id=的时候必须这样写)

       #style2{……

不够,第一种写法明显可以提高代码重用率。

2. 符合WEB标准的网站

符合WEB标准的网站首先一点是网页能够通过W3C的代码校验,地址http://www.w3.org/QA/Tools/

目前提供了HTML/XHTML/CSS/RDF/P3PXML等多种标记语言的校验工具.

但仅仅为符合标准通过W3C校验而设计的网页是没有价值的。个人认为通过这个标准最大的意义在于不同浏览器的兼容性。

 

3. XHTML

其实XHTML就是HTML的下一个版本,用于替代HTML并帮助转向XML的一套过渡型标记语言.在强调表现分离的WEB标准时代,HTML的语法模式已经不能满足需求.  XHTML是一门面向结构的语言,设计目的不象HTML仅仅是为了网页设计与表现,XHTML主要用于对网页内容进行结构设计,其严严谨的语法结构有利于浏览器进行解析处理。

目前XHTML的使用标准也存在多种选者,包含Transitional,StrictFrameset三种。

1.         Transitional代表一种松散过渡型的XHTML应用,允许用户使用一部分旧式的HTML标签来编写XHTML文挡。

2.         Strict是一种严格型的应用方式,在这种形式下XHTML中不能使用任何样式表现的标签及属性。如在元素中直接使用bgcolor.

3.         Frameset方式是针对框架页的应用方式。

一般情况下还是使用Transitional

 

 

3.1  XHTML(如无特殊说明,开发环境都为dw

DW中新建一个HTML

在代码中可以看到

<!DOCTYPE html PUBLIC "-//W3C//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>

如果使用IMGBR这样的单体标签,那么必须使用正斜钱作为结束,如

<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(背景颜色),valueCSS编码中的蓝色.

多个属性的表示就如

P{

  color: #3f3f3f3;

  font-family:arial;

}

4.2    类型选择符

所谓类型选择符是指网页中已有的标签类型做为名称的选择符,body是网页中的一个标签类型,div也是,span也是.将控制页面中所有的bodydivspan

 

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    idclass选择符

 上面已多次提到,简单的说就是CSS #style .style  页面中 id=”style”class=”style”的区别了。

 

4.6    组合选择符

对于上述所有CSS选择符而言,无论是什么样的选择符,均可以进行组合使用。

 h1 .p1{}  表示HT标签下所有的classp1的标签。

#content h1{}  表示IDconten的标签下的所有有h1标签.

 h1 .p1,#content h1 {} 表示以上二者进行群组选择

h1 #content h2{}  表示idcontenth1标签下的h2标签.

 

4.7    伪类及伪对象

是一种特殊的类和对象,由CSS自动支持,属CSS的一种扩展类和对象,名称不能被用户自定义,使用时只能按标准格式进行应用。

a:hover{ backgroud-coloir: #3f3f3f; }

本例中的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”/>

 

今天就先到这里,下午还有课,晚上还要开会....

 

相关文章推荐

DIV+CSS网页布局基础知识整理

  • 2015年10月27日 02:25
  • 8KB
  • 下载

前端基础学习-常见CSS网页布局

常见的网页布局大致分为:一列布局,两列布局,三列布局以及混合布局一列布局 Document .header{ height: 8...

CSS网页布局常用的基础知识

 52CSS.com中汇集了大量的CSS知识,这些知识已经非常全面了,但很多CSSer新手初来本站,依然云里雾里,现整理一些DIVCSS网页布局常用的一些基础知识,供大家学习,欢迎补充及提一些建议。 ...

XHTML+CSS网页布局与美化说明文件

  • 2012年11月11日 12:25
  • 26KB
  • 下载

CSS布局模型/网页布局基础

CSS布局模型清楚了CSS 盒模型的基本概念、 盒模型类型, 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不...

网页布局设计基础

一.网页布局的基本概念 正如你现在所看到的一样,网页的布局设计变得越来越重要。访问者不愿意再看到只注重内容的站点。虽然内容很重要,但只有当网页布局和网页内容成功接合时,这种网页或者说站点...

慕课:网页布局基础课程——学习笔记

1、CSS中存在三种定位机制:标准文档流、浮动、jue'dui
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页布局基础-XHTML与CSS基础
举报原因:
原因补充:

(最多只允许输入30个字)