实用页面设计方法_4_CSS

1、6 June. 2008 Neusoft Confidential2022-5-12Copyright 2008 By Neusoft Group. All rights reserved东软IT人才实训中心实用页面设计方法实用页面设计方法CSS10 Dec. 2008Confidential课程结构课程结构内容内容课时（课时（H H）第一章： CSS概述0.2第二章： CSS的样式0.3第三章： CSS基本语法2第四章： CSS布局1第五章： 使用JavaScript控制CSS0.510 Dec. 2008Confidential第一章：第一章： CSS概述概述学时：学时：0.20.2学时学

2、时教学方法：讲授教学方法：讲授pptppt目标目标: :本章旨在向学员介绍本章旨在向学员介绍CSSCSS的相关概的相关概念，通过本课的学习，学员应该掌念，通过本课的学习，学员应该掌握如下知识：握如下知识：1 1）了解）了解CSSCSS的相关概念的相关概念10 Dec. 2008Confidential1.1 CSS概述概述CSS-级联样式表单Cascading Style Sheet对WEB页面进行外观控制的机制将页面的内容和表现分离CSS版本目前为止，CSS有两个官方标准：CSS1和CSS2CSS1的功能在大多数浏览器中都被支持10 Dec. 2008Confidential1.2 示例示例

3、-无无CSS10 Dec. 2008Confidential1.2 示例示例-有有CSS10 Dec. 2008Confidential1.3 CSS优点优点优点代码独立，便于控制样式文件可在浏览器中缓存便于分工合作提高了可访问性提供更多的外观控制手段10 Dec. 2008Confidential第二章：第二章： CSS的样式的样式学时：学时：0.30.3学时学时教学方法：讲授教学方法：讲授ppt + ppt + 课堂演示课堂演示目标目标: :本章旨在向学员介绍本章旨在向学员介绍CSSCSS的样式及的样式及将样式表加入到页面中，通过本课将样式表加入到页面中，通过本课的学习，学员应该掌握如下知

4、识：的学习，学员应该掌握如下知识：1 1）了解）了解CSSCSS的样式的样式2 2）能够使用样式表）能够使用样式表10 Dec. 2008Confidential2.1 样式样式CSS样式内联样式嵌入样式外联样式10 Dec. 2008Confidential2.2 内联内联内联样式inlineCSS.html把样式代码内联到标记内使用style作为属性，样式语句作为属性值如：控制标记的边框样式为不折叠10 Dec. 2008Confidential2.2 内联特点内联特点内联样式特点看上去很直观针对个别元素控制和传统的外观控制方式没有本质的不同不推荐使用10 Dec. 2008Confide

5、ntial2.3 嵌入嵌入嵌入样式internalCSS.html使用标记把样式代码插入到页面中一般插入到标记中如：10 Dec. 2008Confidential2.3 嵌入特点嵌入特点特点将CSS语句直接写在HTML文档中，但它独立存在，方便维护和修改仅针对一个HTML文档进行设置代码是HTML文档的一部分，没有利用浏览器的缓存机制10 Dec. 2008Confidential2.4 外联外联外联样式externalCSS.html通过外部样式文件对页面进行控制外部的样式文件通过HTML的link元素连接到HTML文档中10 Dec. 2008Confidential2.4 外联使用外联

6、使用使用建立外部样式文件（.css）外部的样式文件不能含有任何像或这样的HTML标记样式表文件仅仅由样式规则或声明组成10 Dec. 2008Confidential2.4 外联特点外联特点特点当样式被应用到很多的网页时，推荐使用外部样式表网页制作者使用外部样式表，在改变整个网站的外观时，仅需要改变一个文件大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟在实际开发中一般都使用外联样式10 Dec. 2008Confidential第三章：第三章： CSS基本语法基本语法学时：学时：2.02.0学时学时教学方法：讲授教学方法：讲授ppt + ppt + 上机

7、练习上机练习目标目标: :本章旨在向学员介绍本章旨在向学员介绍CSSCSS的基本语的基本语法，通过本课的学习，学员应该掌法，通过本课的学习，学员应该掌握如下知识：握如下知识：1 1）了解）了解CSSCSS的基本语法的基本语法2 2）了解）了解CSSCSS的选择符的选择符3 3）了解伪类及伪对象）了解伪类及伪对象10 Dec. 2008Confidential3.1 语法语法选择符 属性1:属性值1;属性2:属性值2;选择符（selector）：指定样式适用的标记，除指定标记外，样式不起作用属性：样式的关键字属性值：描述样式的值；格式：属性与属性之间使用分号分隔，属性与属性值之间使用冒号分隔如：

8、P font-size:12pt; color:red;10 Dec. 2008Confidential3.1 语法语法使用html.cssbody color:blackp font-family:”sans serif”p text-align:center;color:redp text-align:center; color:black; tont-family:arial如果是多个单词，使用双引号括上如果有多个属性，使用分号将各个属性分隔开注意代码的格式，使可读性更好10 Dec. 2008Confidential3.2 选择符分类选择符分类选择符分类普通选择符类选择符id选择符10

