CSS样式jpfppt课件.ppt

CSS的属性 CSS属性有很多种分类，我们以Dreamweaver MX中对CSS属性的分类为准，来学习CSS各类属性的作用。 CSS属性在Dreamweaver MX中被分为8大类：类型、背景、区块、盒子、边框、列表、定位、扩展。 进入Dreamweaver MX，打开定义样式对话框，分别解释8大类的属性。 一、类型属性 该类属性主要是用于定义网页中文本的字体、颜色及字体风格等。 （包含9种CSS属性） 二、背景属性 该类属性主要是在网页的元素后面加入固定的背景色或图象。（包含6种CSS属性） 三、区块属性 该类属性主要是控制网页块中内容的间距、对齐方式、文字缩进等。（这里指的块，我们可以理解为段落，它包含6种CSS属性） 四、盒子（框盒）属性 该类属性主要是用于将网页中的块元素都看作是包在一个盒子中。 （包含6种CSS属性） 五、边框属性 该类属性主要针对盒子边框的。（包含3种CSS属性） 六、列表属性 该类属性主要是控制列表的各元素的。（包含3种CSS属性） 七、定位属性 该类属性主要用于精确地控制网页中元素（主要针对层）的位置。（包含6种CSS属性） 八、扩展属性 该类属性包含两部分： 1、分页：其作用是为打印的页面设置分页符。 2、视觉效果：其作用是为网页中的元素施加特殊效果。是什么呢?----就是滤镜. CSS的另一类属性----滤镜属性 滤镜可以为网页中的元素施加各种奇妙的滤镜效果，Dreamweaver系统提供了15种滤镜： 1）、Alpha滤镜 作用：让对象呈现半透明的效果，其各项参数及功能如下： Opacity:设置图片的不透明度，单位为“百分比”，值从0~100，0表示完全透明，100表示完全不透明。FinishOpacity:这是一个同Opacity一起使用的选择性参数，当同时设定这两个参数时，可以制作出透明渐进的效果。值从0~100，0表示完全透明，100表示完全不透明。 * * 我们上网的人都有这样的经验,将浏览器的显示字体变大或变小,网页中的文本也会随着发生改变。实际上好的网页却不会发生这种现象，无论我们怎样改变浏览器的显示字体大小，网页中的文本保持着原有外观，这就是CSS样式的作用。有了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等。）标记属性、属性值 这两个参数是一一对应的，每个属性与属性值之间用分号“；”分开。 HTML标记{标记属性:属性值;标记属性:属性值; 标记属性:属性值;标记属性:属性值; ....}。 CSS的语法 注意在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-decor