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