复旦大学：《计算机网络与网页制作》课程PPT教学课件（讲稿）10 用CSS设定页面样式

计算机网络与网页制作 Chapter10:用CSs设定页面样式 复旦大学计算机学院 肖川 xiao@fudan edu cn 1

计算机网络与网页制作 Chapter 10：用CSS设定页面样式 复旦大学计算机学院 肖川 cxiao@fudan.edu.cn 1

目标 *层叠式样式表概述 *使用CSs样式面板 *使用属性面板 *创建类样式与标签样式

目标  层叠式样式表概述  使用CSS样式面板  使用属性面板  创建类样式与标签样式 2

效果 这一行是用内联样式表 nline style sheet)设定样式! 这一行是用嵌入的内部样式表( internal style sheet"设定样式! 这一行是用附加的外部样式表( external style sheet)"设定样式! 这一行是用“内联样式表( inline style sheet)”设定样式 这一行是用嵌入的“部样式表( interal tyle cheet,)”设定样式! 这一行是用附加的“外部样式表( external style sheet)”设定样式!

效果 3

1.层叠式样式表(CSS) CSS样式表可以位于 (1)CsS内联于HTML标签,存在于标签内(内联样式) HTML标签的“ style”属性 (2)直接位于一个HTML文档的区内(内部样式) *标签内 (3)位于一个外部文件内,该外部文件可以被任意数量 的HTML页面所引用(外部样式) *CSS为后缀的的外部文件,引用页面内使用标 签指向该外部文件

1. 层叠式样式表(CSS)  CSS样式表可以位于 （1）CSS内联于HTML标签，存在于标签内 (内联样式)  HTML标签的“style”属性 （2）直接位于一个HTML文档的区内 (内部样式)  标签内 （3）位于一个外部文件内，该外部文件可以被任意数量 的HTML页面所引用 (外部样式)  .css为后缀的的外部文件，引用页面内使用标 签指向该外部文件 4

样式表组成 一个样式表是多条CSS规则组成的集合。 *每条CSS规则由一个或多个属性构成,如颜 色、字体、大小等,这些属性规定了当页 面元素被应用该规则时,页面元素所呈现 的外观和格式

样式表组成  一个样式表是多条CSS规则组成的集合。  每条CSS规则由一个或多个属性构成，如颜 色、字体、大小等，这些属性规定了当页 面元素被应用该规则时，页面元素所呈现 的外观和格式。 5

tyle Places. html x E:\DreamWeaverCS5\lesson04\ Style Places. html E 代码》sty1 ePlacescss.css 代码拆分设计时代码后视图检查6.,C标题 Untitled Documen eads metahttp-equiv="content-type"content="text/html charset=UrF-8”/> 这一行是用“内联样式表( inline style 5 Untitled Document Sheet)”设定样式! 7 这一行是用嵌入的“部样式表( interna 9.redtext color: red: aty le cheet)”设定样式 11tnt-tami1:华文行楷 font-size: 24px 这一行是用附加的“外部样式表 external style sheet)”设定样式! 15 1 317 clink href"styleplacescscas"rel="stylesheet"type ="text/c88"/> 18 20 ylePlaces html x e 21 这一行是用内联样式表( inline style sheet 设定样式! 代码拆分设计实时代码同实时视图检查6.恐.C c。。r: green 24 font-size: 24px 26 27pc19-" greenText'”)这-行是用附加的外部样式表 ( externa1 tyle sheet)“设定样式! 29 ②Q100%482x547y1K/1秒 Uni code QUTI 6

6

可应用于任何HML元 样式表类型 font- family:·华文新魏"; 1.标签CSS规则 font-size: 20px; c1。r:+900 *自动应用于同名的HTML标签 font-size: 18px *2.类CSS规则 c1r:番960 *在HTML标签内使用cass属性 应用该条CSS规则 color: red: ont- family:"华文行楷 *3. ID CSS规则 font-size: 24px: *在HTML标签内使用id属性 这一行是用嵌入的内部样式表 )“设定样式! 上述三种类型针 活动说明 对位于标 签内或外部CSS文 如果你成为我们商城的一名会员,那么在活动中您将享受到更多的优惠o 在活动中我们偶禺尔会需要您提供一些个人信息,我们郑重承诺这些信息仅仅用 于这次活动,不会用于其他目的;我们也向您保证不会把这些信息遞露绐其他任何人。</p

样式表类型  1. 标签CSS规则  自动应用于同名的HTML标签  2. 类CSS规则  在HTML标签内使用class属性 应用该条CSS规则  3. ID CSS规则  在HTML标签内使用id属性 应用该条CSS规则 7 上述三种类型针 对位于标 签内或外部CSS文 件内的样式表

样式表类型 *4.复合内容CSS规则 *更加精确地指明CSS规则的应用对象 body ul li strong I 15泉最情人节ctn1 浪漫情人节 17关主女性的三八ng女节/ strong?</1 color: #00F; 18<1)为您的春游添风采1 关注女性的三八妇女节 9d1周未定期折扣促销/1 为您的春游添风采 20</ul 周末定期折扣促销 *复合内容的伪类选择器为超链接设定更加丰富 的样式 a: link I color: #oFO a: hover I c1。r:FF0 text-decoration: none a: visited I

样式表类型  4. 复合内容CSS规则  更加精确地指明CSS规则的应用对象  复合内容的伪类选择器为超链接设定更加丰富 的样式 8

如何对页面元素应用CSs样式? *标签CSS规则的使用 *自动匹配 *类CSS规则的使用 *设置页面元素的cass属性 *DCSS规则的使用 *设置页面元素的id属性 *复合內容规则的使用 *根据页面元素的上下文关系自动匹配

如何对页面元素应用CSS样式？  标签CSS规则的使用  自动匹配  类CSS规则的使用  设置页面元素的class属性  ID CSS规则的使用  设置页面元素的id属性  复合内容规则的使用  根据页面元素的上下文关系自动匹配 9

创建、修改CSs规则的三条途径 *“CSS样式”面板 *“属性”面板 *代码定位器(略)

创建、修改CSS规则的三条途径  “CSS样式”面板  “属性”面板  代码定位器(略) 10