层次样式表.pptx

1应用系统开发导论层次样式表（CSS）2内容内容CCS基础XHTML和CSS结合的方式CSS的高级语法CSS的特性举例小结3层次样式表的起源和优点层次样式表的起源和优点 在最初版本的HTML中并不提供任何样式控制能力，它只是标明文档成分的功能，1995年晚期，W3C提出了CSS作为所有这些问题的解决方案。Cascading Styles Sheet 1996年提出了第一个版本，也是目前主流支持的规范 1998年提出了第二个版本，可以实现XML的转换和样式化，增加了特定媒体的风格单 CSS3便于对文档样式进行修改、便于维护多个文档以统一的样式、使HTML文档更简洁,更易于维护、使文档可以方便运行于不同媒体设备上等 4层次样式表基本语法 还可以添加注释文本，注释文本须放置在/*和*/之间。p font-size:12pt;font-style:italic;color:greenSelectorProperty list separated by semicolonsPropertyProperty valueColon5XHTML与样式表结合的三种方法与样式表结合的三种方法 外部式样式表（External style sheet，又称链接样式表）内嵌式样式表（Embedded style sheet)行内样式表（Inline style，又称内联样式表）6外部式样式表外部式样式表外部样式表合适作为文档模板，同时供一系列XHTML文档共用。使用外部式样式表时，我们将样式表保存在一个后缀名为.css的单独文本文件中/*This is the style sheet to be linked*/p color:red;h1color:green;7XHMTL代码代码example for external cssThis is H1 elementLets see the effective of css8内嵌式样式表内嵌式样式表只是一个页面使用style需要将样式表放置与head元素的style子元素中。此时需将style元素的type元素设置为“text/css”9example for embeded cssThis is H1 elementLets see the effective of css 10行内样式表行内样式表 行内样式表可用于将某个具体的元素定义为一个与其他不同的样式，但是由于其损害了样式表的优点，所以一般不推荐使用。行内样式表将样式表内容作为XHTML元素的通用属性style的属性值。This is H1 element11example for inline cssThis is H1 elementLets see the effective of css 12层次样式表高级语法层次样式表高级语法样式表的组合带上下文的样式表样式类样式表的继承和覆盖13样式表的组合样式表的组合样式表的组合可以分为针对多个元素组合样式表和使用某些特性来组合样式表两类 两个不同元素可能有着相同的样式表 h1,pfont-size:12pt;font-weight:bold;color:red 有时某个元素的若干样式特性都跟某类样式如字体有关pfont:bold 20pt;14example for style compositionThis is H1 elementLets see the effective of css 15example for style composition 2This is H1 elementLets see the effective of css 16带上下文的样式表带上下文的样式表 时我们希望某些元素在不同的上下文环境中体现不同的样式，典型的就是li元素，我们可能希望作为ol元素子元素的li元素和作为ul元素的li元素能够体现不同的样式，为此样式表语法中提供了带上下文的样式表语法。我们可以通过指定元素的父元素的方法来指定上下文：将父元素和子元素之间用空格隔开，后跟包含在大括号中的特性列表，ol lifont:12pt bold;color:red 17example for context-aware styleThis is H1 elementol li1ol li2ul li1ul li2 18样式类样式类很多时候我们希望对页面有非常精确的控制能力，如可以为任意一个元素指定样式，或为任意某几个元素指定相同的样式。为此样式表的语法中提供了样式类的相关概念。如果希望为任意一个元素指定样式，这就需要用到元素的id通用属性。#selectfont:14pt bold;color:green如果为任意某几个元素指定相同的样式，则需要用到元素的class通用属性.selectfont:14pt bold;color:green19example for style with id propertyThe Wild Swans at Coole William Butler Yeats The trees are in their autumn beauty,The woodland paths are dry,Under the October twilingt the waterMirrors a still sky;.20example for style with classThe Wild Swans at Coole William Butler Yeats The trees are in their autumn beauty,The woodland paths are dry,Under the October twilingt the waterMirrors a still sky;.21样式类样式类我们还可以通过样式类与元素名的组合实现更精确的控制，此时是将元素名置于样式类之前 div.selectfont:16pt bold;color:green 或div#selfont:18pt bold;color:green22样式表的继承和覆盖样式表的继承和覆盖当元素发生嵌套时，子元素的样式将会与父元素的相同，样式表的这个特性称为样式表的继承。23example for style inheritThe Wild Swans at Coole William Butler Yeats The trees are in their autumn beauty,The woodland paths are dry,Under the October twilingt the waterMirrors a still sky;.24样式的冲突与解决样式的冲突与解决果我们同时在一个XHTML文档中使用一种以上的方法，就有可能在不同的方法中对同一个元素多次指定样式，此时就会发生样式冲突的问题。此外，由于样式表的继承语法的存在，当样式表中为父元素和子元素指定了不同语法的时候，也会产生冲突的问题。样式表语法中使用样式表的覆盖这个概念来处理这个问题。样式表的覆盖语法指出，当发生样式冲突时，对于子元素中的内容，子元素的样式覆盖父元素的样式；行内样式覆盖内嵌样式；内嵌样式覆盖外部样式。25example for style overwrite The Wild Swans at Coole William Butler Yeats The trees are in their autumn beauty,The woodland paths are dry,Under the October twilingt the water Mirrors a still sky;.26层次样式表特性举例层次样式表特性举例颜色与背景元素框属性字体与文本元素绝对定位27颜色与背景颜色与背景样式表中与颜色相关的特性主要是color和background-color两项，分别用于指定元素的前景色和背景色。其值可以是用颜色英文名、十六进制数字或是十进制数字指定的某种颜色 28example for style of colorThe Wild Swans at CooleWilliam Butler Yeats The trees are in their autumn beauty,The woodland paths are dry,Under the October twilingt the water Mirrors a still sky;.29example for style of backgroundThe Wild Swans at CooleWilliam Butler Yeats The trees are in their autumn beauty,The woodland paths are dry,Under the October twilingt the water Mirrors a still sky;.30元素框属性元素框属性31长度单位长度单位相对单位包括：em标准字体中字母m的高度en标准字体中字母n的高度ex标准字体中字母x的高度px象素%百分比绝对单位包括：in英寸cm厘米mm毫米pt点(1pt=1/72英寸)pc12点(1pc=12pt)32example for border of elementThis is H1 elementLets see the effective of css 33example of marginThis is H1 elementLets see the effective of css 34example for padding1-11-22-12-2 35字体与文本字体大类的特性包括简化特性font，用于统一设置所有与字体相关特性值。font-family,用于设定字体名称，如“宋体”；或者类属系列名，如“serif”；如果指定的字体不存在，则使用默认字体。font-size，用于指定字体尺寸，一般以pt或pc为单位。font-style，用于指定字体风格，如粗体、斜体等。font-variant，用于指定字体是否需要全部大写或小写。font-weight，用于指定字体的灰度，指示浏览器使用比标准更浅或更深的字体。36example for fontSample of familySample of sizeSample of styleSample of variantSample of weightSample of myfont 37example for textThe Wild Swans at Coole William Butler Yeats The trees are in their autumn beauty,The woodland paths are dry,Under the October twilingt the waterMirrors a still sky;Upon the brimming water among the stonesAre nine-and-fifty swans.38元素绝对定位元素绝对定位传统的XHTML只能按照元素在页面中出现的顺序逐一排列，而CCS为XHTML的页面设计定位元素提供了另一种可能，特别是元素的绝对位置定位，是XHTML没有的。因此，这一特性非常重要。39Absolute PositioningPositioned Text 40演示演示41小结小结CSSCSS的用法CSS的特性