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

Copyright?2010-2012HdwntInc.AllRightsReserved.了了了了了了来了来了Copyright?2010-2012HdwntInc.AllRightsReserved.*s回顾基本的选择符有哪三种？优先级如何？0101020304更多类型的选择符有哪些？常用的CSS数据单位有哪些？样式表有几种导入方式？它们的区别及优先级如何？020304会使用CSS文字样式文字实例：模拟Google公司的logo会使用CSS段落文字段落实例：百度搜索01本讲目标01文字是网页设计中必不可缺的元素，使用过word的用户会发现，word可以对文字的字体、大小、颜色等属性进行设置，CSS同样可以做到。我们将从以下几个方面进行学习：字体文字大小文字颜色文字粗细斜体文字的下划线、英文字母大小写导入字体在HTML语言中，对文字字体的控制，是通过在CSS中，则是通过font-family属性来控制的fontface=“黑体”p{font-family:黑体,宋体,Arial,sans-serif;}serif与sans-serif区分案例演示04我们发现：左侧的K较之右侧的K，在字笔画开始及结束的地方有额外的修饰，易读性更强，长时间阅读这样的字体不容易疲劳左侧字体常用于正文，右侧字体常用于标题05pstyle=font-family:serif;K/ppstyle=font-family:sans-serif;K/p01sans-serif字体03serif字体02文字大小CSS对于文字大小控制是通过该属性的值可以是相对大小也可以是绝对大小，在这里提供了三种常用的数据单位：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浏览器所支持的颜色名称color:red;注意：在设置某一个段落文字的颜色时，可以利用span标记，将需要的部分进行单独标注。案例演示文字粗细在HTML语言中可以通过b标记或者strong标记将文字设置成粗体。在CSS中，提供了更为细致的划分font-weight:100;font-weight:200;font-weight:300;……….font-weight:900;font-weight:bold;font-weight:normal;案例演示a:hover{text-decoration:underline;}03案例演示04文字下划线、顶划线和删除线01提起文字下划线，我们会联想到超链接无下划线特效。通过演示，我们来了解该属性具体的值的效果。02英文字母大小写英文字母大小写转换是CSS提供的很实用的功能之一p{ text-transform:capitalize;/*单词首字大写*/ text-transform:lowercase;/*全部小写*/ text-transform:uppercase;/*全部大写*/}通过演示，我们来了解该属性具体的值的效果。案例演示文字实例一：模拟Google公司Logo要求做出如下图片所示效果：提示：1、整体上控制字体大小、字体间距以及字体类型2、采用span标签分割每一个字符，单独添加样式3、颜色的采集通过TakeColor软件进行截取案例演示Google网页演示文字实例二：制作页面的五彩标题要求对“SuperTitleCSS”该标题进行样式指派，依次实现下列图片实现效果：练习页面效果页面效果一：效果二：效果三：效果四：CSS段落文字对齐方式水平对齐通过属性text-align来控制垂直对齐通过属性vertical-align来控制案例演示案例演示1案例演示2Copyright?2010-2012HdwntInc.AllRightsReserv