CSS DIV技术.ppt

CSS+DIV技术 目录 CSS简介 （2）对HTML语言处理样式的最好补充 HTML语言对页面布局上的控制很有限，如精确定位、行间距或者字间距等；CSS样式表可以控制页面中的每一个元素，从而实现精确定位，CSS样式表控制页面布局的能力逐步增强。 （3）体积更小加快网页下载速度 样式表是简单的文本，文本不需要图像，不需要执行程序，不需要插件。这样层叠样式表就可以减少图像用量、减少表格标签及其他加大HTML体积的代码，从而减小文件尺寸加快网页的下载速度。 （4）实现动态更新、减少工作量 定义样式表，可以将站点上的所有网页指向一个独立的CSS样式表文件，只要修改CSS样式表文件的内容，整个站点相关文件的文本就会随之更新，减轻了工作负担。 （5）支持CSS的浏览器增多 样式表的代码有很好的兼容性，只要是识别串接样式表的浏览器就可以应用CSS样式表。当用户丢失了某个插件时不会发成中断；使用老版本的浏览器代码不会出现乱码的情况。 样式定义 样式定义的格式 选择符的分类 选择符的分类 选择符的分类 选择符的分类 样式定义 嵌入样式表 链接外部样式表 引入外部的样式表 引入外部的样式表 内嵌样式 CSS样式的优先级 CSS样式的优先级 CSS样式的优先级 CSS样式的优先级 9.4 Style对象 CSS属性 字体属性 字体属性 字体属性 字体属性 字体属性 文本属性 文本属性 颜色和背景属性 颜色和背景属性 颜色和背景属性 容器属性 列表属性 列表属性 定位和显示 标记与 标记 在设计页面时，CSS可以将元素放置在一个容器中。容器属性如表9.10所示。 CSS中列表的设定丰富了列表的外观。列表属性用于设置列表标记（ol和ul）的显示特性，其属性如表9.11所示。 在使用CSS排版的页面中， 与 是两个常用标记。利用这两个标记，加上CSS对其样式的控制，可以很方便的实现各种效果。 标记早在HTML 3.0时代就已经出现，但那时并不常用，直到CSS的出现，才逐渐发挥出它的优势。而 标记直到HTML 4.0时才被引入，它是专门针对样式表面设计的标记。 （divsion）简单而言是一个区块容器标记，即 之间相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节、摘要和备注等各种HTML元素。因此，可以把 中的内容视为一个独立的对象，用于CSS的控制。声明时只需要对 进行相应的控制，其中的各标记元素都会因此而改变。 例9.7 通过CSS对 块进行控制，制作一个宽400像素，高100像素的黄色区块，并设置相应的文字效果，如图9.15所示。 《JSP程序设计教程》课件 制作人：宋坤 【学习目标】 制作网页时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变整个页面的风格。通过本章的学习，读者可以达到以下学习目的： ●　了解什么是CSS ●　掌握样式的定义及使用 ●　掌握Style对象 ●　掌握CSS属性 ●　学会使用CSS+DIV美化与布局页面 【知识框架】 √ CSS简介 样式定义 使用样式 Style对象 CSS属性 CSS+DIV美化与布局页面 √ √ √ √ √ CSS就是一种叫做样式表（style sheet）的技术，也有人称之为层叠样式表（Cascading Style Sheet）。制作网页时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变整个页面的风格。 CSS样式表的特点如下： （1）将显示格式和文档结构分离 HTML语言定义文档的结构和各要素的功能，而层叠样式表将定义格式的部分和定义结构的部分分离，能够对页面的布局进行灵活的控制。 样式定义的格式 选择符的分类 √ √ 定义CSS的语句形式如下： selector property:value;property:value;… SELECTOR：选择符。 当多个对象具有相同的样式定义时，多个对象之间可以用逗号分隔，例如： tr,th font:12px;margin:20px;font-color:#336699 这里要注意，样式列表中的注释应写在“/* */ ”之间。 在CSS样式中有3种选择符分别是： （1）HTML选择符 HTML选择符就是HTML的标记符，例如P、BODY、A等。如果用CSS定义了他们，那么在整个网页中，该标识的属性都应用定义中的设置。HTML选择符的定义方法如下： tag property:value 例如，设置表格的单元格内的文字大小为9pt，颜色为蓝色的CSS代码如下： td font-size: 9pt;