实用页面设计方法-4-CSS资料

1、Copyright 2008 By Neusoft Group. All rights reserved东软IT人才(rnci)实训中心实用页面设计(shj)方法CSS2022/7/26共六十二页课程(kchng)结构内容课时（H）第一章： CSS概述0.2第二章： CSS的样式0.3第三章： CSS基本语法2第四章： CSS布局1第五章： 使用JavaScript控制CSS0.5共六十二页第一章： CSS概述(i sh)学时(xush)：0.2学时教学方法：讲授ppt目标:本章旨在向学员介绍CSS的相关概念，通过本课的学习，学员应该掌握如下知识：1）了解CSS的相关概念共六十二页1.1 CS

2、S概述(i sh)CSS-级联样式表单Cascading Style Sheet对WEB页面进行外观控制的机制将页面的内容和表现分离CSS版本目前为止，CSS有两个官方标准(biozhn)：CSS1和CSS2CSS1的功能在大多数浏览器中都被支持共六十二页1.2 示例(shl)-无CSS共六十二页1.2 示例(shl)-有CSS共六十二页1.3 CSS优点(yudin)优点代码独立，便于控制(kngzh)样式文件可在浏览器中缓存便于分工合作提高了可访问性提供更多的外观控制手段共六十二页第二章： CSS的样式(yngsh)学时：0.3学时教学方法：讲授ppt + 课堂(ktng)演示目标:本章旨

3、在向学员介绍CSS的样式及将样式表加入到页面中，通过本课的学习，学员应该掌握如下知识：1）了解CSS的样式2）能够使用样式表共六十二页2.1 样式(yngsh)CSS样式(yngsh)内联样式嵌入样式外联样式共六十二页2.2 内联内联样式inlineCSS.html把样式代码内联到标记内使用style作为属性，样式语句作为属性值如：控制标记的边框(binkung)样式为不折叠共六十二页2.2 内联特点(tdin)内联样式特点看上去很直观针对个别元素控制和传统的外观控制方式没有(mi yu)本质的不同不推荐使用共六十二页2.3 嵌入(qin r)嵌入样式internalCSS.html使用标记(

4、bioj)把样式代码插入到页面中一般插入到标记中如：共六十二页2.3 嵌入(qin r)特点特点将CSS语句直接写在HTML文档中，但它独立存在，方便维护和修改(xigi)仅针对一个HTML文档进行设置代码是HTML文档的一部分，没有利用浏览器的缓存机制共六十二页2.4 外联外联样式externalCSS.html通过外部样式文件对页面进行控制(kngzh)外部的样式文件通过HTML的link元素连接到HTML文档中共六十二页2.4 外联使用(shyng)使用建立外部样式文件(wnjin)（.css）外部的样式文件不能含有任何像或这样的HTML标记样式表文件仅仅由样式规则或声明组成共六十二页2

5、.4 外联特点(tdin)特点当样式被应用到很多的网页时，推荐使用外部样式表网页制作者使用外部样式表，在改变整个网站的外观时，仅需要改变一个文件大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟在实际开发(kif)中一般都使用外联样式共六十二页第三章： CSS基本(jbn)语法学时(xush)：2.0学时教学方法：讲授ppt + 上机练习目标:本章旨在向学员介绍CSS的基本语法，通过本课的学习，学员应该掌握如下知识：1）了解CSS的基本语法2）了解CSS的选择符3）了解伪类及伪对象共六十二页3.1 语法(yf)选择符 属性1:属性值1;属性2:属性值2;选择

6、符（selector）：指定样式适用的标记，除指定标记外，样式不起作用属性：样式的关键字属性值：描述样式的值；格式(g shi)：属性与属性之间使用分号分隔，属性与属性值之间使用冒号分隔如：P font-size:12pt; color:red;共六十二页3.1 语法(yf)使用(shyng)html.cssbody color:blackp font-family:”sans serif”p text-align:center;color:redp text-align:center; color:black; tont-family:arial如果是多个单词，使用双引号括上如果有多个属性，

7、使用分号将各个属性分隔开注意代码的格式，使可读性更好共六十二页3.2 选择符分类(fn li)选择符分类(fn li)普通选择符类选择符id选择符共六十二页3.2.1 普通(ptng)选择符普通选择符任意的HTML标记其样式仅仅作用在选择符指定(zhdng)的HTML元素上如：p color:red共六十二页3.2.2 类选择符类选择符css_choose.html同一类型的不同元素通过(tnggu)设置不同CLASS来显示不同样式；但一个元素只能设置一个CLASS属性HTML元素名加上类名，中间用“.”号分开，类名供该HTML元素的CLASS属性使用如：使用不同颜色显示，下面例子建立了两个类

