第4章网页设计文本和图像.pptVIP

4.8 CSS3增强的颜色功能 4.8.1 HSL色彩模式 HSL色彩模式是工业界的一种颜色标准。 基本语法：hsl ( length , percentage , percentage ) 语法说明：length表示（Hue色调）。0（或360）表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色，取值范围为：0 - 360；percentage表示（Saturation饱和度），取值范围为：0.0% - 100.0%；percentage表示（Lightness亮度），取值范围为：0.0% - 100.0%。 示例CSS样式： 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） 4.3.2 字符格式化 1. em和strong em标签告诉浏览器把其中的文本表示为强调的内容，显示效果是斜体。 strong标签和em标签一样，用于强调文本，但它强调的程度更强一些，在浏览器中是以加粗的字体（相对于斜体）来显示其中的内容。 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标签表示更重要的部分，浏览器中呈现