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

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

ID:39211525

大小:488.00 KB

页数:18页

时间:2019-06-27

使用CSS样式表设置丰富的文字效果_第1页
使用CSS样式表设置丰富的文字效果_第2页
使用CSS样式表设置丰富的文字效果_第3页
使用CSS样式表设置丰富的文字效果_第4页
使用CSS样式表设置丰富的文字效果_第5页
资源描述:

《使用CSS样式表设置丰富的文字效果》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、第七讲使用CSS设置丰富的文字效果回顾基本的选择符有哪三种?优先级如何?更多类型的选择符有哪些?常用的CSS数据单位有哪些?样式表有几种导入方式?它们的区别及优先级如何?会使用CSS文字样式文字实例:模拟Google公司的logo会使用CSS段落文字段落实例:百度搜索本讲目标导入文字是网页设计中必不可缺的元素,使用过word的用户会发现,word可以对文字的字体、大小、颜色等属性进行设置,CSS同样可以做到。我们将从以下几个方面进行学习:a、字体b、文字大小c、文字颜色d、文字粗细e、斜体f、文字的下划线、g、英文字母大小写字体在HTML语言中,对文字字体的控制

2、,是通过在CSS中,则是通过font-family属性来控制的p{font-family:"黑体","宋体",Arial,sans-serif;}serif与sans-serif区分K

K

serif字体sans-serif字体我们发现:左侧的K较之右侧的K,在字笔画开始及结束的地方有额外的修饰,易读性更强,长时间阅读这样的字体不容易疲劳左侧字体常用于正文,右侧字体常用于标题案例演示文字大小CSS

3、对于文字大小控制是通过该属性的值可以是相对大小也可以是绝对大小,在这里提供了三种常用的数据单位:h1{font-size:12px;}单位描述示例px像素(pixel)width:12px;em相对于当前对象内文本的字体尺寸font-size:1.5em;Pt点/磅(point)font-size:9pt;案例演示文字颜色文字各种颜色的合理搭配,使得页面五彩缤纷,在CSS中文字颜色的控制是通过color属性的值有两种常用的表达方式:h1{color:#000000;}#RRGGBB十六进制颜色单位color:#FF0000;ColorName浏览器所支持的颜色名

4、称color:red;注意:在设置某一个段落文字的颜色时,可以利用标记,将需要的部分进行单独标注。案例演示文字粗细在HTML语言中可以通过标记或者标记将文字设置成粗体。在CSS中,提供了更为细致的划分font-weight:100;font-weight:200;font-weight:300;……….font-weight:900;font-weight:bold;font-weight:normal;案例演示文字下划线、顶划线和删除线提起文字下划线,我们会联想到超链接无下划线特效。通过演示,我们来了解该属性具体的值的效果。a

5、:hover{text-decoration:underline;}案例演示英文字母大小写英文字母大小写转换是CSS提供的很实用的功能之一p{text-transform:capitalize;/*单词首字大写*/text-transform:lowercase;/*全部小写*/text-transform:uppercase;/*全部大写*/}通过演示,我们来了解该属性具体的值的效果。案例演示文字实例一:模拟Google公司Logo要求做出如下图片所示效果:提示:1、整体上控制字体大小、字体间距以及字体类型2、采用标签分割每一个字符,单独添加样式3

6、、颜色的采集通过TakeColor软件进行截取案例演示Google网页演示文字实例二:制作页面的五彩标题要求对“SuperTitleCSS”该标题进行样式指派,依次实现下列图片实现效果:练习页面效果页面效果一:效果二:效果三:效果四:CSS段落文字对齐方式水平对齐通过属性text-align来控制垂直对齐通过属性vertical-align来控制案例演示案例演示1案例演示2行间距和字间距行间距通过属性line-height来控制字间距通过属性letter-spacing来控制案例演示案例演示首字放大在许多报刊或杂志的文章中,开篇第一个字很大,借此第一时间来吸引住

7、顾客的眼球。问题:首字放大,有几种实现方式?如果想给段落的第一行设置下划线效果又该如何实现?案例演示段落实例:百度搜索要求实现如下图所示效果:提示:1、在该页面中,一共有几种分类的文字?比如说:标题、内容……2、哪些部分虽处于同一行文字样式却有不同之处,该采用什么标签?案例演示千里之行始于足下18

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。