已阅读5页,还剩13页未读, 继续免费阅读
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
第七讲,使用CSS设置 丰富的文字效果,回顾,基本的选择符有哪三种?优先级如何? 更多类型的选择符有哪些? 常用的CSS数据单位有哪些? 样式表有几种导入方式?它们的区别及优先级如何?,会使用CSS文字样式 文字实例:模拟Google公司的logo 会使用CSS段落文字 段落实例:百度搜索,本讲目标,导入,文字是网页设计中必不可缺的元素,使用过word的用户会发现,word可以对文字的字体、大小、颜色等属性进行设置,CSS同样可以做到。 我们将从以下几个方面进行学习: a、字体 b、文字大小 c、文字颜色 d、文字粗细 e、斜体 f、文字的下划线、 g、英文字母大小写,字体,在HTML语言中,对文字字体的控制,是通过 在CSS中,则是通过font-family属性来控制的,serif与sans-serif区分,K K,serif字体,sans-serif字体,我们发现:左侧的K较之右侧的K,在字笔画开始及结束的地方有额外的修饰,易读性更强,长时间阅读这样的字体不容易疲劳 左侧字体常用于正文,右侧字体常用于标题,案例演示,文字大小,CSS对于文字大小控制是通过 该属性的值可以是相对大小也可以是绝对大小,在这里提供了三种常用的数据单位:,h1 font-size:12px; ,案例演示,文字颜色,文字各种颜色的合理搭配,使得页面五彩缤纷,在CSS中文字颜色的控制是通过 color属性的值有两种常用的表达方式:,h1 color:#000000; ,注意:在设置某一个段落文字的颜色时,可以利用标记,将需要的部分进行单独标注。,案例演示,文字粗细,在HTML语言中可以通过标记或者标记将文字设置成粗体。 在CSS中,提供了更为细致的划分,font-weight:100; font-weight:200; font-weight:300; . font-weight:900; font-weight:bold; font-weight:normal;,案例演示,文字下划线、顶划线和删除线,提起文字下划线,我们会联想到超链接无下划线特效。 通过演示,我们来了解该属性具体的值的效果。,a:hover text-decoration:underline; ,案例演示,英文字母大小写,英文字母大小写转换是CSS提供的很实用的功能之一,p text-transform:capitalize; /*单词首字大写*/ text-transform:lowercase; /*全部小写*/ text-transform:uppercase; /*全部大写*/ ,通过演示,我们来了解该属性具体的值的效果。,案例演示,文字实例一:模拟Google公司Logo,要求做出如下图片所示效果:,提示:1、整体上控制字体大小、字体间距以及字体类型 2、采用标签分割每一个字符,单独添加样式 3、颜色的采集通过TakeColor软件进行截取,案例演示,Google网页演示,文字实例二:制作页面的五彩标题,要求对“Super Title CSS”该标题进行样式指派,依次实现下列图片实现效果:,练习页面,效果页面,效果一:,效果二:,效果三:,效果四:,CSS段落文字对齐方式,水平对齐通过属性 text-align 来控制 垂直对齐通过属性 vertical-align 来控制,案例演示,案例演示1,案例演示2,行间距和字间距,行间距通过属性 line-height 来控制 字间距通过属性 letter-spacing 来控制,案例演示,案例演示,首字放大,在许多报刊或杂志的文章中,开篇第一个字很大,借此第一时间来吸引住顾客的眼球。,问题:首字放大,有几种实现方式?如果想给段落的第一行设置下 划线效果又该如何实现?,案例演示,段落实例:百度搜索,要求实现如下图所示效果:
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 高考物理总复习专题十二机械振动光学第1讲机械振动、振动图像练习含答案
- 教你写一份合格的上班玩方式保证书
- 《化学方程式》课件
- 高考地理一轮复习第五章地表形态的塑造第一节常见地貌类型和地貌的观察课件
- 河北省南宫市高中地理 锋面系统与天气教案 新人教版必修1
- 春高中化学 第三章 金属及其化合物 第三节 用途广泛的金属材料教案 新人教版必修1
- 高中数学 第2章 统计 2.2 总体分布的估计 2.2.2 频率分布直方图与折线图教案 苏教版必修3
- 2024-2025学年高中化学 第二章 第三节 分子的性质 第2课时 较强的分子间作用力-氢键教案 新人教版选修3
- 2024年六年级道德与法治下册 第四单元 让世界更美好 9 日益重要的国际组织教案 新人教版
- 高中英语 Unit 3 Travel journal Period 1教案 新人教版必修1
- 蓝色简约风中国空军成立75周年纪念日
- 期中考试卷(试题)-2024-2025学年苏教版二年级数学上册
- 2024年全国企业员工全面质量管理知识竞赛题库(含答案)(共132题)
- 知识创业思维与方法智慧树知到答案2024年湖南师范大学
- ISO内审检查表(完整版)
- 野生动物管理学智慧树知到答案章节测试2023年东北林业大学
- 文明如厕讲卫生PPT课件
- 证券公司年度营业部经营管理业绩考核办法
- 电子工程师必备基础知识
- 网站建设与运营课程标准
- 用户运营基础知识
评论
0/150
提交评论