CSS设置丰富的文字效.ppt

第第3章章 CSS 设置文字效果设置文字效果CSS+DIV本章目标CSS文字样式1文字实例2CSS段落文字3段落实例4CSS+DIV1.CSS文字样式vCSS文字设置样式说明文字设置样式说明1.技术背景说明 西方国家的罗马字母阵营中，字体分为sans-serif和serif两大类（P47）从等宽字体中独立出来的打印机字体monospace也算一类这三类按照W3C的规定，作为默认字体使用（演示）CSS+DIV1.CSS文字样式1.记住记住：通常正文使用的是易读性较强的serif字体，用户长时间阅读下不容易疲劳；而标题和表格则采用较醒目的sans-serif字体，它们需要显著和醒目，但不必长时间盯着这些文字来阅读。（例：3-1.html）CSS+DIV1.CSS文字样式2.文字大小font-size:（1）绝对大小（例3-2.html）单位说明（P49）（2）相对大小（例3-3.html、例3-4.html）3.文字颜色color:（p52）单位（示例3-5.html）4.文字粗细font-weight:（示例3-6.html）5.斜体font-style(3-7.html)6.文字的下划线、顶线、删除线、闪烁text-decoration:(P55)（示例3-8.html）,复合应用同时应用下划线、顶线、删除线（3-9.html）CSS+DIV1.CSS文字样式7.英文字母大小写text-transform capitalize首字母大写 uppercase全部大写 lowercase全部小写（示例3-10.html）CSS+DIV2.1文字实例一：模拟Google公司Logo1.示例3-11.html补充内容:letter-spacing:-2px;/*字母间距*/CSS+DIV2.2文字实例二：制作页面的五彩标题1.示例3-12.htmlCSS+DIV3.3CSS段落文字1.注意：文字的熟悉对段落同样适用2.针对段落也有很多样式属性CSS+DIV3.3 CSS段落文字1.段落的水平对齐方式 text-align（见示例3-13.html）2.段落的垂直对齐方式 vertical-align（见示例3-14.html）注：如果对vertical-align属性设置具体的数值，对于文字本身则可以则可以再垂直方向上发生位移（示例3-15.html）3.行间距和字间距 行间距line-height(示例3-16.html)字间距letter-spacing(示例3-17.html)CSS+DIV3.3 CSS段落文字4.首字放大,单独对第1个字设置样式CSS+DIV3.4 段落实例 百度搜索1.示例3-19.html