第三章 使用css制作页面样式

3、dy{margin:0;}div{font-size:18px;color:#FF0000;}7外部样式表单独的一个CSS文件控制网站的整体风格页面可以通过链接的方式把CSS文件中的样式应用到页面中8内部样式表的创建可视化操作创建内部样式选择新建CSS规则按钮新建CSS样式9新建CSS规则由类生成的样式前面带一个“.”，例如.btn，可用于任何文本、表格、背景等网页元素改变HTML标记

4、中的默认形式，例如、标记中的字体大小、字体颜色等伪类选择器控制超链接文本样式，例如a:link、a:visited、a:hover和A:active。ID选择器生成的样式前面带有一个“#”号，例如#main，控制页面中ID为main的页面元素样式10设置CSS规则定义——类型字体粗细字体大小行距文字修饰线字体颜色类型、背景、区块、方框、边框、列表、定位、扩展.btn{font-size:12px;line-height:20px;}11设置CSS规则定义——背景背景图像地址背景图像重复形

5、式背景图像的位置.btn{background-image:url(images/top.jpg);background-repeat:no-repeat;background-position:centercenter;}12设置CSS规则定义——边框边框样式边框宽度边框颜色.btn{border-top-width:1px;border-left-width:1px;border-top-style:dashed;border-left-style:solid;border-top-color:#FF3

6、300;border-left-color:#3366CC;}13外部CSS样式的创建外部样式表的创建方法方法一：选择菜单“文件”→“新建”CSS页面类型方法二：创建样式的同时新建CSS文件新建样式表文件CSS文件名称14链接外部样式表链接方式附加样式表CSS文件路径选择链接15CSS的应用美化瑞丽家居页面页面需求在素材页面中美化网页使用CSS设置字体大小使用CSS设置字体颜色使用CSS设置超链接样式

7、16使用CSS美化瑞丽家居页面页面分析伪类a{}表示超链接样式伪类a:hover{}表示当鼠标悬停在超链接上时，超链接文字的样式使用“class=样式名称”应用CSS样式完成效果教师演示操作过程17小结请思考：如何创建外部样式表？如何设置CSS样式，统一的改变页面中所有的文字字体大小？使单元格中的文字距上边框线（顶端）的距离为20px，应如何使用CSS设置？18用CSS美化淘宝网登录页面需求描述会员名和密码输入框设置为细边框样式，并且设置输入框的背景颜色登录按钮用图片代替鼠标悬停在登录按钮上时，鼠标呈手形1

8、9使用CSS设置背景样式重复：不重复、重复、横向重复、纵向重复水平位置：左对齐、居中、右对齐垂直位置：顶部、居中、底部transparent表示透明背景颜色20使用CSS设置方框样式设置背景图像时，通常会设置背景图像所在方框的大小边框的宽度和高度21使用CSS设置鼠标形状在扩展类型中设置“光标”的视觉效果22制作CSS样式制作会员名、密码输入框样式制作登录按钮的样式使用“class=样式名称”应用样式教师演示操作