8、，OddColor和EvenColor，供tr使用tr.OddColor color:redtr.EvenColor color:blue如果省略HTML元素名只写“.类名”表示这个类名适用于所有的HTML元素的CLASS属性下面例子建立了一个类note，可以被任何元素使用.note font-size:small; color:red共六十二页3.2.3 id选择符id选择符个别地定义每个元素的成分可以作用到任意HTML元素的ID属性上尽量少用，因为id选择符具有一定的局限（严格来说，在一个页面中，每个id只能使用一次）要有“#”在名字(mng zi)前面如#svp font-size:12

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

10、对h6标记使用通用的id选择符设置样式参考 css_choose.html共六十二页3.3 样式(yngsh)就近原则样式就近并列的定义当定义重复时，后出现的定义会覆盖前面的定义对同一结点指定(zhdng)样式，但层次结构不一样在层次结构上最接近指定结点的CSS起作用共六十二页3.4 伪类及伪对象(duxing)伪类及伪对象由CSS自动支持，属CSS的一种扩展(kuzhn)型类名称不能被用户自定义使用时只能按照标准格式进行应用共六十二页3.4 超链接伪类a:link font-size: 14px; color: #ffffff; text-decoration: none; a:visite

11、d color: #db7093; text-decoration: none; a:hover color: #564b47; a:active color: #000000; /注意必须保持(boch)4个伪类的顺序共六十二页3.4 常用(chn yn)伪对象示例(shl)：pseudoLetter.html、pseudoLine.htmldiv:first-line color: red; font-size: 16px; p:first-letter color: red; font-size: 16px; 共六十二页3.5 注释(zhsh)注释/* */，但要注意不要(byo)将注释

12、嵌入到选择器语句里面共六十二页3.6 常用(chn yn)的样式属性属 性CSS名称说 明颜色 color文本属性font-size字体大小font-family字体text-align文本对齐边框属性(用于表单元素) border-style边框样式border-width边框宽度 border-color边框颜色 定位属性(position)top顶部边距（上边距）left左边距width宽度height高度z-indexz 轴索引号，用于层共六十二页3.6 常用的样式(yngsh)属性值一类型CSS属性值字体属性 font-family Arial，serif，宋体 font-size

13、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, overline, line-through text-transform none, capitalize, uppercase, lowercase vertical-align Baseline,

14、 super, sub, top, text-top, middle-bottom, text-bottom word-spacing 度量 letter-spacing 度量共六十二页3.6 常用(chn yn)的样式属性值二类型CSS属性值框属性 border None, solid, double, ridge, inset, outset, groove, dotted dashed border-style 同上 border-width 度量，thick，medium，thin border-color #RRGGBB，颜色名称 margin-top 度量或% Margin-lef

15、t 度量或%定位属性 top 度量 width 度量或% height 度量或% left 度量颜色属性 color #RRGGBB，颜色名称 background-color #RRGGBB，颜色名称，transparent background-image url background-repeat repeat, repeat-x, repeat-y, no-repeat共六十二页第四章： CSS布局(bj)学时(xush)：1.0学时教学方法：讲授ppt + 上机练习目标:本章旨在向学员介绍CSS的布局，通过本课的学习，学员应该掌握如下知识：1）了解div的概念2）能够使用CSS的布局

16、功能共六十二页4.1 divdivdiv.html放置内容(nirng)的容器用于大面积，大区域的块状排版div本身与样式没有任何关系样式需要编写CSS来实现一个较好的样式代码：css_div.html供参考共六十二页4.2 盒模型(mxng)盒模型将所有元素都放置在一个盒子中，然后通过对这个盒子的外观控制来实现整个页面的外观控制一个盒模型包括4个区内容(nirng)（content）内边距（padding）边框（border）外边距（margin）共六十二页4.2 盒模型(mxng)共六十二页4.2 盒模型(mxng)heightborderpadding可见区域contentwidthma

17、rgin共六十二页4.2 内、外补丁(b ding)属性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;共六十二页4.3 CSS布局(bj)设计布局结构采用2层CSS结构既能够统一全站风格，又能够根据不同的页面设计独立的样式如：一个(y )网站中有一个(y )index.h

