第三章Css文字效果.ppt

《第三章Css文字效果.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Css文字效果主讲：肖玉强3.1css文字样式3.2文字实例：模拟google公司logo3.3css段落文字3.4段落实例：百度搜索1.字体回顾：html中的字体的设置方式Css：font-familyEg.P{font-family:楷体,华文彩云;}这个语句声明了html页面中p标记的字体名称，并且同时声明了两个字体名称，其含义是告诉浏览者首先在访问者的计算机中寻找楷体，如果没有楷体，就寻找华文彩云；如果这两种字体都没有，则使用浏览器

2、的默认字体显示。3.1Css文字样式Font-family属性可以同时声明多种字体，字体之间用逗号分隔开。注意：英文字体样式时，一些字体的名称中间会出现空格，eg.timesnewroman，这时需要用英文输入状态下的双引号将其引起来，使浏览者知道这是一种字体的名称。Eg.P{font-family:arial,”timesnewroman”提示：很多设计者喜欢使用各种各样的字体来给页面添彩，但许多字体在大多数用户的机器上都没有安装，因此一定要设置多个备选

3、字体，避免浏览器直接替换成默认的字体。最好的办法是将使用了生僻字体的部分，用图形软件制作成小的图片，再加载到页面中。2.文字大小回顾：html的表示方法Css：font-size控制文字大小该属性的值可以使用很多种长度单位。px—像素，表示在浏览器上1个像素的大小，因为不同用户的显示器分辨率不同，而且每个像素的实际大小也不相同，所以px被称为相对单位，也就是相对于1个像素的比例。in—inch，英寸cm-centermeter，厘米mm—millimeter，毫米pt—point，印刷的点数，在一般

4、的显示器中1pt相当于1/72inchpc—pica,1pc=12pt以上者5种单位称为绝对长度单位，他们不会随显示器的变化而变化。当然这5种单位还是用于div的高度和宽度。查看2.html，3.htmlC.%-使用百分比为单位，表示文字的大小为原来的倍数。注意：font-size-adjust（当首选字体不可用时，对替换字体进行智能缩放）、font-stretch（对字体进行水平拉伸）在css2.1已删除3.文字颜色与背景颜色A、文字颜色回顾：html中的表示方法Css：表示方法Blue-英文单词

5、#0000ff-十六进制数值#abc-十六进制数值的简写方式，当#aabbcc的颜色值时，就可以简写（0,0，255）-十进制数值（0%，0%，100%）-红蓝绿3个颜色分量的百分比B、背景颜色属性：background-color4、文字加粗、倾斜回顾：html中的表示方法Css：font-weight：控制文字的粗细normal默认值。定义标准的字符。bold定义粗体字符。bolder定义更粗的字符。lighter定义更细的字符。font-style：控制字体的倾斜，属性值为：正常（normal

6、）、意大利体（italic）、倾斜（oblique）。注意在windows上，并不能区分oblique和italic，它们都是按照italic方式来显示的。对于中文来说，这样的情况很少见。案例:3-6.html5、文字的装饰效果回顾：html中的表示方法Css：text-decoration，给文字加上下划线、顶划线和删除线的功能。属性值：underline—下划线overline—顶划线linethrough—删除线blink—闪烁（在ie中无效，在firefox中有效）若希望文字同时具有以上功能

7、，可以将上述值同时应用，属性值之间用空格分开3-8.html,3-9.html6、CSS控制英文字母的大小写要用到text-transform{text-transform:capitalize;/*首字母大写*/text-transform:lowercase;/*全部小写*/text-transform:uppercase;/*全部大写*/}3-10.html7、字母间隔Letter-spacing，可取值包括所有长度，默认关键字是normal，输入的长度值会使字母之间增加或减少指定的量。与wo

8、rd-spacing的区别在于字母间隔修改的是字符或字母之间的间隔。3.2文字实例：模拟google公司logo应用所学CSS知识，以代码的形式，模拟做出google公司的logo。3-11.htmlp{text-transform:capitalize;font-size:80px;Letter-spacing:-2;font-family