大学计算机基础及实训教程第11章.ppt

11.2.3 什么是CSS CSS是Cascading Style Sheets的缩写，一般译为“层叠样式表”或“级联样式表”。它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。 html head title设置唐诗标题/title style h1{text-align:center; font-family:楷体;} /style /head body h1 春夜喜雨/h1。 /body /html 实际上样式表的宗旨就是将结构与格式分离，从而使网页设计人员能够更方便地给网页的布局施加更多的控制，而HTML仍然可以保持简单明了的初衷。因此把样式表代码独立出来后，则可以从另一个角度来控制网页外观。 利用样式表，还可以将站点上所有的网页都指向一个css文件，用户只需要修改css文件中的某一行，那么整个站点的外观都会随之发生改变。这样，通过样式表就可以将许多网页的风格样式同时更新，不用一页一页地更新了。 11.2.4 CSS样式定义 定义样式的基本语法为： 选择器{属性1：值1；属性2：值2} 其中选择器表示样式作用的对象，属性和值则表示相应CSS属性和值的配对。 例如：h1{color:green;},这个样式规则就是告诉浏览器，所有标签h1之间的文字都显示绿色。 其中h1是选择器。花括号中所包含的是属性，每个属性包括属性名（如color）和属性值（如green)，它们之间用冒号隔开。多个属性之间用分号隔开。如： #head { width: 998px; height: 50px; } 11.2.5 id与Class类选择器 1）ID选择器： id选择器可为标有特定id的HTML元素指定特定的样式。 id选择器以#来定义，形式为“#样式名称”。id属性只能在每个HTML文档中出现一次。如样式： #red {color:red;} #green {color:green;} 2）类选择器： 在 CSS 中，类选择器以一个点号显示，形式为“.样式名称”，如： .center {text-align: center} 在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 .center 选择器中的规则，所有拥有 center 类的 HTML 元素均为居中。 h1 class=center这个标题居中/h1 p class=center这个段落居中/p id和classt选择器之间的差别在于，id只能用来定义单一元素，而class是类，同一个class可以定义多个元素。就页面效果而言，两种定义样式方法的视觉效果几乎无差别。 11.2.6 在网页中使用CSS 1）内联样式表 内联样式表是在现有HTML元素的基础上，用style属性把特殊的样式直接加入到那些控制信息的标记中。其语法格式是： 标签名称 style=“属性：值；属性：值...” 2）内部样式表 内部样式表是把样式表放到页面的head区里，这些定义的样式就应用到该页面中，样式表是用style标记插入的。 head style type=text/css h1 {color: red;} .duan {margin-left: 20px;} /style /head 3）外部样式表 外部样式表是指将样式表作为一个独立的文件保存在计算机上，这个文件以“.css”作为文件的扩展名。当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 link 标签链接到样式表。link 标签在网页的head区里： head link rel=stylesheet type=text/css href=mystyle.css / /head 11.2.7 CSS样式表的创建与编辑 1）CSS样式面板 2）创建层叠样式和层叠样式表 3）【新建CSS规则】对话框 11.2.8 外部样式表的链接、导入和编辑 外部样式表的链接、导入和编辑步骤如下： （1）新建一个网页页面。 （2）选择【窗口】/【CSS样式】 命令，或者按shift+F11，打开【CSS样式】面板。 （3）单击面板右上角的快捷菜单按钮 ，在弹出的快捷菜单中选择【附加样式表】命令，打开“链接外部样式表”对话框。 4）在“文件/URL”文本框中输入要链接或导入的样式表文件的路径和名称，或单击【浏览】按钮，在打开的“选择样式表文件”对话框中，选择要链接的CSS样式表文件，如MyCss.css文件。 例：用DW编辑网页文件 用DW创建一个HTML文件。 在设计视图中录入宋词《念奴娇·赤壁怀古》，并给宋词分行或分段。 在宋词的题目后加上水平分割线。 将文字“念奴娇·赤壁怀古”居