层次样式表(CSS).ppt

层次样式表(CSS).ppt

《层次样式表(CSS).ppt》由会员分享，可在线阅读，更多相关《层次样式表(CSS).ppt（41页珍藏版）》请在冰豆网上搜索。

应用系统开发导论层次样式表（CSS）1内容内容CCS基础XHTML和CSS结合的方式CSS的高级语法CSS的特性举例小结2层次样式表的起源和优点层次样式表的起源和优点在最初版本的HTML中并不提供任何样式控制能力，它只是标明文档成分的功能，1995年晚期，W3C提出了CSS作为所有这些问题的解决方案。

CascadingStylesSheet1996年提出了第一个版本，也是目前主流支持的规范1998年提出了第二个版本，可以实现XML的转换和样式化，增加了特定媒体的风格单CSS3便于对文档样式进行修改、便于维护多个文档以统一的样式、使HTML文档更简洁,更易于维护、使文档可以方便运行于不同媒体设备上等3层次样式表基本语法还可以添加注释文本，注释文本须放置在/*和*/之间。

pfont-size:

12pt;font-style:

italic;color:

greenSelectorPropertylistseparatedbysemicolonsPropertyPropertyvalueColon4XHTML与样式表结合的三种方法与样式表结合的三种方法外部式样式表（Externalstylesheet，又称链接样式表）内嵌式样式表（Embeddedstylesheet）行内样式表（Inlinestyle，又称内联样式表）5外部式样式表外部式样式表外部样式表合适作为文档模板，同时供一系列XHTML文档共用。

使用外部式样式表时，我们将样式表保存在一个后缀名为.css的单独文本文件中/*Thisisthestylesheettobelinked*/pcolor:

red;h1color:

green;6XHMTL代码代码exampleforexternalcssThisisH1elementLetsseetheeffectiveofcss7内嵌式样式表内嵌式样式表只是一个页面使用style需要将样式表放置与head元素的style子元素中。

此时需将style元素的type元素设置为“text/css”8exampleforembededcssThisisH1elementLetsseetheeffectiveofcss9行内样式表行内样式表行内样式表可用于将某个具体的元素定义为一个与其他不同的样式，但是由于其损害了样式表的优点，所以一般不推荐使用。

行内样式表将样式表内容作为XHTML元素的通用属性style的属性值。

ThisisH1element10exampleforinlinecssThisisH1elementLetsseetheeffectiveofcss11层次样式表高级语法层次样式表高级语法样式表的组合带上下文的样式表样式类样式表的继承和覆盖12样式表的组合样式表的组合样式表的组合可以分为针对多个元素组合样式表和使用某些特性来组合样式表两类两个不同元素可能有着相同的样式表h1,pfont-size:

12pt;font-weight:

bold;color:

red有时某个元素的若干样式特性都跟某类样式如字体有关pfont:

bold20pt;13exampleforstylecompositionThisisH1elementLetsseetheeffectiveofcss14exampleforstylecomposition2ThisisH1elementLetsseetheeffectiveofcss15带上下文的样式表带上下文的样式表时我们希望某些元素在不同的上下文环境中体现不同的样式，典型的就是li元素，我们可能希望作为ol元素子元素的li元素和作为ul元素的li元素能够体现不同的样式，为此样式表语法中提供了带上下文的样式表语法。

我们可以通过指定元素的父元素的方法来指定上下文：

将父元素和子元素之间用空格隔开，后跟包含在大括号中的特性列表，ollifont:

12ptbold;color:

red16exampleforcontext-awarestyleThisisH1elementolli1olli2ulli1ulli217样式类样式类很多时候我们希望对页面有非常精确的控制能力，如可以为任意一个元素指定样式，或为任意某几个元素指定相同的样式。

为此样式表的语法中提供了样式类的相关概念。

如果希望为任意一个元素指定样式，这就需要用到元素的id通用属性。

#selectfont:

14ptbold;color:

green如果为任意某几个元素指定相同的样式，则需要用到元素的class通用属性.selectfont:

14ptbold;color:

