网页美工的设计第14章 使用CSS样式表美化网页.pptVIP

第14章使用CSS样式表美化网页 教学内容：对于已经设计好的页面及页面中的元素，都可以通过CSS对其进行修饰和美化，做到页面内容和显示效果的相分离。CSS还有一个较强大的滤镜功能，它可以不使用图像处理软件即能实现很多较好的滤镜效果。本章主要讲述CSS样式表、定义CSS属性、链接或导出外部样式表，最后通过实例讲述CSS在网页中的使用。 教学重点 了解CSS样式表 CSS基本语法 设置CSS属性 链接到或导出外部CSS样式表 应用CSS样式定义字体大小 应用CSS样式制作阴影文字 14.1 了解CSS样式表 CSS（Cascading Style Sheet，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。实际上，CSS是一系列格式规格或样式的集合，主要用于控制页面的外观，是目前网页设计中的一种常用技术与手段。 CSS具有强大的页面美化功能。通过使用CSS，可以控制许多仅使用HTML标记无法控制的属性，并能轻而易举地实现各种特效。 14.2 CSS基本语法 CSS的语法结构仅由3部分组成，分别为选择符、样式属性和值，基本语法如下。 14.3 设置CSS属性 CSS样式用来定义字体、颜色、边距和字间距等属性，可以使用Dreamweaver CC来对所有的CSS属性进行设置。CSS属性被分为9大类，分别是类型、背景、区块、方框、边框、列表、定位、扩展和过渡，下面分别进行介绍。 14.3.3设置CSS区块属性 在【分类】列表中选择【区块】选项，可以定义样式的间距和对齐设置。 14.3.4设置CSS方框属性 在【分类】列表中选择【方框】选项。 14.3.5设置CSS边框属性 在【分类】列表中选择【边框】选项，可以定义边框的属性。 14.3.6设置CSS列表属性 在【分类】列表中选择【列表】选项，为列表选项卡定义列表设置。 14.3.7设置CSS定位属性 在【分类】列表中选择【定位】选项。 14.3.8设置CSS扩展属性 在【分类】列表中选择【扩展】选项。 14.3.9设置过渡属性 在过去的几年中，大多数都是使用JavaScript来实现过渡效果。使用CSS可以实现同样的过渡效果。过渡效果最明显的表现就是当用户把鼠标悬停在某个元素上时高亮它们，如链接、表格、表单域、按钮等。过渡可以给页面增加一种非常平滑的外观。 * *