第4章-网页设计文本和图像重点.ppt

4.8 CSS3增强的颜色功能 4.8.2 HSLA色彩模式 HSLA色彩模式是HSL色彩模式的扩展，在色相、饱和度、亮度三要素的基础上增加了不透明度参数。 基本语法：hsla ( length , percentage , percentage , opacity ) 语法说明：其中前3参数与HSL()的参数意义和用法相同，第4个参数opacity表示不透明度，取值在0到1之间。 示例CSS样式： 4.8 CSS3增强的颜色功能 4.8.3 RGBA色彩模式 RGBA色彩模式是RGB色彩模式的扩展，在红、绿、蓝三种原色的基础上增加了不透明度参数。 基本语法：rgba ( r , g , b , opacity ) 语法说明：其中r、g、b分别表示红色、绿色和蓝色三种原色所占的比重，可以是正整数或百分数，正整数的取值范围是0~255，百分数的取值范围是0.0%~100.0%，第4个参数opacity表示不透明度Alpha，取值在0到1之间。 示例CSS样式： 4.8 CSS3增强的颜色功能 4.8.4 不透明度（opacity属性） CSS3除了在HSLA和RGBA色彩模式中支持色彩的不透明度外，还专门定义了opacity属性，通过设置该属性能够使任何元素呈现半透明效果。 基本语法：opacity：number 语法说明： number是使用浮点数指定对象的不透明度，值被约束在[0.0-1.0]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值。默认值为1，适用于所有元素，无继承性。 示例CSS样式： 小结 本章介绍了文本与图片元素的使用方法和样式设置。主要包括文本样式、文本排版样式、HTML文本元素、特殊符号、图片与背景的使用、CSS3增强的文本与颜色功能。CSS3增强的功能可以为网页提升表现力。文本与图片是网页制作中最基本的内容，希望能够熟练地掌握和应用。本章绝大部分都采用了表现与内容分离的原则，所有外观样式都采用CSS实现。请大家要习惯使用这种用法。 作业 1 思考题 1）简述em、strong和b在用法上的区别。 2）举例说明块级元素与行内元素的使用区别。 2 操作题 1）调试本章源代码。 2）按下图效果制作一个唐诗欣赏页面，要求综合运用本章所介绍的标记对普通文字进行格式化。 3）请搜索网络资料，完成滚动文字、背景音乐的使用。 * 4.3 文本元素（Text） 2. sub sup sub标签可定义下标文本。sup标签可定义上标文本。 包含在他们的开始标签和其结束标签中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。 3. bdo bdo元素可覆盖默认的文本方向。其dir属性有两个值：ltr和rtl。 4.3 文本元素（Text） 4. ibsmall i标签表示与其它文本不同的部分，浏览器中呈现为斜体文本效果。i标签和基于内容的样式标签em类似。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式。 4.3 文本元素（Text） b标签表示更重要的部分，浏览器中呈现为粗体文本效果。 small标签呈现小号字体效果。small标签和它所对应的big标签一样，但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号，那么small标签将不起任何作用。 4.3.3 输出 1. pre pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 2. code code标签用于表示计算机源代码或者其他机器可以阅读的文本内容。 4.3 文本元素（Text） 3. kbd kbd标签定义键盘文本。它用来表示文本是从键盘上键入的。浏览器通常用等宽字体来显示该标签中包含的文本。kbd 标签经常用在计算机相关的文档和手册中。 4. var var标签表示变量的名称，或者由用户提供的值。这个标签经常与code和pre标签一起使用，用来显示计算机编程代码范例及类似方面的特定元素。用var标签标记的文本通常显示为斜体。 4.3 文本元素（Text） 5. dfn dfn标签可标记那些对特殊术语或短语的定义。浏览器通常用斜体来显示dfn中的文本。但dfn标签尽量少用为妙，作为一种通用样式，尤其在技术文档中，当第一次出现新的术语时，应该将它们与普通文本分开，这样读者可以更好地理解文章当前的主题，之后就不要再对这个术语进行任何标记了。 4.3 文本元素（Text） 6. samp samp标签表示一段用户对其没有什么