DIV+CSS布局入门-.pdf
《DIV+CSS布局入门-.pdf》由会员分享,可在线阅读,更多相关《DIV+CSS布局入门-.pdf(45页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、1 邮 kait 整理http:/ divcss布局入门你正在学习CSS 布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习:第一种可能是你还没有理解CSS 处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML 结构化。另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、hspace、align=left 等等)束手无策,不知道该转换成对应的什么CSS 语句。当你解决了第一种问题,知道了如何结构化你的HTML,我再给出一个列表,详细列出原来的表现属性用什么CSS
2、来代替。结构化HTML 我们在刚学习网页制作时,总是先考虑怎么设计,考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop 或者 Fireworks 画出来、切割成小图。最后再通过编辑HTML 将所有设计还原表现在页面上。如果你希望你的HTML 页面用 CSS布局(是 CSS-friendly 的),你需要回头重来,先不考虑“外观”,要先思考你的页面内容的语义和结构。外观并不是最重要的。一个结构良好的HTML 页面可以以任何外观表现出来,CSS Zen Garden 是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS 的强大力量。HTML 不仅仅只在电脑屏幕上
3、阅读。你用 photoshop 精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML 页面可以通过CSS的不同定义,显示在任何地方,任何网络设备上。开始思考 首先要学习什么是结构,一些作家也称之为语义。这个术语的意思是你需要分析你的内容块,以及每块内容服务的目的,然后再根据这些内容目的建立起相应的HTML 结构。如果你坐下来仔细分析和规划你的页面结构,你可能得到类似这样的几块:标志和站点名称主页面内容站点导航(主菜单)子菜单搜索框功能区(例如购物车、收银台)页脚(版权和有关法律声明)我们通常采用DIV 元素来将这些结构定义出来,类似这样:2 这不是布局,是结构
4、。这是一个对内容块的语义说明。当你理解了你的结构,就可以加对应的ID 在 DIV 上。DIV 容器中可以包含任何内容块,也可以嵌套另一个DIV。内容块可以包含任意的HTML元素-标题、段落、图片、表格、列表等等。根据上面讲述的,你已经知道如何结构化HTML,现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方,再指定这个块的颜色、字体、边框、背景以及对齐属性等等。使用选择器是件美妙的事id 的名称是控制某一内容块的手段,通过给这个内容块套上DIV 并加上唯一的id,你就可以用CSS 选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#he
5、ader写一个 CSS规则,就可以完全不同于#content 里的图片规则。另外一个例子是:你可以通过不同规则来定义不同内容块里的链接样式。类似这样:#globalnav a:link 或者#subnav a:link 或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如,通过#content p 和#footer p 分别定义#content 和#footer 中 p 的样式。从结构上讲,你的页面是由图片、链接、列表、段落等组成的,这些元素本身并不会对显示在什么网络设备中(PDA 还是手机或者网络电视)有影响,它们可以被定义为任何的表现外观。一个仔细结构化的
6、HTML页面非常简单,每一个元素都被用于结构目的。当你想缩进一个段落,不需要使用 blockquote 标签,只要使用p 标签,并对p 加一个 CSS 的 margin 规则就可以实现缩进目的。p 是结构化标签,margin 是表现属性,前者属于HTML,后者属于CSS。(这就是结构于表现的相分离.)良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如,原先的代码,现在可以只在HTML 中写,所有控制表现的东西都写到 CSS 中去,在结构化的HTML 中,table 就是表格,而不是其他什么(比如被用来布局和定位)。亲自实践一下结构化 上面说的只是最基本的结构,实际应用中,你
7、可以根据需要来调整内容块。常常会出现DIV 嵌套的情况,你会看到 container层中又有其它层,结构类似这样:a list 3 another list 嵌套的div 元素允许你定义更多的CSS规则来控制表现,例如:你可以给#navcontainer 一个规则让列表居右,再给#globalnav 一个规则让列表居左,而给#subnav 的 list 另一个完全不同的表现。用CSS替换传统方法 下面的列表将帮助你用CSS替换传统方法:HTML 属性以及相对应的CSS 方法HTML 属性CSS 方法说明align=left align=right float:left;float:right;
8、使用 CSS 可以浮动任何元素:图片、段落、div、标题、表格、列表等等 当你使用float 属性,必须给这个浮动元素定义一个宽度。marginwidth=0 leftmargin=0 marginheight=0 topmargin=0 margin:0;使用 CSS,margin 可以设置在任何元素上,不仅仅是body 元素.更重要的,你可以分别指定元素的top,right,bottom 和 left 的 margin 值。vlink=#333399 alink=#000000 link=#3333FF a:link#3ff;a:visited:#339;a:hover:#999;a:ac
9、tive:#00f;在HTML 中,链接的颜色作为body 的一个属性值定义。整个页面的链接风格都一样。使用CSS 的选择器,页面不同部分的链接样式可以不一样。bgcolor=#FFFFFF background-color:#fff;在 CSS 中,任何元素都可以定义背景颜色,不仅仅局限于body和 table 元素。bordercolor=#FFFFFF border-color:#fff;任何元素都可以设置边框(boeder),你可以分别定义top,right,bottom 和 left border=3 cellspacing=3 border-width:3px;用 CSS,你可以定
10、义table 的边框为统一样式,也可以分别定义top,right,bottom and left 边框的颜色、尺寸和样式。你可以使用table,td or th 这些选择器.4 如果你需要设置无边框效果,可以使用CSS定义:border-collapse:collapse;clear:left;clear:right;clear:both;许多2 列或者 3列布局都使用float 属性来定位。如果你在浮动层中定义了背景颜色或者背景图片,你可以使用 clear 属性.cellpadding=3 vspace=3 hspace=3 padding:3px;用 CSS,任何元素都可以设定paddin
11、g 属性,同样,padding 可以分别设置top,right,bottom and left。padding 是透明的。align=center text-align:center;margin-right:auto;margin-left:auto;Text-align 只适用于文本.象div,p 这样的块级怨毒可以通过margin-right:auto;和 margin-left:auto;来水平居中 一些令人遗憾的技巧和工作环境 由于浏览器对CSS 支持的不完善,我们有时候不得不采取一些技巧(hacks)或建立一种环境(Workarounds)来让 CSS 实现传统方法同样的效果。例如
12、块级元素有时侯需要使用水平居中的技巧,盒模型bug 的技巧等等。所有这些技巧都在Molly Holzschlag的文章Integrated Web Design:Strategies for Long-Term CSS Hack Management 中有详细说明。另外一个关于CSS技巧的资源站点是Big John 和 Holly Bergevin的“Position is Everything”。XHTML下 css+div布局总结xml(extensible Markup Language)的出现,结构化文档和数据有了一个通用的、科适应的格式,不仅仅应用在web上,也可以应用在任何地方。标
13、准称为可能。XHTML是 The Extensible HyperText Markup Language可扩展标识语言的缩写。在HTML4.0 的基础上,用XML的规则对其进行扩展,得到了XHTML。它实现HTML 向 XML 的过渡。CSS 是 Cascading Style Sheets层叠样式表的缩写。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易。5 1)为页面添加正确的DOCTYPE DOCTYPE是 document type 的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE 定义的 DTD(文档类
14、型定义)来解释页面代码。XHTML1.0提供了三种DOCTYPE 可选择:(1)过渡型(Transitional)-使用非常普遍。(2)严格型(Strict)(3)框架型(Frameset)2)设定一个名字空间(Namespace)直接在 DOCTYPE 声明后面添加如下代码:一个 namespace是收集元素类型和属性名字的一个详细的DTD,namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。3)声明你的编码语言为了被浏览器正确解释和通过标识校验,所有的XHTML文档都必须声明它们所使用的编码语言。代码如下:这里声明的编码语言是简体中文GB2
15、312,你如果需要制作繁体内容,可以定义为BIG5。4)用小写字母书写所有的标签XML对大小写是敏感的,所以,XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C 校验认为是无效的。例如下面的代码是不正确的:5)为图片添加alt 属性为所有图片添加alt 属性。alt 属性指定了当图片不能显示的时候就显示供替换文本,这样做对正常用户可有可无,但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt 属性,代码才会被W3C 正确性校验通过。注意的是我们要添加有意义的alt 属性,象下面这样的写法毫无意义:6 正确的写法:6)给所有属
16、性值加引号在 HTML 中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。还必须用空格分开属性。例:这也是不正确的7)关闭所有的标签在 XHTML中,每一个打开的标签都必须关闭。空标签也要关闭,在标签尾部使用一个正斜杠/来关闭它们自己。例如:8)收藏夹小图标例如:首先制作一个16x16 的 icon 图标,命名为favicon.ico,放在根目录下。然后将下面的代码嵌入head区:9)用 CSS 定义元素外观用 css 布局的一个好处是可以批量对页面进行修改,它能将文档结构和表现层分离开来,减轻工作量和服务器的负荷,增加站点的扩展能力和应用。css是不区别空格和大小写的,下
17、面是一些基础的归纳(1)颜色值颜色值可以用RGB 值写,例如:color:rgb(255,0,0),也可以用十六进制写,就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000 可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B 必须写满六位。(2)定义字体web 标准推荐如下字体定义方法:body font-family:Lucida Grande,Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;7 字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande 字体,文档将被指
18、定为Lucida Grande。没有的话,就被指定为Verdana 字体,如果也没有Verdana,就指定为Lucida 字体,依此类推,;Lucida Grande 字体适合Mac OS X;Verdana 字体适合所有的Windows 系统;Lucida 适合 UNIX 用户宋体 适合中文简体用户;如果所列出的字体都不能用,则默认的sans-serif 字体能保证调用;(3)群选择器当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:p,td,li font-size:12px;(4)派生选择器可以使用派生选择器给一个元素里的子元素定义样式,例如这样:li strong
19、font-style:italic;font-weight:normal;就是给 li 下面的子元素strong 定义一个斜体不加粗的样式。(5)id 选择器用 CSS布局主要用层div 来实现,而div 的样式通过 id 选择器 来定义。例如我们首先定义一个层 然后在样式表里这样定义:#menubar MARGIN:0px;BACKGROUND:#FEFEFE;COLOR:#666;其中 menubar 是你自己定义的id 名称。注意在前面加#号。id 选择器也同样支持派生,例如:#menubar p text-align:right;margin-top:10px;这个方法主要用来定义层和
20、那些比较复杂,有多个派生的元素。(6)类别选择器在 CSS里用一个点开头表示类别选择器定义,例如:.14px color:#f60;font-size:14px;在页面中,用class=类别名 的方法调用:14px 大小的字体 这个方法比较简单灵活,可以随时根据页面需要新建和删除。(7)定义链接的样式CSS 中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover 和 a:active,例如:8 a:linkfont-weight:bold;text-decoration:none;color:#c00;a:visited font-weight:bold;tex
21、t-decoration:none;color:#c30;a:hover font-weight:bold;text-decoration:underline;color:#f60;a:active font-weight:bold;text-decoration:none;color:#F90;以上语句分别定义了链接、已访问过的链接、鼠标停在上方时、点下鼠标时的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。(8)组合使用选择器创造精致的设计效果用漂亮的图案代替普通无序列表前沉闷的黑点。站点http:/ css规则告诉类别属性inventory 的无
22、序列表。ul.inventory list-style:disc url(/images/common/lister2.gig)inside;它的调用标记:Angelfish(67 items)Angels/Frogfish(35 items)Angelfish(5526 items)Angelfish(15 items)(9)缩写是按照顺时针的顺序margin:25px 0 25px 0;(10)行高line-height:150%说明行距为正常的150%10)结构化代码div(division)、id、class用它们来书写紧凑的xhtml,更明智的使用css.(1)结构化 id 标签,与
23、class 的有区别:如果你的属性页面包含了一个div,它的 id 为content,它就不可能有另外一个div 或者其他元素拥有相同的名字。相反,class属性可以在意个页面中一次又一次地使用。(2)id 的规则一个 id 值必须用一个字母或者下划线开头,它不能用一个数字进行开头,然后跟随字母、数字和下划线。空格和连字符-都是不允许的。9 11)制作好的网站可以到w3c进行标准校正http:validator.w3.org http:/jigsaw.w3.org/css-validator/网页设计DIV+CSS 第 1天:选择什么样的DOCTYPE 前言大家好!这个系列文章是按阿捷自己制作
24、这个站点的过程编写的。之前阿捷也一直没有制作过一个真正符合web标准的网站。现在边参考国外资料边制作,同时把过程中的心得和经验记录下来,希望对大家有点帮助。好了,让我们开始吧第一天开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE。查看本站首页原代码,可以看到第一行就是:打开一些符合标准的站点,例如著名web 设计软件开发商Macromedia,设计大师Zeldman 的个人网站,会发现同样的代码。而另一些符合标准的站点(例如 )的代码则如下:那么这些代码有什么含义?一定要放置吗?什么是 DOCTYPE 上面这些代码我们称做DOCTYPE 声明。DOCTYPE 是 docu
25、ment type(文档类型)的简写,用来说明你用的XHTML或者 HTML 是什么版本。其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的 DTD 来解释你页面的标识,并展现出来。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS 都不会生效。XHTML 1.0 提供了三种DTD 声明可供选择:?过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01 的标识(但是要符合xhtml 的写法)。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- DIV CSS 布局 入门
限制150内