WEB前台技术3-CSS

3Sept.2008©NeusoftConfidentialWEB前台技术——CSS东软人才实训中心课程结构内容第一章：CSS概述第二章：CSS的样式第三章：CSS基本语法第四章：CSS布局综合练习第一章：CSS概述目标:本章旨在向学员介绍CSS的相关概念及优点，通过本课的学习，学员应该掌握如下知识：1）了解CSS的概念2）了解CSS的优点教学方法：讲授ppt概述•CSS（CascadingStyleSheet）级联样式表、层叠样式表9在W3C标准中被定义为“一种对Web页面进行外观控制的机制”9CSS和HTML、JavaScript是并列的3种用于Web开发的技术•CSS开始是为HTML文档设计的9定义文档样式9CSS被设计用来替代传统的HTML表现代码9将文档的内容与表现分离开•使用CSS的原因9可以控制许多仅使用HTML无法控制的属性9CSS能够保持页面在平台不同的浏览器设置环境下显示正常示例优点•CSS优点9样式代码独立于HTML页面，有利于进行站点的统一控制9样式文件可在浏览器中缓存，节省带宽，提高加载速度9提高开发效率，有利于分工合作9由于HTML页面中不再包含大量的表现代码，提高了可访问性9控制外观更加容易9提供比传统HTML更多的外观控制手段第二章:CSS的样式目标:本章旨在向学员介绍CSS的样式及怎样将样式表加入到HTML中，通过本课的学习，学员应该掌握如下知识：1）了解CSS的样式2）能够将样式表加入到HTML中教学方法：讲授ppt＋课堂演示样式•CSS的样式9按CSS代码的位置划分¾内嵌样式（InternalStyleSheet）：嵌入一个样式块¾行内样式（InlineStyle）¾外联样式（ExternalStyleSheet）：链接一个样式文件•将样式表加入到HTML中9内嵌样式表9行内样式表9外联样式表★写在HTML文档内部CSS是一个外部文档CSS使用—行内•行内样式-InlineStyles示例：inlineCSS.html9将样式代码直接内联到标记内，以style作为属性，语句作为属性值9style属性可以包含任意的CSS值9使用style控制table标记的边框样式为不折叠•行内样式特点9看上去很直观9仅针对个别元素进行控制9将外观控制代码散布于整个HTML文档，和传统的外观控制方式没有本质的不同9一般不推荐使用标签名style= “样式属性:取值;样式属性名:取值;…”CSS使用—内嵌•嵌入样式-InternalStyleSheet示例：internalCSS.html9使用style标记将一段CSS语句插入到HTML文档层次结构中9一般将这段CSS语句作为一个独立部分插入在head和/head标记之间•嵌入样式的特点9也是将CSS语句直接写在HTML文档中，但它做为一个独立的标记块存在，维护和修改都要方便得多9利用CSS规则来选择标记9嵌入样式仅能够针对一个HTML文档进行设置，无法与多个文档关联，一般用于控制一些针对性强的独立样式9嵌入样式是HTML文档的一部分，仍然有需要重复加载的问题，无法利用浏览器的缓存机制CSS使用—外联★•外联样式-ExternalStyleSheet9通过外部样式文件对页面进行控制9建立外部样式文件（.css）9外部的样式文件可以通过HTML的link元素连接到HTML文档中9link标记放置在文档的head部分CSS使用—外联★•外联样式-ExternalStyleSheet示例：externalCSS.htmlStyle.css9建立外部样式文件（.css）9外部的样式文件不能含有任何像head或style这样的HTML标记9样式表文件仅仅由样式规则或声明组成CSS使用—外联•外联样式的特点9当样式被应用到很多的网页时，一个外部样式表是昀理想的9网页制作者使用外部样式表，在改变整个网站的外观时，仅需要改变一个文件9大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟9在实际开发中一般都使用外联样式第三章：CSS基本语法目标:本章旨在向学员介绍CSS的基本语法，通过本课的学习，学员应该掌握如下知识：1）知道CSS的基本语法2）了解CSS的选择符3）了解CSS的伪类及伪对象教学方法：讲授ppt＋课堂演示+上机练习CSS基本语法★•CSS语法的三个构成部分9选择符9属性9属性值selector{样式属性:取值；样式属性:取值；…}CSS基本语法★•格式body{color:block}p{font-family:”sansserif”}p{text-align:center;color:red}p{text-align:center;color:black;font-family:arial}如果是多个单词，使用双引号括上如果有多个属性，使用分号将各个属性分隔开注意代码的格式，使可读性更好CSS基本语法—选择符★•选择符9使用一定的规则来指定一个或一组标记，从而对它们进行统一的外观控制9选择符分类¾标签选择符¾类选择符¾Id选择符¾关联选择符选择符CSS基本语法—选择符•选择符9每个选择器后面都跟着一组属性，这些属性用大括号括起来，以分号隔开9每组属性包括属性名称和属性值CSS基本语法—选择符★•标签选择符9指定该标签的样式9如：所有使用h1标签的元素的字体颜色都为红h1{color:red}•在HTML文档的body元素内引用方式标签名{样式属性：取值；样式属性：取值；…}标签名文本/标签名练习：bg-css.html.CSS.htmlCSS基本语法—选择符★•类选择符9可以把相同的元素分类定义成不同的样式。9类名可以是任意英文单词或以英文开头与数字的组合¾如：使用不同颜色显示，下面例子建立了两个类，OddColor和EvenColor，供tr使用–.OddColor{color:#00ff00}–.EvenColor{color:#ff0000}9在HTML文档的body元素内引用方式.类名{样式属性：取值；样式属性：取值；…}标签名class=“类名”文本/标签名练习：footer-css.htmldefault.css.CSS.htmlCSS基本语法—选择符★•ID选择符9对用ID标识的元素定义单独的样式9标识可以是任意英文单词或以英文开头与数字的组合¾如：设置标识为logo的元素的背景颜色#logo{background-color:#00ff00}9在HTML文档的body元素内引用方式#标识名{样式属性：取值；样式属性：取值；…}标签名id=“标识名”文本/标签名.CSS.html练习：header-css.htmldefault.cssCSS基本语法—选择符★•关联选择符（包含选择符）9对某种元素包含关系（如元素1里包含元素2）定义的样式9这种方式只对元素1里的元素2定义，对单独的元素1或单独的元素2无定义¾表示段落（p）中的超链接（a）的文本大小是12px，而其它部分的超链接文本不受影响选择符名选择符名…选择符名{样式属性：取值；样式属性：取值；…}pa{font-size:12px}示例：css_include.htmlCSS基本语法—选择符★•群组选择符（GroupSelectors）9为了减少样式表的重复声明，组合的选择器声明是允许的CSS基本语法—选择符★•组合选择符9对于所有CSS选择符，无论是什么样的选择符，均可以进行组合使用CSS基本语法—属性属性CSS名称说明颜色color字体颜色font-size字体大小font-family字体文本属性text-align文本对齐border-style边框样式border-width边框宽度border-color边框颜色top顶部边距（上边距）left左边距width宽度height高度z-indexz轴索引号，用于层定位属性(position)边框属性(用于表单元素)•CSS的基本语法-属性（简略了解、参考CSS2.0帮助手册）CSS基本语法—属性类型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度量文本属性字体属性CSS基本语法—属性类型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，颜色名称background-color#RRGGBB，颜色名称，transparentbackground-imageurlbackground-repeatrepeat,repeat-x,repeat-y,no-repeat颜色属性定位属性框属性CSS盒模型★•盒模型9CSS中所有元素的定位都是基于盒状模型的，如p、div、body、a等。9将所有HTML元素都放置在一个盒子中，然后通过对这个盒子的外观控制来实现整个页面的外观控制9一个盒模型包括4个区¾内容（content）¾内边距（padding）¾边框（border）¾外边距（margin）CSS盒模型★伪类及伪元素★•伪类及伪元素（伪对象）9一种特殊的类和元素9伪类及伪元素的名称不能被用户自定义，系统预定义好的类别9伪类及伪元素使用时只能按照标准格式进行应用伪元素★•CSS内置的标准伪元素–示例：pseudoLetter.html–示例：pseudoLine.html伪类★•CSS内置的标准伪类Pseudo-classes–练习：navigator-css.htmldefault.css–注意：定义超链接伪类必须安装：LoVe/HAte的顺序继承•继承9CSS的继承性，也被称为样式表的层叠性9在CSS中，一些样式是可继承的¾当父结点定义了一些样式，其子结点也会具有相同的样式–如字体，文本的定义9一些样式是不可继承的–如边框，间距，布局，定位等9设计HTML文档显示样式时，不必对每个元素的属性都进行设置样式就近原则•样式就近原则9在CSS中，常常会有需要重复的定义出现，对同一结点的某些样式重复定义9并列的定义¾当定义重复时，后出现的定义会覆盖前面的定义样式就近原则•样式就近原则9对同一结点指定样式，但选择符的层次结构不一样9在层次结构上昀接近指定结点的CSS起作用9不同的选择符定义相同的元素时，优先级为：ID选择符、类选择符和标记选择符CSS注释•在CSS中添加注释9/**/注释，但要注意不要将注释嵌入到选择器语句里面第四章：CSS布局目标:本章旨在向学员介绍CSS的布局，通过本课的学习，学员应该掌握如下知识：1）了解div的概念2）会使用CSS的布局功能教学方法：讲授ppt+课堂演示+上机练习页面布局•表格布局9代码过长9难于维护•框架（frameset）布局•div+CSS布局9代码简洁9维护方便div•div/div标签示例