web实用网页设计方法css-4

Web实用网页设计方法WebWeb实用网页设计方法实用网页设计方法杨巍[e-mail]tiontoCSSCSS2Web实用网页设计方法AgendazCSS概述zCSS设置方式zCSS基本语法zCSS样式属性zCSS框模型3Web实用网页设计方法CSS概述„目标本章旨在介绍CSS的相关概念，通过本课的学习，应该掌握如下知识：1）了解CSS的相关概念学时：0.2学时教学方法：讲授ppt＋课堂演示4Web实用网页设计方法CSS„CSS(CascadingStylesheet)层叠样式表„在W3C标准中被定义为“一种对Web页面进行外观控制的机制”„CSS和HTML、JavaScript是并列的3种用于Web开发的技术„CSS能够将文档的格式化信息与文档的正文分离开来5Web实用网页设计方法CSS„样式解决了一个普遍的问题„HTML标签原来被设计为用来定义文档内容„文档布局由浏览器来完成，而不使用任何的格式化标签„创建文档内容清晰地独立于文档表现层的站点变得越来越困难„新的HTML标签和属性添加到HTML规范中„W3C在HTML4.0之外创造出样式Style6Web实用网页设计方法CSS„CSS的基本概念„CSS由一定的语法组成，对Web页面元素的外观进行控制„CSS通过一定的机制与特定文档相关联，对此文档进行样式控制„能够为每个HTML元素定义样式，并将之应用于希望的任意多的页面中„可进行全局的更新样式7Web实用网页设计方法htmlheadtitleNoCSSExample/title/headbodyfontface=Helveticacolor=redh31.whatistheCascadingStyleSheet/h3/fontbr/fontface=Helveticacolor=redh32.HowtoformatXMLdocument/h3/fontbr/fontface=Helveticacolor=redh33.UsingCSSinHTMLdocument/h3/fontbr/fontface=Helveticacolor=redh34.UsingCSSinXMLdocument/h3/font/body/htmlnocss.html8Web实用网页设计方法htmlheadtitleCSSExample/titlestyletype=text/cssh3{font-family:Helvetica;color:red}/style/headbodyh31.whatistheCascadingStyleSheet/h3br/h32.HowtoformatXMLdocument/h3br/h33.UsingCSSinHTMLdocument/h3br/h34.UsingCSSinXMLdocument/h3/body/htmlcss.html9Web实用网页设计方法AgendazCSS概述zCSS设置方式zCSS基本语法zCSS样式属性zCSS框模型10Web实用网页设计方法CSS设置方式„目标本章旨在介绍CSS的样式及将样式表加入到页面中，通过本课的学习，应该掌握如下知识：1）了解CSS的样式2）能够使用样式表学时：0.3学时教学方法：讲授ppt＋课堂演示11Web实用网页设计方法CSSStyle„CSSStyle„按CSS代码的位置划分„内联样式InlineStyles„内部样式InternalStyleSheet„EmbeddingaStyleBlock„外部样式ExternalStyleSheet„LinkingtoaStyleSheet12Web实用网页设计方法将样式表加入到HTML中„将样式表加入到HTML中„新的HTML元素和属性已被加入以允许样式表与HTML文档更简易地组合起来„InlineStyles„InternalStyleSheet„ExternalStyleSheet„导入样式表13Web实用网页设计方法InlineStyles„内联样式InlineStyles„将样式代码直接内联到标记内，以style作为属性，语句作为属性值„ThestyleattributecancontainanyCSSproperty.tablestyle=border-collapse:collapse设置表格的边框是否被合并为一个单一的边框14Web实用网页设计方法htmlheadtitleinlineCSS/title/headbodyh11.whatistheCascadingStyleSheet/h3br/h22.HowtofomatXMLdocument/h3br/h33.UsingCSSinHTMLdocument/h3br/h44.UsingCSSinXMLdocument/h3br/pstyle=color:red;margin-left:20pxThisisaparagraph/p/body/htmlinlineCss.html15Web实用网页设计方法InlineStyles„InlineStyles„看上去很直观„仅针对个别元素进行控制„将外观控制代码散布于整个HTML文档，和传统的外观控制方式没有本质的不同„一般不推荐使用16Web实用网页设计方法InternalStyleSheet„内部样式InternalStyleSheet„使用style标记将一段CSS语句插入到HTML文档层次结构中„一般将这段CSS语句作为一个独立部分插入在head和/head标记之间headstyletype=text/cssCSS语句/style/head17Web实用网页设计方法htmlheadtitleinternalCSS/titlestyletype=text/css!--body{font:10ptArial}h1{font:15ptArial;font-weight:bold;color:maroon}h2{font:13ptArial;font-weight:bold;color:blue}p{font:10ptArial;color:black}--/style/headbodyh31.whatistheCascadingStyleSheet/h3br/h32.HowtofomatXMLdocument/h3br/h33.UsingCSSinHTMLdocument/h3br/h34.UsingCSSinXMLdocument/h3/body/htmlinternalCss.html18Web实用网页设计方法htmlheadtitleinternalCSS/titlestyletype=text/css!--body{font:10ptArial}h1{font:15ptArial;font-weight:bold;color:maroon}h2{font:13ptArial;font-weight:bold;color:blue}p{font:10ptArial;color:black}--/style/headbodyh31.whatistheCascadingStyleSheet/h3br/h32.HowtofomatXMLdocument/h3br/h33.UsingCSSinHTMLdocument/h3br/h34.UsingCSSinXMLdocument/h3/body/htmlinternalCss.htmlstyletype=text/css!----/styleCSS语句的容器19Web实用网页设计方法htmlheadtitleinternalCSS/titlestyletype=text/css!--body{font:10ptArial}h1{font:15ptArial;font-weight:bold;color:maroon}h2{font:13ptArial;font-weight:bold;color:blue}p{font:10ptArial;color:black}--/style/headbodyh31.whatistheCascadingStyleSheet/h3br/h32.HowtofomatXMLdocument/h3br/h33.UsingCSSinHTMLdocument/h3br/h34.UsingCSSinXMLdocument/h3/body/htmlinternalCss.html!----是为了使不兼容CSS的浏览器忽略这段内容，避免将其显示在页面中20Web实用网页设计方法InternalStyleSheet„InternalStyleSheet„将CSS语句直接写在HTML文档中，但它做为一个独立的标记块存在，维护和修改都要方便得多„内部样式仅能够针对一个HTML文档进行设置，无法与多个文档关联，一般用于控制一些针对性强的独立样式„内部样式是HTML文档的一部分，仍然有需要重复加载的问题，无法利用浏览器的缓存机制21Web实用网页设计方法ExternalStyleSheet„外部样式ExternalStyleSheet„通过外部样式文件对页面进行控制„建立外部样式文件(.css)„外部的样式文件可以通过HTML的link元素连接到HTML文档中„link标记是放置在文档的HEAD部分linkrel=stylesheethref=mystyle.csstype=text/css/22Web实用网页设计方法ExternalStyleSheetlinkrel=stylesheethref=mystyle.csstype=text/css/href属性指定了样式文件的相对地址rel和type属性表明这是一个样式文件23Web实用网页设计方法ExternalStyleSheet„外部样式„建立外部样式文件(.css)„外部样式表不能含有任何的HTML标签„样式表仅仅由样式规则或声明组成mystyle.cssh3{font-family:Helvetica;color:red}24Web实用网页设计方法htmlheadtitleExternalCSS/titlelinkrel=stylesheethref=css/mystyle.csstype=text/css//headbodyh31.whatistheCascadingStyleSheet/h3br/h32.HowtofomatXMLdocument/h3br/h33.UsingCSSinHTMLdocument/h3br/h34.UsingCSSinXMLdocument/h3/body/htmlexternalCss.htmlmystyle.cssh3{font-family:Helvetica;color:red}25Web实用网页设计方法ExternalStyleSheet„外部样式„当样式被应用到很多的网页时，一个外部样式表是理想的„网页制作者使用外部样式表可以改变整个网站的外观而仅仅通过改变一个文件„大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟„在实际开发中一般都使用外部样式