2、css.pptVIP

Java Web 编程 第二讲 CSS（层叠样式表） 目标 什么是CSS 样式定义的级联模型 使用CLASS 常用属性介绍 什么是样式表 我们知道，HTML中的每个元素都具有某些属性可以来设置该元素的显示外观，我们把这些属性称作格式化信息。如果每个元素都大量地使用这些属性，那么网页代码会显得非常乱，维护很困难 样式表的提出就是要解决格式化信息把网页弄乱这个问题。使用样式表，所有的格式化信息都从HTML文档中转移到一个样式表（一个以 .css为扩展名的文本文件）中。任何想使用某种格式的网页只要链接到样式表就可以了。对样式表的任何修改都能自动反映到链接到样式表上的所有网页 样式表能够改变网页上任何元素的外观显示效果。可以在样式表中逐个元素的定义它的显示方式 CSS定义 CSS：Cascade Style Sheet 层叠样式表 用来定义HTML文件的显示效果 1998/5/12，CSS level2成为W3C标准 特点： 样式表由多行样式规则组成，以告诉浏览器如何显示一个HTML文档 每个规则的组成包括一个选择符（通常是一个HTML元素）和该选择符所接受的样式 每个元素可以定义多个属性，每个属性带有一个值，这些属性共同描述该元素如何进行显示 CSS样式规则 样式规则格式： 选择符{属性:值} 单一选择符的复合样式声明应该用分号分割： 选择符{属性1:值1; 属性2:值2} 示例： H1{font-size:16pt; color:red} H2{font-size:10pt; color:green} 样式定义的层叠式模型 如果3种样式同时存在，那么元素级样式将替换网页级样式，而网页级样式将替换全局式样式 使用网页级样式 在HEAD中使用STYLE元素 示例（01.html）： html head style type=text/css H1{font-size:16pt; color:red} H2{font-size:10pt; color:green} /style /head body h1Hello/h1 h2World/h2 /body /html 使用元素级样式 在BODY中定义元素时使用STYLE属性 示例 (02.html)： html head /head body h1 style=font-size:20pt; color:blueHello/h1 h2 style=font-size:10pt; background:yellow; font-family:courierWorld/h2 /body /html 使用全局样式 2-1 首先编写样式表文件（.css文件）。例如，样式表文件03.css，内容如下： H1{font-size:16pt; color:red} H2{font-size:10pt; color:green} 然后，在HTML文件的HEAD中使用LINK元素将样式表文件与HTML文件链接起来 LINK rel=“..” href=“..” type=“..” … rel：取值stylesheet type：取值text/css href：.css文件的url 使用全局样式 2-2 例如03.html： html head titleaf/title link rel=stylesheet href=03.css type=text/css /head body h1Hello/h1 h2World/h2 /body /html 同时使用多种样式表 示例（04.html）： html head link rel=stylesheet href=03.css type=text/css /head body h1 style=“font-size:20pt; color:blueHello/h1 h2 style=“font-size:10pt; background:yellow; font-family:courierWorld/h2 /body /html 使用CLASS 3-1 HTML中每个元素都有一个class属性 class是在网页中自定义元素的方法。使用class，可以在样式表中为某个元素定义多种外观显示效果 使用class，也可以在样式表中为多个不同的元素定义同一种外观显示效果 使用CLASS 3-2 例如：（05.html） html head style type=text/css P.code{font-size:16pt; color:red} P.comment{font-size:10pt; color:green} /style /head body P class=comment//第一个Java程序/p pre /*保存间隔和断行