18、tml文件，可以做设置共六十二页4.4 使用(shyng)div布局使用div布局真正使用div布局，要把页面的内容和表现(bioxin)完全分离开，在页面的内容部分不应该出现表现(bioxin)控制标记，如font、color、height、width、align等标记。使用Div+css设计：1、用div来定义语义结构；2、使用CSS来美化网页3、在div定义的盒子内加入内容共六十二页4.5 使用div布局(bj)-示例参照(cnzho)下面这些步骤完成div布局-示例示例：div_example.html共六十二页4.5.1 布局(bj)步骤11、使用div定义语义结构 一个典型的版面分

19、栏结构：页头、导航栏、内容、版权结构代码：把这四个盒子(h zi)装进一个更大的盒子(h zi)，body中，如下上面四行代码共六十二页4.5.2 布局(bj)步骤2这样，我们定义最外边(wi bian)的大盒子（body）的属性，让它在页面居中，并定义其宽度为760像素，加上边框，如下：body font-family:Arial,Helvetica,sans-serif; font-size:12px; margin:0px auto; height:auto; width:760px; border:1px solid #006633;共六十二页4.5.3 布局(bj)步骤3对于页头，我

20、们应用一幅背景图，并在其下边界(binji)设计一定的间隙，使页头的图片不要和下面的导航栏连在一起，如下：#header height:100px; width:760px; background-image:url(web_head.jpg); background-repeat:no-repeat; margin:0px 0px 3px 0px;共六十二页4.5.4 布局(bj)步骤4对于导航栏，做成像一个个小按钮，鼠标移上去会改变按钮的背景色和字体(zt)色，而这些小按钮我们也可以理解为小盒子，则是一个盒子嵌套的问题了，如下：#nav/*定义一个导航栏的长盒子*/ height:25px

21、; width:760px; font-size:14px; list-style-type:none;/*让nav这个大盒子下面的小盒子LI列表样式不显示,这对于标准浏览器很重要*/ #nav li float:left;/*让LI这些小盒子左对齐*/ 共六十二页4.5.5 布局(bj)步骤5#nav li a color:#000000; text-decoration:none;/*让LI盒子里面的链接样式没有下滑线*/ padding-top:4px; display:block;/*让LI里面的链接块状呈现，就像一个按钮，而不必(bb)一定要点中链接文字才起作用*/ width:97

22、px; height:22px; text-align:center; background-color:#009966; margin-left:2px;共六十二页4.5.6 布局(bj)步骤6#nav li a:hover background-color:#006633;/*鼠标移到链接盒子(h zi)上面改变盒子(h zi)背景色*/ color:#FFFFFF;共六十二页4.5.7 布局(bj)步骤7对于内容部分，主要是放入文章内容，有标题和段落；给标题加粗，使用H标记(bioj)；段落首行缩进2个字，同时所有内容看起来与大盒子的边框要有一定距离，如下：#content height

23、:auto; width:740px; line-height:1.5em; padding:10px;#content p text-indent:2em;#content h3 font-size:16px; margin:10px;共六十二页4.5.8 布局(bj)步骤8对于版权栏，加上背景，与页头呼应，里面的文字要居中对齐(du q)，有多行内容时，行间距合适，如下：#footer height:50px; width:740px; line-height:2em; text-align:center; background-color:#009966; padding:10px;共六

24、十二页4.5.9 布局(bj)步骤9最后，在开头增加如下样式(yngsh)代码，用通配符初始化各标记边界和填充（因为有部分标记默认有一定的边界，如form标记）：* margin:0px; padding:0px;共六十二页4.5.10 布局(bj)步骤10结构代码(di m)如下：首 页文 章相册Blog论 坛帮助共六十二页4.5.11 布局(bj)步骤11前言第一段内容（插入大量文字）理解CSS盒子模式第二段内容（插入大量文字） 关于| 广告服务 | 招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员(huyun)登录 | 购物车Copyright 2006 - 2008 All Rights Reserved共六十二页第五章： 使用(shyng)JavaScript控制CSS学时：0.5学时教学方法：讲授(jingshu)ppt + 上机练习目标:本章旨在向学员介绍怎样使用JavaScript来控制CSS，通过本课的学习，学员应该掌握如下知识：1）可以使用JavaScript改变页面中CSS样式共六十二页5.1 控制(kngzh)CSS-stylestyle对象style.html利用style对象来控制(kngzh)元素的CSSstyle对象包含与每个CSS样式对应的特性，虽然格式不同，但它的样式属性有一定的规律，和CSS样