《网络程序设计ppt课件第五章》由会员分享，可在线阅读，更多相关《网络程序设计ppt课件第五章（86页珍藏版）》请在金锄头文库上搜索。
1、网络程序设计 XXX,第五章：CSS,目标,掌握样式表的语法规则 样式表的分类： 行内样式表 内嵌样式表 外部样式表 掌握常用的样式 了解层和标签,CSS简述,什么是CSS? CSS的全名是Cascading Style Sheets，即“层叠样式表”，简称样式表，是用来定义网页的显示样式的。,为什么要使用CSS?,在HTML中网页内容和网页样式是混为一体的，如果想修改某个网页的样式，就需要对该网页逐句进行修改，非常麻烦 单纯使用HTML的标记和属性，有时候达不到需要的效果。,我想变成红色的字体怎么办呢？ 超链接的下划线消失？ 部分超链接颜色改变？,CSS:层叠样式表,级联样式表, 简称样式表
2、 优点:,更能有效地控制网页外观，提高了文档样式的一致性，实现格式与内容结构的分离,使用样式表，您可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力,更小的网页,易维护与更新：当更新了 CSS样式后，所有使用该CSS样式的文档格式都自动更新为新样式,让浏览器或输出设备成为更友好界面,W3C 1996年开发CSS11998 CSS2IE7和FX2实现了CSS1的绝大部分特性，IE7支持CSS2远远不足。,修改 正文文本都显示相同大小字体 超链接的下划线消失 部分超链接颜色改变,插入CSS,使用CSS进行设置，操作步骤如下。 打开text.html文档，选择窗口-CSS样式，打开CSS面板。
3、 在CSS面板中单击+，打开新建CSS规则对话框。 选择选择器类型为标签，选择器名称为a，规则定义为仅限该文档，如图5-1示。点击确定，打开规则定义对话框。 在规则定义对话框中选择类型选项卡，在text-decoration中选择none，如图5-2所示。点击确定。,再次打开规则定义对话框，选择选择器类型为类，选择器名称为t，规则定义为仅限该文档，如图5-3示。点击确定，打开规则定义对话框。 在规则定义对话框中选择类型选项卡，在font-size中选择12。点击确定。,再次打开规则定义对话框，选择选择器类型为ID，选择器名称为d，规则定义为仅限该文档，如图5-1示。点击确定，打开规则定义对话框
4、。 在规则定义对话框中选择类型选项卡，在color中选择#C06。点击确定。 选择需要设置字体的段落，加入class=”t”。 选择最后的超链接，加入id=”d”。 预览显示设置效果。,加入CSS样式后Text.html代码如下：MBA班招生简章学校坐落在以闻名海内外的山东省省会济南市。校园内绿草如茵，花团锦簇，文明整洁，优雅怡人。2010年山东经济学院继续面向全国招收MBA研究生。 一、报名条件 2006年7月31日前国民教育序列大学本科或本科以上毕业并取得学历学位证书的在职人员。 二、报名方式、时间、地点 1、考试报名采取网上报名与现场报名相结合的方式。网上报名的时间为7月1日-17日,1
5、8日-20日现场确认。,2、报考者在规定的网报时间内，通过互联网登录http:/ 3、考生携带有效身份证件，在规定的现场报名时间内，到指定现场报名点照相、缴费，领取并认真阅读非全日制攻读硕士学位全国统一考试考生应试守则及违规处理规则，确认报名信息。 三、招生人数：40人 四、招生咨询咨询网址： http:/www.rusun.org电子邮件： wrf_ 联系地址：山东省济南市历下区二环东路7366号 邮编：250014与原始text.html相比，增加了加粗字体部分。其中style元素部分就是定义的CSS样式。 在text.html中的正文文本块中增加的class=”t”，使这些文本块都设置为
6、12#字体。文档中的所有超链接都消除了下划线。正文文本块中增加的id=”d”,使对应的a元素内容显示为指定颜色。示例显示效果如图5-7所示。,CSS 的基本语法,看如下示例:,使用了样式的网页我是一个使用了样式的网页 ,选择器,属性:指定显示样式,值:样式规则,示例中的选择器分别是标记选择器、类选择器和ID选择器。,选择器： 通配选择器 标记选择器 CLASS 类选择器 ID 选择器,文档样式-2,选择器的属性和值包含在大括号内 属性和属性的值以:分开 用分号 (；) 分隔多重属性 格式中加注释标记“”是为了防止不支持CSS样式表的浏览器， 将标记中的内容作为正文显示出来。,优先级,应用bod
7、y样式,文档样式-标记选择器,CLASS类选择器,应用类选择器： class”类名“,类选择器的定义格式为： .类名 样式规则; ,文档样式-class选择器,ID选择器,应用ID选择器： id”ID名”,ID选择器的定义格式为： #ID名 样式规则; ,文档样式-id选择器,id与class,class和id看起来除了一个.和#的区别之外，无论在定义上还是在应用上似乎都是一模一样。然而事实上并不如此， 同一id在一个页面内只能应用一次，而class则是用于描述多次出现的元素。这从它们的名称上很容易理解。id就类似元素的身份证号码，它必须是唯一的，而class则是一类具有共同属性的元素的合称，
8、是一类。 如果在一个页面内多次使用同一个id，页面通常是可以正常显示的。但是这会给后期的维护带来不便，还可能造成其它的问题。所以我们一定要区分开id和class，并且合理的应用它们。,.t font-size: 12px; text-decoration: none a.top:link font-size: 12px; color: #000000; text-decoration: none; letter-spacing: 0.2em a.top:visited font-size: 12px; color: #FF0000; text-decoration: none; letter-
9、spacing: 0.2em a.top:hover font-size: 12px; color: #0000FF; text-decoration: underline; l etter-spacing: 0.2em a.top:active font-size: 12px; color: #00FF00; text-decoration: none; l etter-spacing: 0.2em #d color: #C06; 无标题文档超链接效果 ,文档样式-特殊的选择器,特殊的伪类：A代表超链接，hover代表鼠标悬停,Hyperlink.html,注意：伪类的优先级是从后到前，注意
10、几个样式的顺序不能颠倒，否则可能造成部分样式无法正常显示。,选择符编组,p.paragraphcolor:blue;font-family:黑体; 引用时,选择符限定定义,li atext-decoration:none; .special li text-decoration:none;,群定义,p,h1.in,#aacolor:blue;font-family:黑体;,文档样式-特殊的选择器,通配选择器,* color:blue;font-family:黑体;应用于所有元素。很少使用。,文档样式优先级： 通配选择器 标记选择器 CLASS 类选择器 ID 选择器,文档样式,优先级,CSS
11、样式表的层次,样式表分为三个层次： 行内样式表 文档样式表 外部样式表,行内样式,如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。, 希望大家能很好的掌握CSS,它对于我们学习网页制作有着非常重要的作用。 大家在学习的过程中有什么困难,可以给我发送Email。 ,行内样式与提供一致的样式相背离，与内容混杂。 因此XHTML1.1不建议使用。,文档样式-1,头内定义样式pcolor:blue;font-family:隶书;font-size:24px;text-align:center; atext-decoration:no
12、ne;color:red;希望大家能很好的掌握CSS,它对于我们学习网页制作有着非常重要的作用。 大家在学习的过程中有什么困难,可以给我发送Email。,所有的段落都采用 P 样式，保证样式统一,行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用文档样式。,外部样式,作为一个站点我们需要对整个站点形成同一的风格和样式，定义一个样式应用于多个文档，这正是外部样式表的功能。外部样式表是一个独立的CSS文件，在使用外部样式表的文档中指定使用的外部样式表。 根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 导入（import）外部样式表,33,样式文件
13、 P ,网页2,网页3,网页1,外部样式表可通过 http:/jigsaw.w3.org/css-validator/validator-upload.html验证,链接外部样式表,使用link（链接）标签 ，语法：,第一步：创建样式表文件whut_css.css,第二步：把样式文件和网页关联,样式文件： whut_css P ,one.htm,another.htm,第三步：浏览查看各网页,必须位于文档头部,.t font-size: 12px; text-decoration: none a.top:link font-size: 12px; color: #000000; text-de
14、coration: none; letter-spacing: 0.2em a.top:visited font-size: 12px; color: #FF0000; text-decoration: none; letter-spacing: 0.2em a.top:hover font-size: 12px; color: #0000FF; text-decoration: underline; l etter-spacing: 0.2em #d color: #C06;,上述操作在text.html文档中插入下面的语句:最后在指定标签内使用类和id选择器定义的样式，则整个效果和使用文档
15、样式表完全相同。上述指定样式表的方式是链接样式表，链接外部样式表的语句必须位于文档头部。,导入外部样式表,使用import导入 ，语法： import url(css/whut_css.css);,操作步骤同链接样式表,两种外部样式表的区别在于： import只能用在样式元素内容的开头，在文档样式表上面。 导入的文件可以包含标记、样式规则和其它import指令。 在CSS文件中可以导入其它样式表,。,外部样式表的设计,外表样式表的设计最常用的方法是使用已有的模板或案例，在此基础上添加和修改。在Dreamweaver中可以使用新建文档示例中的CSS样式表,修改外部样式表的步骤如下： 打开样式表文件，在CSS面板中选择需要修改的项。 在选项的属性窗口中编辑属性值即可，如图5-10所示。或者点击选项属性窗口的编辑按钮，打开CSS规则定义对话框进行设置，如图5-10所示。 在选项的属性窗口中单击添加属性，在下拉式列表中选择属性，在属性值中编辑属性值，或点击选项属性窗口的编辑按钮，打开CSS规则定义对话框,选择新的属性和属性值即可。,窗口CSS面板,外部样式表中增加样式的步骤如下： 打开样式表文件，在CSS面板中选择样式表。 在CSS面板中单击+, 打开新建CSS规则对话框，选择选择器类型和名称，规则定义中选择仅限该文档，点击确定。 在规则定义对话框中选择属性和属性值即可。,
