《第7讲_使用CSS样式表设置丰富的文字效果.ppt》由会员分享，可在线阅读，更多相关《第7讲_使用CSS样式表设置丰富的文字效果.ppt（18页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、回顾回顾 l基本的选择符有哪三种？优先级如何？l更多类型的选择符有哪些？l常用的CSS数据单位有哪些？l样式表有几种导入方式？它们的区别及优先级如何？l会使用会使用CSS文字样式文字样式l文字实例：模拟文字实例：模拟Google公司的公司的logol会使用会使用CSS段落文字段落文字l段落实例：百度搜索段落实例：百度搜索本讲目标本讲目标导入导入l文字是网页设计中必不可缺的元素，使用过文字是网页设计中必不可缺的元素，使用过word的用户会的用户会发现，发现，word可以对文字的可以对文字的字体、大小、颜色字体、大小、颜色等属性进行设等属性进行设置，置，CSS同样可以做到。同样可以做到。l我们将从
2、以下几个方面进行学习：我们将从以下几个方面进行学习：a a、字体、字体 b、文字大小、文字大小 c c、文字颜色、文字颜色 d d、文字粗细、文字粗细 e e、斜体、斜体 f f、文字的下划线、文字的下划线、g g、英文字母大小写、英文字母大小写字体字体 在在HTML语言中，对文字字体的控制，是通过语言中，对文字字体的控制，是通过 在在CSS中，则是通过中，则是通过font-family属性来控制的属性来控制的 p font-family:黑体黑体,宋体宋体,Arial,sans-serif;serif与与sans-serif区分区分KKserif字体字体sans-serif字体字体 我们发现
3、：左侧的我们发现：左侧的K较之右侧的较之右侧的K，在字笔画开始及结束的地方，在字笔画开始及结束的地方有额外的修饰，易读性更强，长时间阅读这样的字体不容易疲劳有额外的修饰，易读性更强，长时间阅读这样的字体不容易疲劳 左侧字体常用于正文，右侧字体常用于标题左侧字体常用于正文，右侧字体常用于标题案例演示案例演示文字大小文字大小lCSS对于文字大小控制是通过对于文字大小控制是通过 该属性的值可以是相对大小也可以是绝对大小，在这里提该属性的值可以是相对大小也可以是绝对大小，在这里提供了三种常用的数据单位：供了三种常用的数据单位：h1 font-size:12px;单位单位描述描述示例示例px像素（像素（
4、pixel）width:12px;em相对于当前对象内文本相对于当前对象内文本的字体尺寸的字体尺寸font-size:1.5em;Pt点点/磅（磅（point）font-size:9pt;案例演示案例演示文字颜色文字颜色l文字各种颜色的合理搭配，使得页面五彩缤纷，在文字各种颜色的合理搭配，使得页面五彩缤纷，在CSS中文字颜色的控制是通过中文字颜色的控制是通过lcolor属性的值有两种常用的表达方式：h1 color:#000000;#RRGGBB十六进制颜色单位十六进制颜色单位color:#FF0000;Color Name浏览器所支持的颜色名称浏览器所支持的颜色名称color:red;注意：
5、在设置某一个段落文字的颜色时，可以利用注意：在设置某一个段落文字的颜色时，可以利用标记，将标记，将需要的部分进行单独标注。需要的部分进行单独标注。案例演示文字粗细文字粗细l在在HTML语言中可以通过语言中可以通过标记或者标记或者标记将文字标记将文字设置成粗体。设置成粗体。l在在CSS中，提供了更为细致的划分中，提供了更为细致的划分font-weight:100;font-weight:200;font-weight:300;.font-weight:900;font-weight:bold;font-weight:normal;案例演示文字下划线、顶划线和删除线文字下划线、顶划线和删除线l提起
6、文字下划线，我们会联想到提起文字下划线，我们会联想到超链接无下划线特效。超链接无下划线特效。通过演示，我们来了解该属性具体的值的效果。通过演示，我们来了解该属性具体的值的效果。a:hover text-decoration:underline;案例演示英文字母大小写英文字母大小写l英文字母大小写转换是英文字母大小写转换是CSS提供的很实用的功能之一提供的很实用的功能之一ptext-transform:capitalize;/*单词首字大写单词首字大写*/text-transform:lowercase;/*全部小写全部小写*/text-transform:uppercase;/*全部大写全部大
7、写*/通过演示，我们来了解该属性具体的值的效果通过演示，我们来了解该属性具体的值的效果。案例演示文字实例一：模拟文字实例一：模拟Google公司公司Logo 要求做出如下图片所示效果：提示：提示：1、整体上控制字体大小、字体间距以及字体类型、整体上控制字体大小、字体间距以及字体类型 2、采用、采用标签分割每一个字符，单独添加样式标签分割每一个字符，单独添加样式 3、颜色的采集通过、颜色的采集通过TakeColor软件进行截取软件进行截取案例演示Google网页演示文字实例二：制作页面的五彩标题文字实例二：制作页面的五彩标题 要求对“Super Title CSS”该标题进行样式指派，依次实现下
8、列图片实现效果：练习页面效果页面效果一：效果一：效果二：效果二：效果三：效果三：效果四：效果四：CSS段落文字对齐方式段落文字对齐方式l水平对齐通过属性 text-align 来控制l垂直对齐通过属性 vertical-align 来控制案例演示案例演示1案例演示2行间距和字间距行间距和字间距l行间距通过属性 line-height 来控制 l字间距通过属性 letter-spacing 来控制案例演示案例演示首字放大首字放大l在许多报刊或杂志的文章中，开篇第一个字很大，借此第一时间来吸引住顾客的眼球。问题：首字放大，有几种实现方式？如果想给段落的第一行设置下问题：首字放大，有几种实现方式？如果想给段落的第一行设置下 划线效果又该如何实现？划线效果又该如何实现？案例演示段落实例：百度搜索段落实例：百度搜索要求实现如下图所示效果：提示：提示：1、在该页面中，一共有几种分类的文字？比如说：标题、内容、在该页面中，一共有几种分类的文字？比如说：标题、内容 2、哪些部分虽处于同一行文字样式却有不同之处，该采用什么标签？、哪些部分虽处于同一行文字样式却有不同之处，该采用什么标签？案例演示千里之行 始于足下18