green18exampleforstylewithidpropertyTheWildSwansatCooleWilliamButlerYeatsThetreesareintheirautumnbeauty,Thewoodlandpathsaredry,UndertheOctobertwilingtthewaterMirrorsastillsky;.19exampleforstylewithclassTheWildSwansatCooleWilliamButlerYeatsThetreesareintheirautumnbeauty,Thewoodlandpathsaredry,UndertheOctobertwilingtthewaterMirrorsastillsky;.20样式类样式类我们还可以通过样式类与元素名的组合实现更精确的控制，此时是将元素名置于样式类之前div.selectfont:

16ptbold;color:

green或div#selfont:

18ptbold;color:

green21样式表的继承和覆盖样式表的继承和覆盖当元素发生嵌套时，子元素的样式将会与父元素的相同，样式表的这个特性称为样式表的继承。

22exampleforstyleinheritTheWildSwansatCooleWilliamButlerYeatsThetreesareintheirautumnbeauty,Thewoodlandpathsaredry,UndertheOctobertwilingtthewaterMirrorsastillsky;.23样式的冲突与解决样式的冲突与解决果我们同时在一个XHTML文档中使用一种以上的方法，就有可能在不同的方法中对同一个元素多次指定样式，此时就会发生样式冲突的问题。

此外，由于样式表的继承语法的存在，当样式表中为父元素和子元素指定了不同语法的时候，也会产生冲突的问题。

样式表语法中使用样式表的覆盖这个概念来处理这个问题。

样式表的覆盖语法指出，当发生样式冲突时，对于子元素中的内容，子元素的样式覆盖父元素的样式；行内样式覆盖内嵌样式；内嵌样式覆盖外部样式。

24exampleforstyleoverwriteTheWildSwansatCooleWilliamButlerYeatsThetreesareintheirautumnbeauty,Thewoodlandpathsaredry,UndertheOctobertwilingtthewaterMirrorsastillsky;.25层次样式表特性举例层次样式表特性举例颜色与背景元素框属性字体与文本元素绝对定位26颜色与背景颜色与背景样式表中与颜色相关的特性主要是color和background-color两项，分别用于指定元素的前景色和背景色。

其值可以是用颜色英文名、十六进制数字或是十进制数字指定的某种颜色27exampleforstyleofcolorTheWildSwansatCooleWilliamButlerYeatsThetreesareintheirautumnbeauty,Thewoodlandpathsaredry,UndertheOctobertwilingtthewaterMirrorsastillsky;.28exampleforstyleofbackgroundTheWildSwansatCooleWilliamButlerYeatsThetreesareintheirautumnbeauty,Thewoodlandpathsaredry,UndertheOctobertwilingtthewaterMirrorsastillsky;.29元素框属性元素框属性30长度单位长度单位相对单位包括：

em标准字体中字母m的高度en标准字体中字母n的高度ex标准字体中字母x的高度px象素%百分比绝对单位包括：

in英寸cm厘米mm毫米pt点（1pt=1/72英寸）pc12点（1pc=12pt）31exampleforborderofelementThisisH1elementLetsseetheeffectiveofcss32exampleofmarginThisisH1elementLetsseetheeffectiveofcss33exampleforpadding1-11-22-12-234字体与文本字体大类的特性包括简化特性font，用于统一设置所有与字体相关特性值。

font-family,用于设定字体名称，如“宋体”；或者类属系列名，如“serif”；如果指定的字体不存在，则使用默认字体。

font-size，用于指定字体尺寸，一般以pt或pc为单位。

font-style，用于指定字体风格，如粗体、斜体等。

font-variant，用于指定字体是否需要全部大写或小写。

font-weight，用于指定字体的灰度，指示浏览器使用比标准更浅或更深的字体。

35exampleforfontSampleoffamilySampleofsizeSampleofstyleSampleofvariantSampleofweightSampleofmyfont36examplefortextTheWildSwansatCooleWilliamButlerYeatsThetreesareintheirautumnbeauty,Thewoodlandpathsaredry,UndertheOctobertwilingtthewaterMirrorsastillsky;UponthebrimmingwateramongthestonesArenine-and-fiftyswans.37元素绝对定位元素绝对定位传统的XHTML只能按照元素在页面中出现的顺序逐一排列，而CCS为XHTML的页面设计定位元素提供了另一种可能，特别是元素的绝对位置定位，是XHTML没有的。

因此，这一特性非常重要。

38AbsolutePositioningPositionedText39演示演示40小结小结CSSCSS的用法CSS的特性41