样式表的各项属性.ppt

样式表的各项属性.ppt

ID:56433718

大小:181.00 KB

页数:33页

时间:2020-06-18

样式表的各项属性.ppt_第1页
样式表的各项属性.ppt_第2页
样式表的各项属性.ppt_第3页
样式表的各项属性.ppt_第4页
样式表的各项属性.ppt_第5页
资源描述:

《样式表的各项属性.ppt》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、网页制作样式表的各项属性样式表的各项属性字体图文和布局颜色和背景定位一、字体1、CSS文字样式1.1字体1.2文字大小1.3文字颜色1.4加重字体和斜体字的各种CSS方式1.5文字的CSS特殊效果2、文字实例:模拟Goole公司logo3、CSS段落文字4、段落实例:百度搜索1.1字体在CSS中通过font-family来控制文字的字体。h2{font-family:黑体,幼圆;}示例1.2文字大小使用font-size属性,你可以对文字的尺寸进行无限的控制。确定这的3种基本方法:1)Points,ems,pixels,及其它单位P{fo

2、nt-size:16pt}B{font-size:1.5em}/*在父标记的基础上×0.5*/P{font-size:20px}/*象素,因此实际显示大小与分辨率有关,很常用的方式*/其它单位:如果上述单位仍然不符合你的要求,请试试这些单位:in(英寸)cm(厘米)mm(毫米)pc(打字机字型尺寸单位)1.2文字大小2)关键字如果你不喜欢使用这些单位,你还可以选择以关键字说明文字尺寸,例:P{font-size:large}有7种关键字,相对应于中所用的数字参数:xx-smallx-smallsmallmediumla

3、rgex-largexx-large1.2文字大小3)比例参数设定文字尺寸的第3种办法就是使用比例参数,例:B{font-size:300%}/*在父标记的基础上200%*/1.3文字颜色控制文字颜色时统一使用color属性。而颜色的表示方法有很多种:第1种采用RGB颜色表示,如:h2{color:rgb(51,204,0);}RGB的数值范围从0到255,R代表红色,G代表绿色,B代表蓝色第2种采用16进制的表示方式:p{color:#333333;}第3种采用预定义的关键字,如bluepspan{color:blue;}颜色名称16种

4、基本色为aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,andyellow.InternetExplorer4.0支持的颜色.doc1.4加重字体和斜体字的各种CSS方式1)字体风格font-style是用来控制斜体字的属性:语法:font-style:normal

5、italic

6、oblique参数:normal:正常的字体 italic:斜体。对于没有斜体变量的特殊字体,将应用oblique oblique:倾斜

7、的字体示例:H3{font-style:italic}1.4加重字体和斜体字的各种CSS方式2)字重font-weight(设置文本字体的粗细):利用字重属性,可以创造出一系列新的加重字体。语法:font-weight:normal

8、bold

9、bolder

10、lighter

11、number参数:normal:正常的字体。相当于number为400。声明此值将取消之前任何设置bold:粗体。相当于number为700。也相当于b对象的作用bolder:IE5+ 特粗体lighter:IE5+ 细体number:IE5+ 100

12、200

13、300

14、

15、400

16、500

17、600

18、700

19、800

20、900示例:P{font-weight:bold}1.5文字的CSS特殊效果1)文字变形(text-transform):这项属性可以使你轻而易举地控制字母大写。基本代码:B{text-transform:uppercase}以下为所有可用的参数:uppercase使所有字母大写显示lowercase使所有字母小写显示capitalize使每个单词的第1个字母大写显示.none使所有继承的文字变形参数被忽略,文字将以正常形式显示。1.5文字的CSS特殊效果2)文字修饰(text-decoration

21、)。其基本语法如下:B{text-decoration:underline}以下为所有可用的参数:underline给文字下划线,overline给文字上划线,line-through给文字划出删除线.blink文字在闪烁(IE浏览器不支持)none使得上述效果都不会发生。2、文字实例:模拟Goole公司logo示例3、段落实例:百度搜索示例二、布局字间距字母间距行高文字对齐方式垂直对齐方式文字缩位顶边距、左边距等空格填充-顶部、左边等等边框-宽度、颜色、样式等浮动清除1、css控制字间距和字母间距字间距利用字间距属性,你可以在字之间加入

22、更多的距离:H3{word-spacing:1em}你所使用的参数值将加入任何浏览器的缺省设置,你可以使用我们昨天谈到的任何一种长度单位:in(英寸)cm(厘米)mm(毫米)pt(点数)pc(

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

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

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