div+css幻灯片.ppt

DIV+CSS 网页设计 基础知识及概念 讲师：王靖 学习目标 CSS样式概述 1、什么是CSS样式 2、CSS的语法 3、 CSS样式面板与属性、 什么是CSS样式 CSS是“Cascading style sheet”的缩写。是对HTML语法的革新。 样式表是动态网页的一部分，建立样式表的意义在于把对象引入到HTML中，使其可以使用脚本程序调用和改变对象属性，从而使网页中的对象产生动态的效果。 简化了HTML中各种繁琐的标签，使各标签的属性更具一般性和通用性，扩充原来的功能。 CSS样式表的功能 可以灵活地控制网页中文字的字体、颜色、大小、间距、风格及位置。 可以灵活地设置一个文本块的行高、缩进，并可以加入三维效果的边框。 DOCTYPE含义与选择 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd 严格类型(Strict)和过渡类型(transitional) 建议大家使用transitional类型 DOCTYPE含义与选择 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd DOCTYPE含义与选择 * 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如br，完整代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN /TR/xhtml1/DTD/xhtml1-strict.dtd XHTML 相对 HTML 的几大区别 XHTML 要求标记名称/属性名称必须小写XHTML 所有元素必须关闭 XHTML 区分大小写XHTML 属性值要用双引号XHTML 用 id 属性代替 name 属性XHTML 属性值必须使用完整形式XHTML 要求正确嵌套  在HTML引入CSS的方法 外联式样式表 内嵌样式表 元素内定 导入样式表  在HTML引入CSS的方法 外联式样式表 例：head link rel=stylesheet href=/css/default.css /head body .... /body /html 属性：rel 用来说明link元素在这里要完成的任务是连接一个独立的css文件。而href属性给出了所要连接css文件的url地址 在HTML引入CSS的方法 内嵌式样式表： 例：html head style type=text/css !-- td{font:9pt;color:red} .font105{font:10.5pt;color:blue} -- /style /head body..../body /html  在HTML引入CSS的方法 元素内定 格式：p style=font-size:10.5pt 在HTML引入CSS的方法 导入式样式表 〈html head style type=text/css !-- @import url(css/home.css); -- /style body .... /body /html  css的优先级 越接近目标的样式定义优先级越高，高优先级样式将继承低优先级样式的未重叠定义但覆盖重叠的定义 如果4种样式表对同一元素定义了不同的样式，那么他们的优先级顺序从高到低是，元素内定，内嵌样式表，导入样式表，外联样式表。  行内样式 ID样式 类别样式 标记样式 CSS的语法 样式表的一般形式： HTML标签{标签属性：属性值;标签属性：属性值; 标签属性：属性值;……} 其中：HTML标签不带尖括号。 标签属性：属性值 两个参数是一一对应的，每个属性与属性值之间 用分号隔开。若属性名由两个或两个以上的单词构成 时，单词之间以“-”隔开。 CSS的选择器 CSS的标记选择器 CSS的“类”选择器 CSS的“ID”选择器 CSS的选择器 CSS的交集选择器 CSS的并集选择器 CSS的后代选择器 * * * CSS样式表是Dreamweaver中的重点和难点， 通过本章的学习，大家要理解CSS样