9、 Dec. 2008Confidential3.2.1 普通选择符普通选择符普通选择符任意的HTML标记其样式仅仅作用在选择符指定的HTML元素上如：p color:red10 Dec. 2008Confidential3.2.2 类选择符类选择符类选择符css_choose.html同一类型的不同元素通过设置不同CLASS来显示不同样式；但一个元素只能设置一个CLASS属性HTML元素名加上类名，中间用“.”号分开，类名供该HTML元素的CLASS属性使用如：使用不同颜色显示，下面例子建立了两个类，OddColor和EvenColor，供tr使用tr.OddColor color:redtr

10、.EvenColor color:blue如果省略HTML元素名只写“.类名”表示这个类名适用于所有的HTML元素的CLASS属性下面例子建立了一个类note，可以被任何元素使用.note font-size:small; color:red10 Dec. 2008Confidential3.2.3 id选择符选择符id选择符个别地定义每个元素的成分可以作用到任意HTML元素的ID属性上尽量少用，因为id选择符具有一定的局限（严格来说，在一个页面中，每个id只能使用一次）要有“#”在名字前面如#svp font-size:12pt10 Dec. 2008Confidential3.2.4 组合

11、使用组合使用-关联关联关联是一个用空格隔开的两个或更多的单元选择符组成的字符串这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大如p em background:yellow表示段落（p）中的强调文本（em）是黄色背景，而其它部分的强调文本不受影响10 Dec. 2008Confidential3.2.4 组合使用组合使用组合使用10 Dec. 2008Confidential3.2.5 练习练习练习建立一个HTML文件，其中有h1-h6标记的文字；对h1与h2标记使用类型选择符设置样式；对h3与h4标记使用id选择符设置样式；对h5标记使用通用的类型选择符设置样

12、式；对h6标记使用通用的id选择符设置样式参考 css_choose.html10 Dec. 2008Confidential3.3 样式就近原则样式就近原则样式就近并列的定义当定义重复时，后出现的定义会覆盖前面的定义对同一结点指定样式，但层次结构不一样在层次结构上最接近指定结点的CSS起作用10 Dec. 2008Confidential3.4 伪类及伪对象伪类及伪对象伪类及伪对象由CSS自动支持，属CSS的一种扩展型类名称不能被用户自定义使用时只能按照标准格式进行应用10 Dec. 2008Confidential3.4 超链接伪类超链接伪类a:link font-size: 14px;

13、color: #ffffff; text-decoration: none; a:visited color: #db7093; text-decoration: none; a:hover color: #564b47; a:active color: #000000; /注意必须保持4个伪类的顺序10 Dec. 2008Confidential3.4 常用伪对象常用伪对象示例：pseudoLetter.html、pseudoLine.htmldiv:first-line color: red; font-size: 16px; p:first-letter color: red; font

14、-size: 16px; 10 Dec. 2008Confidential3.5 注释注释注释/* */，但要注意不要将注释嵌入到选择器语句里面10 Dec. 2008Confidential3.6 常用的样式属性常用的样式属性属 性CSS名称说说 明明颜色 color文本属性font-size字体大小font-family字体text-align文本对齐边框属性(用于表单元素) border-style边框样式border-width边框宽度 border-color边框颜色 定位属性(position)top顶部边距（上边距）left左边距width宽度height高度z-indexz 轴

15、索引号，用于层10 Dec. 2008Confidential3.6 常用的样式属性值一常用的样式属性值一类型CSS属性值字体属性 font-family Arial，serif，宋体 font-size Small，medium，large或直接指定字体大小 font-style normal, italic font-weight normal, bold, lighter, 100, 200文本属性 text-align left, right, center, justify text-indent 度量或% text-decoration none, blink, underline

16、, overline, line-through text-transform none, capitalize, uppercase, lowercase vertical-align Baseline, super, sub, top, text-top, middle-bottom, text-bottom word-spacing 度量 letter-spacing 度量10 Dec. 2008Confidential3.6 常用的样式属性值二常用的样式属性值二类型CSS属性值框属性 border None, solid, double, ridge, inset, outset, g

17、roove, dotted dashed border-style 同上 border-width 度量，thick，medium，thin border-color #RRGGBB，颜色名称 margin-top 度量或% Margin-left 度量或%定位属性 top 度量 width 度量或% height 度量或% left 度量颜色属性 color #RRGGBB，颜色名称 background-color #RRGGBB，颜色名称，transparent background-image url background-repeat repeat, repeat-x, repeat

18、-y, no-repeat10 Dec. 2008Confidential第四章：第四章： CSS布局布局学时：学时：1.01.0学时学时教学方法：讲授教学方法：讲授ppt + ppt + 上机练习上机练习目标目标: :本章旨在向学员介绍本章旨在向学员介绍CSSCSS的布局，的布局，通过本课的学习，学员应该掌握如通过本课的学习，学员应该掌握如下知识：下知识：1 1）了解）了解divdiv的概念的概念2 2）能够使用）能够使用CSSCSS的布局功能的布局功能10 Dec. 2008Confidential4.1 divdivdiv.html放置内容的容器用于大面积，大区域的块状排版div本身与样

