搜索
《Web程序设计》(第4版)，电子工业出版社，2015，ISBN：9787121260360Web程序设计(第4版)“十二五”普通高等教育本科国家级规划教材《Web程序设计》(第4版)，电子工业出版社，2015，ISBN：9787121260360目录第1章Web编程基础知识第2章Web应用程序开发与运行环境第3章HTML与XML第4章层叠样式表CSS第5章Web客户端程序设计第6章Web服务器端程序设计第7章Web数据库程序设计第8章ASP.NET综合应用实例《Web程序设计》(第4版)，电子工业出版社，2015，ISBN：9787121260360第4章层叠样式表4.1样式表的定义和引用4.2相关标记和属性4.3样式的继承和作用顺序4.4CSS属性4.5CSS+DIV页面布局4.6应用实例——设计个人主页《Web程序设计》(第4版)，电子工业出版社，2015，ISBN：9787121260360层叠样式表简介•层叠样式表（CSS）–CSS（CascadingStyleSheets）是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。–它扩充了HTML标记的属性设定，称为CSS样式，通过脚本程序控制，可以使页面的表现方式更为灵活，更具动态特性。CSS可提供多种样式，以减少GIF动画的使用，从而能设计出规模更小、下载更快的网页。–CSS是一套开放性标准，不仅可用于HTML语言，也可用于其他网页设计语言，如XML语言。–目前CSS的版本包括CSS1、CSS2和CSS3。有关CSS的详情，可访问。《Web程序设计》(第4版)，电子工业出版社，2015，ISBN：9787121260360•CSS标准中重新定义了HTML语言中原来的文字显示样式，并增加了一些新概念，如类、层等，可以对文字重叠、定位等提供更为丰富多彩的样式；同时CSS可进行集中样式管理。CSS还允许将样式定义单独存储于样式文件中，这样把要显示的内容和显示样式的定义分离开，便于多个HTML文件共享样式定义。另外，一个HTML文件也可以引用多个CSS样式文件中的样式定义。•所谓“层叠”，实际上就是将显示样式独立于显示的内容，进行分类管理，如分为字体样式、颜色样式等，需要使用样式的HTML文件进行套用即可。层叠样式表简介《Web程序设计》(第4版)，电子工业出版社，2015，ISBN：97871212603604.1样式表的定义和引用4.1.1样式表的定义•样式表的作用是通知浏览器如何呈现文档，样式表的定义是CSS的基础。【例4-1】一个使用CSS对文字显示特性进行控制的HTML文件。htmlheadtitleCSS示例/titlemetahttp-equiv=Content-Typecontent=text/html;charset=gb2312styletype=text/cssh1{font-family:隶书,宋体;color:#ff8800}.text{font-family:宋体;font-size:14pt;color:red}/style/headbodytopmargin=4h1这是一个CSS示例！h1spanclass=text这行文字应是红色的。/span/body/html《Web程序设计》(第4版)，电子工业出版社，2015，ISBN：97871212603604.1.1样式表的定义•CSS样式表定义的基本语法为：选择符（Selector）{规则（Rule）表}其中：（1）选择符是指要引用样式的对象，它可以是一个或多个HTML标记（各个标记之间以逗号分开），如例5-2中的h1；也可以是类选择符（如例5-2中的.text）、ID选择符或上下文选择符。（2）规则表是由一个或多个样式属性组成的样式规则，各个样式属性间由分号隔开，每个样式属性的定义格式为：样式名：值样式定义中可以加入注解，格式为：/*字符串*/4.1样式表的定义和引用《Web程序设计》(第4版)，电子工业出版社，2015，ISBN：97871212603604.1.1样式表的定义•样式表定义样式定义表的例子：①p{font-family:宋体;color:darkblue;background-color:yellow;font-size:9pt;/*字体大小*/}②h1,h2{font-family:隶书,宋体;color:#ff8800;text-align:center;}例①定义了一个样式表供HTML文件的p标记使用.例②定义了一个样式表供HTML文件的h1和h2标记使用。在例②中，选择符由两个HTML标记组成，表示两种对象均遵循该样式定义。4.1样式表的定义和引用《Web程序设计》(第4版)，电子工业出版社，2015，ISBN：97871212603604.1.2样式表的引用样式引用的方式主要有以下4种：（1）链接到外部样式表（2）引入外部样式表（3）嵌入样式表（4）内联样式4.1样式表的定义和引用《Web程序设计》(第4版)，电子工业出版社，2015，ISBN：97871212603604.1.2样式表的引用（1）链接到外部样式表如果多个HTML文件要共享样式表（这些页面的显示特性相同或十分接近），则可将样式表定义为一个独立的CSS样式文件，使用该样式表的HTML文件在头部用link标记链接到这个CSS样式文件即可。4.1样式表的定义和引用《Web程序设计》(第4版)，电子工业出版社，2015，ISBN：97871212603604.1.2样式表的引用【例4-2】先将样式定义存放于文件style.css（CSS样式文件的扩展名为.css），style.css文件包含的内容为：h1{font-family:隶书,宋体;color:#ff8800}p{background-color:yellow;color:#000000}.text{font-family:宋体;font-size:14pt;color:red}HTML文件css1.htm要引用该样式表，其文件内容为：htmlheadtitle链接外部CSS文件示例/titlelinkrel=stylesheettype=text/csshref=style.cssmedia=screen/headbodytopmargin=4h1这是一个链接外部CSS文件的示例！h1spanclass=text这行文字应是红色的。/spanp这一段的底色应是黄色。/p/body/html4.1样式表的定义和引用《Web程序设计》(第4版)，电子工业出版社，2015，ISBN：97871212603604.1.2样式表的引用（2）引入外部样式表–这种方式在HTML文件的头部style、/style标记之间，利用CSS的@import声明引入外部样式表。–格式为：style@importURL(外部样式文件名);....../style4.1样式表的定义和引用《Web程序设计》(第4版)，电子工业出版社，2015，ISBN：97871212603604.1.2样式表的引用（3）嵌入样式表–这种方式利用style标记将样式表嵌入HTML文件的头部。例4-1就使用了这种方式。–style标记内定义的前后加上注释符!--...--的作用是使不支持CSS的浏览器忽略样式表定义。–style标记的属性type，指明样式的类别。4.1样式表的定义和引用《Web程序设计》(第4版)，电子工业出版社，2015，ISBN：97871212603604.1.2样式表的引用（4）内联样式–这种方式是在HTML标记中引用样式定义，方法是将标记的style属性值赋为所定义的样式规则。由于样式是在标记内部使用的，故称为“内联样式”。例如：h1style=font-family:'隶书','宋体';color:#ff8800这是一个CSS示例！h1pstyle=color:red;background-color:yellow....../pbodystyle=font-family:'宋体';font-size:12pt;background:yellow此时，样式定义的作用范围仅限于此标记范围之内。4.1样式表的定义和引用《Web程序设计》(第4版)，电子工业出版社，2015，ISBN：9787121260360【例4-3】设有两个样式表文件s1.css、s2.css和一个HTML文件example_css.htm。文件s1.css：h2{font-family:隶书;color:#ff8800}p{color:black;background-color:yellow;font-size:12pt;}文件s2.css：h3{font-family:宋体;color:blue;font-style:italic;}.text{font-family:宋体;font-size:10pt;color:red}文件example_css.htm：htmlheadtitleCSS综合应用示例/titlelinkrel=stylesheettype=text/csshref=s1.cssstyletype=text/cssa:visited{color:#0000FF;text-decoration:none}a:link{font-family:宋体;font-size:9pt;color:#0000FF;text-decoration:none}a:hover{font-family:宋体;font-size:12pt;color:#003333;background-color:#FFCC99;text-decoration:none}@importURL(s2.css);/style/headbodytopmargin=4h2这是一个CSS样式文件综合示例！/h2spanclass=text这行文字应是红色的。/spanp这一段的底色应是黄色。/ph3这行文字由s2.css中的样式控制，应是斜体、蓝色。/h3ahref=a.htm超链接/abrbrdivstyle=font-size:14pt;color:darkred;CSS样式使用有四种方式：br链接、引入、嵌入和局部引用/div/body/html4.1样式表的定义和引用《Web程序设计》(第4版)，电子工业出版社，2015，ISBN：97871212603604.2相关标记和属性•随着CSS的出现，有几个新的HTML标记和属性被增加到HTML语言中，以使样式表与HTML文件更容易地组合起来，它们是：–类选择符和class属性–id选择符和id属性–上下文选择符–伪类–span标记–div标记《Web程序设计》(第4版)，电子工业出版社，2015，ISBN：97871212603604.2.1类选择符和class属性类选择符（ClassSelector）在样式表中定义具有样式值的类，它有两种定义格式：①标记名.类名{规则1;规则2;…}②类名{规则1;规则2;…}格式①的类选择符指明所定义的样式只能用在特定的标记上。例如：headstyletype=text/cssp.back{background-color:#666666;}/span…/headbody…pclass=back本段文字的底色为#ddeeff/pp这是另一段/p....../body4.2相关标记和属性《Web程序设计》(第4版)，电子工业出版社，2015，ISBN：97871212603604.2.2id选择符和id属性–id选