9重叠样式表CSS

第9章层叠样式表CSS技术使用层叠样式表(CSS)设置网页格式CSS能更加灵活自如地控制网页的外观中国人民大学王蓉内容什么是CSS何处使用CSSCSS基本语法在Dreamweaver中定义CSS课堂任务通过一个示例，介绍如何使用CSS来设置文本格式和定位文本中国人民大学王蓉什么是CSSCSSCascadingStyleSheets层叠样式表为了解决内容与表现分离而制定的一系列格式设置规则，用以控制Web网页内容的外观样式定义如何显示HTML元素样式通常存储在样式表中多个样式可以层叠中国人民大学王蓉体验访问网站ZenGarden，感受一下CSS的魅力内容和表现相分离提高搜索引擎对网页索引效率代码简洁，提高页面浏览速度易于维护和改版什么是CSS中国人民大学王蓉样式解决了表现和内容相分离HTML标签原本被设计为用于定义文档内容。通过使用h1、p、table这样的标签，HTML的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息文档布局由浏览器来完成，而不使用任何的格式化标签。由于两种主要的浏览器（Netscape和InternetExplorer）不断地将新的HTML标签和属性（比如字体标签和颜色属性）添加到HTML规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。什么是CSS中国人民大学王蓉样式解决了表现和内容相分离为了解决这个问题，万维网联盟（W3C），肩负起了HTML标准化的使命，并在HTML4.0之外创造出样式（Style）。网页内容（HTML代码）位于自身的HTML文件中定义代码表现形式的CSS规则位于另一个文件（外部样式表）或HTML文档的另一部分（通常为head部分）中。什么是CSS中国人民大学王蓉样式表更加灵活和高效使用CSS可以非常灵活并更好地控制网页的外观，从精确的布局定位到特定的字体和样式等。使用CSS可以控制许多仅使用HTML无法控制的属性。例如，可以为所选文本指定不同的字体大小和单位（像素、磅值等）。还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。容易更新；只要对一处CSS规则进行更新，则使用该定义样式的所有文档的格式都会自动更新为新样式。什么是CSS中国人民大学王蓉多重样式可层叠为一个“层叠”是指对同一个元素或Web页面应用多个样式的能力。样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中；在HTML文档的头元素中；或在一个外部的CSS文件中；甚至可以在同一个HTML文档内部引用多个外部样式表。例如，可以创建一个CSS规则来应用颜色，创建另一个规则来应用边距，然后将两者应用于一个页面中的同一文本。所定义的样式“层叠”到Web页面上的元素，并最终创建想要的设计。什么是CSS中国人民大学王蓉内容什么是CSS何处使用CSSCSS基本语法在Dreamweaver中定义CSS课堂任务通过一个示例，介绍如何使用CSS来设置文本格式和定位文本中国人民大学王蓉何处使用CSSCSS按其位置可以分成三种：外部样式表（ExternalStyleSheet）定义在外部的CSS文件中内部样式表（InternalStyleSheet）定义在HTML文档的头部内联样式（InlineStyle）定义在具体的HTML元素内优先级中国人民大学王蓉内联样式（InlineStyle）写在HTML元素里面。内联样式只对所在的元素有效。例：pstyle=font-size:20pt;color:red这个Style定义p/p里面的文字是20pt字体，字体颜色是红色。何处使用CSS中国人民大学王蓉内部样式表（InternalStyleSheet）写在HTML的head/head部分。内部样式表只对所在的网页有效htmlheadstyletype=text/css.mylayout{border-width:1;border:solid;text-align:center;color:red}/style/headbodyh1class=mylayout这个标题使用了style。/h1h1这个标题没有使用style。/h1/body/html何处使用CSS中国人民大学王蓉外部样式表（ExternalStyleSheet）将样式写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式的网页里引用这个CSS文件。htmlheadlinkhref=“my.cssrel=stylesheettype=text/css/headbodyh1class=mylayout这个标题使用了Style。/h1h1这个标题没有使用Style。/h1/body/html.mylayout{border-width:1;border:solid;text-align:center;color:red}何处使用CSSmy.css文件中国人民大学王蓉内容什么是CSS何处使用CSSCSS基本语法在Dreamweaver中定义CSS课堂任务通过一个示例，介绍如何使用CSS来设置文本格式和定位文本中国人民大学王蓉CSS基本语法一个样式的语法由三部分构成：选择器selector属性property属性值valuep{color:blue}也可以分行写p{text-align:center;color:black;font-family:arial}中国人民大学王蓉选择器选择器用于标识设置了格式的元素，可以为HTML标签、类选择器或id选择器。CSS基本语法p{color:blue}.p_text{color:blue}#p_text{color:blue}HTML标签类选择器Id选择器直接应用于p标签里面的文字/*注释*/pclass=“p_text”段落文字/ppid=“p_text”段落文字/p以.来定义以#来定义HTML标签原则：在同一个HTML文档中，使用多次class，但只能使用一次id。中国人民大学王蓉选择器利用类选择器可以对同样的HTML元素设置不同的样式。例如，希望段落p有两种样式，一种是居中对齐，一种是居右对齐。可以写如下样式：CSS基本语法引用中国人民大学王蓉属性和值属性(property)为希望改变的属性每个属性都有一个值属性和值用冒号（:）分开body{color:blue}多个属性之间用分号分隔p{text-align:center;color:red}具体属性可参考基本语法也可以分行写p{text-align:center;color:red;}中国人民大学王蓉选择器的分组（组合Grouping）可以将相同的属性和属性值赋予多个选择器。选择器之间用逗号分隔。CSS基本语法将所有正文标题(h1到h6)的字体颜色都变成红色h1,h2,h3,h4,h5,h6{color:red}中国人民大学王蓉派生选择器通过依据元素在其位置的上下文关系来定义样式，这样可以使标记更加简洁。例：希望列表中的strong元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：CSS基本语法/*只有li元素中的strong元素的样式为斜体字*/listrong{font-style:italic;font-weight:normal;}在CSS1中称为上下文选择器(contextualselectors)pstrong我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用/strong/pollistrong我是斜体字。这是因为strong元素位于li元素内。/strong/lili我是正常的字体。/li/ol中国人民大学王蓉派生选择器CSS基本语法/*只有h2元素中的strong元素的样式为蓝色字*/strong{color:red;}h2{color:red;}h2strong{color:blue;}p本段中的强调文字为strong红色/strong。/ph2该标题仍然是红色/h2h2该标题中的强调文字为strong蓝色/strong。/h2中国人民大学王蓉派生选择器#sidebarp{font-style:italic;text-align:right;margin-top:0.5em;}#sidebarh2{font-size:1em;font-weight:normal;font-style:italic;margin:0;line-height:1.5;text-align:right;}CSS基本语法id选择器常常用于建立派生选择器中国人民大学王蓉派生选择器CSS基本语法类class也可被用作派生选择器类名为fancy元素内部的表格单元都会以灰色背景显示橙色文字。元素也可以基于它们的类而被选择下例中类名为fancy的表格单元将是带有灰色背景的橙色中国人民大学王蓉伪类(pseudo-class)伪类用于向某些选择器添加特殊的效果伪类语法selector:pseudo-class{property:value}例:a:link{color:red}CSS类也可与伪类搭配使用selector.class:pseudo-class{property:value}a.c1:link{color:red}CSS基本语法注：由于CSS优先级的关系(后面比前面的优先级高)，在写a的CSS时，一定要按照a:link，a:visited，a:hover，a:actived的顺序书写。中国人民大学王蓉CSS的盒子模式(Boxmodel)。CSS中有个重要的概念，就是盒子模式(Boxmodel)。margin边距：一个元素所占空间的边缘到相邻元素之间的距离。border边框：一个元素的边线。padding间隙(也有人称做补丁)：元素内容到元素边框的距离。content(内容，比如文本，图片等)CSS背景属性指的是content和padding区域。CSS属性中的width和height指的是content区域的宽和高。CSS基本语法中国人民大学王蓉CSS代码的注释养成写CSS代码注释的习惯。CSS代码注释以/*开头，以*/结束。CSS基本语法中国人民大学王蓉内容什么是CSS何处使用CSSCSS基本语法在Dreamweaver中定义CSS课堂任务通过一个示例，介绍如何使用CSS来设置文本格式和定位文本中国人民大学王蓉在Dreamweaver中定义CSS在Dreamweaver中可以定义以下规则类型：类标签高级中国人民大学王蓉类定义选择器为类的CSS样式可以将定义的样式属性应用到任何文本范围或文本块。所有类样式均以句点(.)开头（类选择器）。例创建名为.red的类样式，设置规则的color属性为红色，然后将该样式应用到一部分已定义样式的段落文本中。在Dreamweaver中定义CSS类标签高级中国人民大学王蓉标签HTML标签规则重定义特定标签（如p或h1）的格式。如，创建或更改h1标签的CSS规则时，所有用h1标签设置了格式的文本都会立即更新。在Dreamweaver中定义CSS类标签高级中国人民大学王蓉高级定义除选择器为类和标签之外的其他CSS样式，如派生选择器例如，每当h2标题出现在表格单元格内时，就应用选择器tdh2。Id选择器例如，由#myStyle定义的样式可以应用到所有包含属性/值对id=“myStyle”的标签。伪类:active,:hove,:link,:visited等在Dreamwea