【网页制作课件】CSS样式.pptVIP

我们上网的人都有这样的经验,将浏览器的显示字体变大或变小,网页中的文本也会随着发生改变。实际上好的网页却不会发生这种现象，无论我们怎样改变浏览器的显示字体大小，网页中的文本保持着原有外观，这就是CSS样式的作用。有了CSS样式，我们可以快速准确保页面的布局与外观在各种浏览器中保持一致。 主要内容： 一、什么是CSS样式？ 二、CSS的语法 三、放置CSS代码 四、 CSS样式面板 五、 CSS的属性 六、使用Dreamweaver 创建CSS实例 七、本节小结 什么是CSS样式？ CSS是“Cascading Style Sheet”的缩写，有些书上把它翻译成“层叠样式表”或“级联样式表”（简称为样式表），它实质上是对HTML标记制定的一个统一的标准、控制文本或文本区外观的一组属性。换句话说，CSS样式表是一个格式设置的集合，用来控制网页中各种元素的显示效果。使用CSS样式表，用户可以有更大的灵活性来控制精确的页面显示效果。 样式表有自己独特的书写方法，它们一般被定义成以下形式的语法： HTML标记（或标签），如 P、 Body、 Div、 Table等。（特别提示：在这里使用HTML标记时，是不带尖括号的，所以不能写成：P、Body、Div、Table等。） 标记属性、属性值 这两个参数是一一对应的，每个属性与属性值之间用分号“；”分开。 注意在CSS中属性名称的写法： 凡属性名由两个或两个以上的单词构成时，单词之间用“-”号隔开，例如，背景颜色属性应书写为：background-color ，字体大小：font-size ，文字下划线：text-decoration ，等。（而在脚本语言中的书写规定是第二个或第二个以上的单词用连写且第一个字母大写来表示：例如backgroundColor，fontSize，textDecoration等。）请注意区别！ 下面是一段比较典型的CSS代码： p{font-family:“宋体”; font-size:9pt; line-height:12pt; color:#000000} td{font-family:“楷体＿GB2312”; font-size:20pt; font-style:italic;font-weight:800; text-decoration:blink;color:#000000} a:hover{background-color:#ffccff;color:#ff6666; text-decoration:underline; float:left} a:link{color:#ff33ff; text-decoration:none} a:visited{color:#6600ff; text-decoration:none} a:active{color:green; text-decoration:none; background-color:#ffccff; float:right} 这段代码共有6段，分别实现两种功能： 前两行的格式分别为p{……}和td{……}，作用是对网页中文字的字体、大小、颜色等进行设置。 后4行均是a:命令词{……}的格式，是对超级链接文本的控制。 下面分别解释这6段CSS代码： 1）、第一段p{……}中的【 font-family:“宋体” 】:指定网页文字的字体。【font-size:9pt 】:指定网页文字的字号的大小，pt是表示文字大小的单位。 【line-height:12pt 】:指定行与行的垂直距离，即行高。 【color:#000000 】:指定网页的颜色，#000000代表黑色，为十六进制数。 第二段td{……}中的设置是对网页表格里的文字进行控制。 2）、链接文本的变化控制（例中的后4行） 第三段：a:hover{background-color: #ffccff; color:#ff6666; text-decoration:underline; float:left}（hover表示鼠标指针指向链接文字时，链接文字的背景颜色为#ffccff，前景颜色为#ff6666，链接显示下划线，文字向左浮动）。 第四段：a:link{color:#ff33ff; text-decoration: none }（link表示链接未被访问时，链接颜色为#ff33ff，链接无下划线）。 第五段：a:visited{color:#6600ff; text-decoration:none}（visited表示链接被访问后，链接的颜色为#6600ff，链接无下划线）。 第六段：a:active{color:green; text-decoration:none; ba