使用CSS样式表设置丰富的文字效果.ppt

  1. 1、本文档共17页,可阅读全部内容。
  2. 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
基本的选择符有哪三种?优先级如何? 更多类型的选择符有哪些? 常用的CSS数据单位有哪些? 样式表有几种导入方式?它们的区别及优先级如何? 本讲目标 会使用CSS文字样式 文字实例:模拟Google公司的logo 会使用CSS段落文字 段落实例:百度有哪些信誉好的足球投注网站 导入 文字是网页设计中必不可缺的元素,使用过word的用户会发现,word可以对文字的字体、大小、颜色等属性进行设置,CSS同样可以做到。 我们将从以下几个方面进行学习: a、字体 b、文字大小 c、文字颜色 d、文字粗细 e、斜体 f、文字的下划线、 g、英文字母大小写 字体 在HTML语言中,对文字字体的控制,是通过 在CSS中,则是通过font-family属性来控制的 serif与sans-serif区分 文字大小 CSS对于文字大小控制是通过 该属性的值可以是相对大小也可以是绝对大小,在这里提供了三种常用的数据单位: 文字颜色 文字各种颜色的合理搭配,使得页面五彩缤纷,在CSS中文字颜色的控制是通过 color属性的值有两种常用的表达方式: 文字粗细 在HTML语言中可以通过b标记或者strong标记将文字设置成粗体。 在CSS中,提供了更为细致的划分 文字下划线、顶划线和删除线 提起文字下划线,我们会联想到超链接无下划线特效。 通过演示,我们来了解该属性具体的值的效果 英文字母大小写 英文字母大小写转换是CSS提供的很实用的功能之一 文字实例一:模拟Google公司Logo 要求做出如下图片所示效果: 文字实例二:制作页面的五彩标题 要求对“Super Title CSS”该标题进行样式指派,依次实现下列图片实现效果: CSS段落文字对齐方式 水平对齐通过属性 text-align 来控制 垂直对齐通过属性 vertical-align 来控制 行间距和字间距 行间距通过属性 line-height 来控制 字间距通过属性 letter-spacing 来控制 首字放大 在许多报刊或杂志的文章中,开篇第一个字很大,借此第一时间来吸引住顾客的眼球。 段落实例:百度有哪些信誉好的足球投注网站 * * font face=“黑体” p{ font-family:黑体, 宋体, Arial, sans-serif; } p style=font-family:serif; K/p p style=font-family:sans-serif;K/p serif字体 sans-serif字体 我们发现:左侧的K较之右侧的K,在字笔画开始及结束的地方有额外的修饰,易读性更强,长时间阅读这样的字体不容易疲劳 左侧字体常用于正文,右侧字体常用于标题 h1 { font-size:12px; } font-size:9pt; 点/磅(point) Pt font-size:1.5em; 相对于当前对象内文本的字体尺寸 em width:12px; 像素(pixel) px 示例 描述 单位 h1 { color:#000000; } color: red; 浏览器所支持的颜色名称 Color Name color:#FF0000; 十六进制颜色单位 #RRGGBB 注意:在设置某一个段落文字的颜色时,可以利用span标记,将需要的部分进行单独标注。 font-weight:100; font-weight:200; font-weight:300; ………. font-weight:900; font-weight:bold; font-weight:normal; a:hover{ text-decoration:underline; } p{ text-transform:capitalize; /*单词首字大写*/ text-transform:lowercase; /*全部小写*/ text-transform:uppercase; /*全部大写*/ } 通过演示,我们来了解该属性具体的值的效果。 提示:1、整体上控制字体大小、字体间距以及字体类型 2、采用span标签分割每一个字符,单独添加样式 3、颜色的采集通过TakeColor软件进行截取 案例演示 Google网页演示 练习页面 效果页面 效果一: 效果二: 效果三: 效果四: 问题:首字放大,有几种实现方式?如果想给段落的第一行设置下 划线效果又该如何实现?

文档评论(0)

676200 + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档