19、式没有任何关系样式需要编写CSS来实现一个较好的样式代码：css_div.html供参考10 Dec. 2008Confidential4.2 盒模型盒模型盒模型将所有元素都放置在一个盒子中，然后通过对这个盒子的外观控制来实现整个页面的外观控制一个盒模型包括4个区内容（content）内边距（padding）边框（border）外边距（margin）10 Dec. 2008Confidential4.2 盒模型盒模型10 Dec. 2008Confidential4.2 盒模型盒模型heightheightborderborderpaddingpadding可见区域可见区域contentcon

20、tentwidthwidthmarginmargin10 Dec. 2008Confidential4.2 内、外补丁属性内、外补丁属性body margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;td padding: 2px 2px 2px 2px; td padding-left: 2px; padding-right: 2px; padding-top: 2px; padding-bottom: 2px;10 Dec. 2008Confidential4.3 CSS布局布局设计布局结构采用2层

21、CSS结构既能够统一全站风格，又能够根据不同的页面设计独立的样式如：一个网站中有一个index.html文件，可以做设置10 Dec. 2008Confidential4.4 使用使用div布局布局使用div布局真正使用div布局，要把页面的内容和表现完全分离开，在页面的内容部分不应该出现表现控制标记，如font、color、height、width、align等标记。使用Div+css设计：1、用div来定义语义结构；2、使用CSS来美化网页3、在div定义的盒子内加入内容10 Dec. 2008Confidential4.5 使用使用div布局布局-示例示例参照下面这些步骤完成参照下面这些

22、步骤完成divdiv布局布局- -示例示例示例：div_example.html10 Dec. 2008Confidential4.5.1 布局步骤布局步骤11、使用div定义语义结构 一个典型的版面分栏结构：页头、导航栏、内容、版权结构代码：把这四个盒子装进一个更大的盒子，body中，如下上面四行代码10 Dec. 2008Confidential4.5.2 布局步骤布局步骤2这样，我们定义最外边的大盒子（body）的属性，让它在页面居中，并定义其宽度为760像素，加上边框，如下：body font-family:Arial,Helvetica,sans-serif; font-size:1

23、2px; margin:0px auto; height:auto; width:760px; border:1px solid #006633;10 Dec. 2008Confidential4.5.3 布局步骤布局步骤3对于页头，我们应用一幅背景图，并在其下边界设计一定的间隙，使页头的图片不要和下面的导航栏连在一起，如下：#header height:100px; width:760px; background-image:url(web_head.jpg); background-repeat:no-repeat; margin:0px 0px 3px 0px;10 Dec. 2008C

24、onfidential4.5.4 布局步骤布局步骤4对于导航栏，做成像一个个小按钮，鼠标移上去会改变按钮的背景色和字体色，而这些小按钮我们也可以理解为小盒子，则是一个盒子嵌套的问题了，如下：#nav/*定义一个导航栏的长盒子*/ height:25px; width:760px; font-size:14px; list-style-type:none;/*让nav这个大盒子下面的小盒子LI列表样式不显示,这对于标准浏览器很重要*/ #nav li float:left;/*让LI这些小盒子左对齐*/ 10 Dec. 2008Confidential4.5.5 布局步骤布局步骤5#nav li

25、 a color:#000000; text-decoration:none;/*让LI盒子里面的链接样式没有下滑线*/ padding-top:4px; display:block;/*让LI里面的链接块状呈现，就像一个按钮，而不必一定要点中链接文字才起作用*/ width:97px; height:22px; text-align:center; background-color:#009966; margin-left:2px;10 Dec. 2008Confidential4.5.6 布局步骤布局步骤6#nav li a:hover background-color:#006633;/

26、*鼠标移到链接盒子上面改变盒子背景色*/ color:#FFFFFF;10 Dec. 2008Confidential4.5.7 布局步骤布局步骤7对于内容部分，主要是放入文章内容，有标题和段落；给标题加粗，使用H标记；段落首行缩进2个字，同时所有内容看起来与大盒子的边框要有一定距离，如下：#content height:auto; width:740px; line-height:1.5em; padding:10px;#content p text-indent:2em;#content h3 font-size:16px; margin:10px;10 Dec. 2008Confiden

27、tial4.5.8 布局步骤布局步骤8对于版权栏，加上背景，与页头呼应，里面的文字要居中对齐，有多行内容时，行间距合适，如下：#footer height:50px; width:740px; line-height:2em; text-align:center; background-color:#009966; padding:10px;10 Dec. 2008Confidential4.5.9 布局步骤布局步骤9最后，在开头增加如下样式代码，用通配符初始化各标记边界和填充（因为有部分标记默认有一定的边界，如form标记）：* margin:0px; padding:0px;10 Dec. 2008Confidential4.5.10 布局步骤布局步骤10结构代码如下：首 页文 章相册Blog论 坛帮助10 Dec. 2008Confidential4.5.11 布局步骤布局步骤11前言第一段内容（插入大量文字）理解CSS盒子模式第二段内容（插入大量文字） 关于| 广告服务 | 招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车Copyright 2006 - 2008 All Rights Reserved10 Dec. 2008Confidential第五章：第五章： 使用使用JavaScript控制控制CS