第5讲 网页制作(二)(2010PPT)

.NET程序设计主讲教师:李璟e-mail:[e-mail]手机：[phone]第5讲网页制作（二）——CSS网页布局与样式•CSS，Cascadingstylesheet，层叠样式表，是为了弥补HTML在布局和样式方面的不足而产生的。•在XHTML网页中，通常用CSS对页面整体布局和样式控制。•从本讲开始，本课将介绍CSS在样式和布局方面的相关知识。第5讲网页制作（二）——CSS网页布局与样式•5.1div标记和span标记•5.2CSS的概念•5.3CSS的声明方法•5.4CSS的基本语法•5.5CSS的颜色和数值单位•5.6Div+CSS布局•5.7CSS盒模型•5.8元素的非常规定位方式•5.9使用CSS制作背景•5.10综合实例解析5.1div标记和span标记•div标记和span标记都是CSS中最重要的标记。div标记•div标记是一个块状元素，其实就是一个大容器，可以包含任何标记，如段落、标题、文本、表格等，也可以嵌套使用。•div的一般使用方法如下：divid=“id名称”内容/div例如：divid=“id名称”h2div标记/h2pdiv标记是一个块状元素。/pimgsrc=“url”//divdiv的并列与嵌套•div可以多层进行嵌套使用。•嵌套的目的是为了实现更多复杂的页面排版。•例如，当设计一个网页时，首先需要有整体布局，需要产生头部、中部和底部，代码如下：•divid=all•divid=top顶部/div•divid=mid•divid=list列表/div•divid=content内容/div•/div•divid=bt底部/div•/divspan标记•span标记是内联元素，只能容纳文本和其它内联元素，可与其它内联元素位于同一行，宽度和高度不起作用。一行内可以被span划分成好几个区域，从而实现某种特定效果。•span标记的使用方法如下：•span内容/spanspan与div的区别•div是一个块级元素(大容器)，可以包含段落、标题、表格等其他元素，有固定的宽度和高度。•span是一个内联元素(小容器)，一行内的内容可以被span划分成好几个区域，span没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。•如:•divid=“content”•pThisisspanclass=“body”crazy/span/p•/div5.2CSS的概念•认识层叠样式表(CSS)•层叠样式表所提供的样式•CSS布局与表格布局的分析•感性体验CSS的魅力认识层叠样式表(CSS)•CSS，Cascadingstylesheet，层叠样式表，是为了弥补HTML在布局和样式方面的不足而产生的。•CSS文件，又称为CSS样式表，一个文本文件包含了一些CSS标记。•只要修改网站的CSS样式表，就可以改变整个站点的整体表现形式，大大减少了重复劳动。•CSS是每一个网页设计人员的必修课。层叠样式表所提供的样式•字体样式•文字样式•背景样式•区域样式•分类样式字体样式•字体样式用于设置HTML元素的字体、大小、粗细、常规/斜体等样式。如：–font-family：字体。–font-size：大小。–font-weight：粗细。–font-style：常规/斜体。–line-height:行高，用于设定行间距,单位为px(像素)或em(相对于文本的字体尺寸的倍数)。–font：font-family、font-size、font-weight、font-style等样式的综合表示法。文字样式•文字样式用于设置字符间距、文字间距、文字的对齐方式、文字效果等。如：–letter-spacing:字符间距–word-spacing:文字间距–text-decoration:指定下划线、顶线、删除线等文字效果。背景样式•背景样式用于设置背景颜色、背景图片、背景图片是否重复排列等。如：–backgroud-color：背景颜色–backgroud-image：背景图片–backgroud-repeat：背景图片是否重复排列–backgroud:背景颜色、背景图片、是否重复等背景样式的综合表示法区域样式•用于设置区域的高度、宽度、内外边距大小、边框样式等。如：–margin:用于指定区域的外边距大小。–height:用于指定区域的高度。–width:用于指定区域的宽度。–border:指定区域四周的边框粗细、样式及颜色。–padding：指定区域文字与区域边界的间距（即内边距）的大小。分类样式•用于指定HTML元素的显示方式、列表项图片的相关属性等。如：–display：用于指定HTML元素的显示方式。–list-style-image：用于指定列表项图片的文件路径及名称。–list-style-type：用于指定列表项符号或编号。CSS布局与表格布局的对比•在传统网页中，常用表格对页面整体进行布局。示例：table.htm•在XHTML网页中，通常用CSS对页面整体布局。示例：css.htmtable.htm(1)•html•head•title简单表格布局/title•/head•body•tablewidth=400border=0align=centercellpadding=0cellspacing=0•tr•tdheight=20valign=topbgcolor=#cccccc•fontcolor=#0000ffb顶部/b/font•/td•/tr•tr•td•tablewidth=100%border=0cellpadding=0cellspacing=0•tr•tdwidth=25%height=120valign=topbgcolor=#eeeeee•fontcolor=#ff0000列表/font•/td•tdwidth=75%height=120valign=topbgcolor=#f7f7f7•fontcolor=#ff0000内容/font•/td•/tr•/table/td•/tr•tr•tdheight=20valign=topbgcolor=#cccccc•fontcolor=#0000ffb底部/b/font•/td•/tr•/table•/body•/htmlcss.htm(1)•!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN•htmlxmlns=•head•metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/•titleXHTML+CSS简单布局/title•styletype=text/css•#all{width:400px;margin:0pxauto;color:#f00;}•#top,#bt{height:20px;•width:100%;background-color:#ccc;•color:#00f;font-weight:bold;}•#mid{width:100%;height:120px;}•#list{width:25%;height:100%;•float:left;background-color:#eee;}•#content{width:75%;height:100%;•float:left;background-color:#f7f7f7;}•#bt{float:left;}•/style•/headcss.htm(2)•body•divid=all•divid=top顶部/div•divid=mid•divid=list列表/div•divid=content内容/div•/div•divid=bt底部/div•/div•/body•/html表格布局•表格最初的目的是：显示表格状的数据。•后来，表格被用于网页布局时，设置其border=“0”，使得网页设计师可以将图片和文本放在这无形的网格中。•表格布局的主要弊端如下：表格布局的主要弊端•1、把样式和内容混合在一起，使得文件的大小无谓变大，减慢速度，浪费用户的流量费用。•2、重新设计现有的站点和内容代价昂贵。•3、极难保持整个站点的视觉的一致性，花费也极高。CSS布局•为了避免表格网页布局与生俱来的弊端，CSS布局应运而生。•利用CSS布局，网页设计者可使页面的实际内容与呈现格式的逻辑分离。•CSS布局的主要优势如下：CSS布局的主要优势•1.一次编写，重复使用。•2.把样式和内容分离，内容简单规范，方便代码维护。•3.缩小文件体积，CSS文件无需重复下载，增快网络访问速度。•4.在不改变HTML的情况下，可快速修改和切换网站的整体设计和风格。•5.帮助网站保持视觉的一致性。感性体验CSS的魅力•著名的“CSS禅意花园”网站（）无疑把CSS发挥到了极致。•永远不变的HTML文本，仅通过链接数百个不同的CSS样式表，就成就了数百个风格迥异而精彩绝伦的网页设计作品。•下面仅仅演示其中的几款经典作品。没有添加CSS的网页效果添加CSS后的网页效果（一）添加CSS后的网页效果（二）添加CSS后的网页效果（三）CSS禅意花园的第1种风格网页的效果CSS禅意花园的第1种风格网页的CSS源文件CSS禅意花园的第210种风格网页的效果CSS禅意花园的第210种风格网页的CSS源文件5.3CSS的声明方法•声明CSS通常有3种方法，并且这3种方法可以混合使用。–(1)行间样式表–(2)内部样式表–(3)外部样式表(1)行间样式表•行间样式表指CSS编写在XHTML标签的style属性中。•一般格式为：•标记style=“属性1:值1;属性2:值2…”信息内容/标记•例如：•pstyle=“font-size:20;color:black”信息内容/p•这种方式比较灵活，但样式和内容没有分离，一般不推荐使用。•示例：行间样式表.htm行间样式表.htm•html•head•title行间样式表/title•/head•body•pstyle=font-family:隶书;font-size:30;color:blue蝶恋花/p•pstyle=font-family:隶书;font-size:20;color:olive•    庭院深深深几许？杨柳堆烟，帘幕无重数。玉勒雕鞍游冶处，楼高不见章台路。雨横风狂三月暮，门掩黄昏，无计留春住。泪眼问花花不语，乱红飞过秋千去。•/p•pstyle=font-family:隶书;font-size:20;color:black•宋  欧阳修•/p•divstyle=color:green注释1:章台路意指歌妓聚居之所。br•/div•注释2:•spanstyle=color:red[冶游生春露]，/span•冶游即春游。•/body•/html(2)内部样式表•这种方式把CSS代码集中编写在头部信息的style/style标签内，很好地做到了样式与内容的分离，使用最为广泛。•一般格式为：•style•选择符1{属性1:值1;属性2:值2…}•选择符2{属性1:值1;属性2