《网页设计课件第四章》由会员分享，可在线阅读，更多相关《网页设计课件第四章（33页珍藏版）》请在金锄头文库上搜索。
1、第四章 使用CSS样式表 美化网页 1、认识CSS样式表 2、设置CSS样式表属性 3、应用CSS样式表 4、管理CSS样式表,第四章 使用CSS样式表美化网页,4.1 认识CSS样式表 在设计网页时，经常要对网页中文本的字体、颜色、大小、间距、风格以及位置等进行设置。对一个网站来讲，这些文本的格式都是基本相同的，此时便可通过CSS样式表来实现风格的统一。,第四章 使用CSS样式表美化网页,4.1.1 CSS样式表 CSS样式就是层叠样式表，它是一种用来进行网页风格设计的样式表技术。 CSS样式表主要包括：类CSS样式、ID CSS样式、标签CSS样式、复合内容CSS样式。,第四章 使用CSS
2、样式表美化网页,一、类CSS样式 类是可以在任何标记内使用的样式，格式为： .类名称 属性：属性值； 属性：属性值； ,第四章 使用CSS样式表美化网页,在网页正文中使用样式表中类的方法是： ,第四章 使用CSS样式表美化网页,例如： 无标题文档 .STYLE2 font-family: “新宋体“; font-size: x-large; sfzxc ,第四章 使用CSS样式表美化网页,二、ID CSS样式 ID CSS样式是针对某个具有特定ID名称的对象进行样式定义，即ID CSS样式不能应用于多个对象，而是自动应用到具有该ID名称的对象上。,第四章 使用CSS样式表美化网页,如： 无标题
3、文档 # top height:500px; width:100% ; sfzxc ,第四章 使用CSS样式表美化网页,三、标签CSS样式 可对特定标签进行样式定义，其显著特征是该类样式会被该标签的所有对象自动应用样式。,第四章 使用CSS样式表美化网页,如： 无标题文档 top height:500px; width:100% ; 标签CSS样式的应用。 ,第四章 使用CSS样式表美化网页,四、复合内容CSS样式 该样式对超链接各状态的显示效果进行样式定义。其显著特征是该类样式将自动被所有创建了超链接的对象应用。,第四章 使用CSS样式表美化网页,如： 无标题文档 a:link font-s
4、ize:140px color:#FF0000 超链接 ,第四章 使用CSS样式表美化网页,4.1.2 创建CSS样式表 一、CSS面板,第四章 使用CSS样式表美化网页,二、CSS样式表的保存位置 CSS样式表可以放置在网页内部，也可以作为单独的文件保存在网页外部。若单个网页需要这个样式，则保存到网页内部；若多个网页需要相同的样式，则保存到网页外部。,第四章 使用CSS样式表美化网页,1、保存到网页内部 保存在网页内部的CSS样式表代码会放置在网页头部，即.标记中，或者放置在某个具体对象的内容中。,第四章 使用CSS样式表美化网页,2、保存到网页外部 外部CSS样式表的扩展名为.css，若要
5、使用扩展名为.css的CSS样式表时，需要先将该文件链接到网页中。,第四章 使用CSS样式表美化网页,在网页中链接外部样式表的标记格式为: 在标记中,除了样式表文件名需要指定外,其他属性值都是固定的。,第四章 使用CSS样式表美化网页,4.2 设置CSS样式表属性 一、设置类型属性,第四章 使用CSS样式表美化网页,二、设置背景属性,第四章 使用CSS样式表美化网页,练习题:利用CSS样式表的类型和背景属性，制作一个网页背景为蓝色，字体颜色为白色，字体大小为20px，字体为楷体的导航栏,第四章 使用CSS样式表美化网页,三、设置区块属性,第四章 使用CSS样式表美化网页,四、设置方框属性,第四
6、章 使用CSS样式表美化网页,五、设置边框属性,第四章 使用CSS样式表美化网页,例如：如图所示，制作一网页。要求：咏柳两个字的字体为隶书，字体大小为36px,居中对齐；边框为双线，颜色为红色，边框宽度为mm，背景为某一图片,第四章 使用CSS样式表美化网页,第四章 使用CSS样式表美化网页,六、设置列表属性,第四章 使用CSS样式表美化网页,如图所示，利用样式表制作该网页,第四章 使用CSS样式表美化网页,七、设置定位属性,第四章 使用CSS样式表美化网页,“类型”下拉列表框：用于设置定位的方式，包括“绝对”，“相对”和“静态”等选项。 “显示”下拉列表框：确定层的显示方式，包括“继承”、“可见”和“隐藏”等 “Z轴”下拉列表框：确定层的堆叠顺序，编号较高的层显示在编号较低的层的上面。,第四章 使用CSS样式表美化网页,“溢出”下拉列表框：确定当层的内容超出层的大小时的处理方式。 “定位”栏：指定层的位置和大小。 “剪辑”栏：定义层的可见部分。,第四章 使用CSS样式表美化网页,例如：如图所示，制作一网页,第四章 使用CSS样式表美化网页,八、设置扩展属性,第四章 使用CSS样式表美化网页,
