实用页面设计方法_4_CSS

2010年8月16日星期一6June.2008©NeusoftConfidentialCopyright2008ByNeusoftGroup.Allrightsreserved东软IT人才实训中心实用页面设计方法——CSS课程结构2010年8月16日星期一Confidential内容课时（H）第一章：CSS概述0.2第二章：CSS的样式0.3第三章：CSS基本语法2第四章：CSS布局1第五章：使用JavaScript控制CSS0.5第一章：CSS概述目标:本章旨在向学员介绍CSS的相关概念，通过本课的学习，学员应该掌握如下知识：1）了解CSS的相关概念学时：0.2学时教学方法：讲授ppt2010年8月16日星期一Confidential1.1CSS概述2010年8月16日星期一Confidential•CSS-级联样式表单–CascadingStyleSheet–对WEB页面进行外观控制的机制–将页面的内容和表现分离•CSS版本–目前为止，CSS有两个官方标准：CSS1和CSS2–CSS1的功能在大多数浏览器中都被支持•—nocss.html、css.html1.2示例-无CSS2010年8月16日星期一Confidential1.2示例-有CSS2010年8月16日星期一Confidential1.3CSS优点2010年8月16日星期一Confidential•优点–代码独立，便于控制–样式文件可在浏览器中缓存–便于分工合作–提高了可访问性–提供更多的外观控制手段第二章：CSS的样式目标:本章旨在向学员介绍CSS的样式及将样式表加入到页面中，通过本课的学习，学员应该掌握如下知识：1）了解CSS的样式2）能够使用样式表学时：0.3学时教学方法：讲授ppt+课堂演示2010年8月16日星期一Confidential2.1样式2010年8月16日星期一Confidential•CSS样式–内联样式–嵌入样式–外联样式2.2内联•内联样式—inlineCSS.html–把样式代码内联到标记内•使用style作为属性，样式语句作为属性值•如：•控制table标记的边框样式为不折叠2010年8月16日星期一Confidential2.2内联特点•内联样式特点–看上去很直观–针对个别元素控制–和传统的外观控制方式没有本质的不同–不推荐使用2010年8月16日星期一Confidential2.3嵌入•嵌入样式—internalCSS.html–使用style标记把样式代码插入到页面中–一般插入到head标记中–如：2010年8月16日星期一Confidential2.3嵌入特点2010年8月16日星期一Confidential•特点–将CSS语句直接写在HTML文档中，但它独立存在，方便维护和修改–仅针对一个HTML文档进行设置–代码是HTML文档的一部分，没有利用浏览器的缓存机制2.4外联•外联样式—externalCSS.html–通过外部样式文件对页面进行控制–外部的样式文件通过HTML的link元素连接到HTML文档中2010年8月16日星期一Confidential2.4外联使用•使用–建立外部样式文件（.css）–外部的样式文件不能含有任何像head或style这样的HTML标记–样式表文件仅仅由样式规则或声明组成2010年8月16日星期一Confidential2.4外联特点2010年8月16日星期一Confidential•特点–当样式被应用到很多的网页时，推荐使用外部样式表–网页制作者使用外部样式表，在改变整个网站的外观时，仅需要改变一个文件–大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟–在实际开发中一般都使用外联样式第三章：CSS基本语法目标:本章旨在向学员介绍CSS的基本语法，通过本课的学习，学员应该掌握如下知识：1）了解CSS的基本语法2）了解CSS的选择符3）了解伪类及伪对象学时：2.0学时教学方法：讲授ppt+上机练习2010年8月16日星期一Confidential3.1语法2010年8月16日星期一Confidential•选择符{属性1:属性值1;属性2:属性值2;}–选择符（selector）：指定样式适用的标记，除指定标记外，样式不起作用–属性：样式的关键字–属性值：描述样式的值；–格式：属性与属性之间使用分号分隔，属性与属性值之间使用冒号分隔–如：P{font-size:12pt;color:red;}3.1语法body{color:black}p{font-family:”sansserif”}p{text-align:center;color:red}p{text-align:center;color:black;font-family:arial}如果是多个单词，使用双引号括上如果有多个属性，使用分号将各个属性分隔开注意代码的格式，使可读性更好•使用—html.css2010年8月16日星期一Confidential3.2选择符分类•选择符分类–普通选择符–类选择符–id选择符2010年8月16日星期一Confidential3.2.1普通选择符2010年8月16日星期一Confidential•普通选择符–任意的HTML标记–其样式仅仅作用在选择符指定的HTML元素上–如：•p{color:red}•通用选择符（补充）–其样式作用在所有元素上–如：•*{color:red}3.2.2类选择符•类选择符–同一类型的不同元素通过设置不同CLASS来显示不同样式；但一个元素只能设置一个CLASS属性–HTML元素名加上类名，中间用“.”号分开，类名供该HTML元素的CLASS属性使用–如：使用不同颜色显示，下面例子建立了两个类，OddColor和EvenColor，供tr使用•tr.OddColor{color:red}•tr.EvenColor{color:blue}–如果省略HTML元素名只写“.类名”表示这个类名适用于所有的HTML元素的CLASS属性–下面例子建立了一个类note，可以被任何元素使用–.note{font-size:small;color:red}2010年8月16日星期一Confidential3.2.3id选择符2010年8月16日星期一Confidential•id选择符–个别地定义每个元素的成分–可以作用到任意HTML元素的ID属性上–尽量少用，因为id选择符具有一定的局限（严格来说，在一个页面中，每个id只能使用一次）–要有“#”在名字前面–如•#svp{font-size:12pt}3.2.4关联2010年8月16日星期一Confidential•关联—css_choose.html–是一个用空格隔开的两个或更多的单元选择符组成的字符串–这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大–如•pem{background:yellow}•表示段落（p）中的强调文本（em）是黄色背景，而其它部分的强调文本不受影响3.2.4组合使用•组合使用2010年8月16日星期一Confidential3.2.5练习•练习–建立一个HTML文件，其中有h1-h6标记的文字；–对h1与h2标记使用类型选择符设置样式；–对h3与h4标记使用id选择符设置样式；–对h5标记使用通用的类型选择符设置样式；–对h6标记使用通用的id选择符设置样式–参考css_choose.html，样式可以自己定义。–——css_exercise.html2010年8月16日星期一Confidential3.3样式就近原则•样式就近–并列的定义•当定义重复时，后出现的定义会覆盖前面的定义–对同一结点指定样式，但层次结构不一样—near.html•在层次结构上最接近指定结点的CSS起作用2010年8月16日星期一Confidential3.4伪类及伪对象•伪类及伪对象–由CSS自动支持，属CSS的一种扩展型类–名称不能被用户自定义，只能按照标准格式进行应用–伪类可以应用到不同的元素上，但目前所有浏览器只支持a元素与超链接操作相关的伪类–伪对象只应用在特定对象上2010年8月16日星期一Confidential3.4超链接伪类•a:link{font-size:14px;color:#ffffff;text-decoration:none;}•a:visited{color:#db7093;text-decoration:none;}•a:hover{color:#564b47;}•a:active{color:#000000;}//注意必须保持4个伪类的顺序•a:link{font-size:14px;color:#ffffff;text-decoration:none;}•a:visited{color:#db7093;text-decoration:none;}•a:hover{color:#564b47;}•a:active{color:#000000;}//注意必须保持4个伪类的顺序•示例不容易演示，同html课件中的超链接的样式。•不建议使用。2010年8月16日星期一Confidential3.4常用伪对象•示例：pseudoLetter.html、pseudoLine.htmldiv:first-line{color:red;font-size:16px;}div:first-line{color:red;font-size:16px;}p:first-letter{color:red;font-size:16px;}p:first-letter{color:red;font-size:16px;}2010年8月16日星期一Confidential3.5注释•注释–/**/，但要注意不要将注释嵌入到选择器语句里面2010年8月16日星期一Confidential3.6常用的样式属性2010年8月16日星期一Confidential属性CSS名称说明颜色colorfont-size字体大小font-family字体文本属性text-align文本对齐border-style边框样式border-width边框宽度border-color边框颜色top顶部边距（上边距）left左边距width宽度height高度z-indexz轴索引号，用于层定位属性(position)边框属性(用于表单元素)3.6常用的样式属性值一2010年8月16日星期一Confidential类型CSS属性值font-familyArial，serif，宋体…font-sizeSmall，medium，large…或直接指定字体大小font-stylenormal,italic…font-weightnormal,bold,lighter,100,200…text-alignleft,right,center,justifytext-indent度量或%text-decorationnone,blink,underline,overline,line-throughtext-transformnone,capitalize,uppercase,lowercasevertical-alignBaseline,super,sub,top,text-top,middle-bottom,text-bottomword-spacing度量letter-spacing度量文本属性字体属性3.6常用的样式属性值二类型CSS属性值borderNone,solid,double,ridge,inset,outset,groove,dotteddashedborder-style同上border-width度量，thick，medium，thinborder-color#RRGGBB，颜色名称margin-top度量或%Margin-left度量或%top度量width度量或%height度量或%left度量color#RRGGBB，