8、层叠样式表(CSS).ppt

层叠样式表(CSS) 制作：潘院明 为什么需要CSS样式表 HTML标签的外观样式比较单一 颜色只有黑白 字体类型和大小无变化 样式表的作用相当于华丽的衣服 为什么需要CSS样式表 样式表能实现内容与样式的分离，方便团队开发 DHTML 简介 DHTML 的功能 DHTML 示例 什么是样式？ 常用的样式属性 行内（嵌入）样式表 行内样式 行内（嵌入）样式表 行内（嵌入）样式表 内嵌样式-1 内嵌样式-2 选择器 根据选择器的不同，内嵌样式又分为： HTML 选择器 CLASS 类选择器 ID 选择器 样式表基本语法 内嵌样式表 外部样式表文件 CSS样式应用结构 外部样式表文件 根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 导入（@import）外部样式表 链接外部样式表 使用LINK（链接）标签 ，语法： HEAD LINK rel = “stylesheet” type = ”text/css” href = ”样式表文件.css” /HEAD 导入外部样式表 使用@import导入 ，语法： HEAD STYLE TYPE=text/css @ import 样式表文件.css; /STYLE /HEAD 样式的混合使用 行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常 需要混合使用： 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式 某张网页内，部分内容”与众不同“，采用行内样式 三、CSS功能实现 CSS文字效果 CSS页面背景 控制表格 CSS与表单 CSS图片效果 页面和浏览器元素 CSS制作实用菜单 文本属性 1、 CSS文字效果 1)CSS文字样式(字体属性font) a.字体（font-family） font-family : name name : 字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格，则应使用引号括起eg: font-family: Courier, Courier New, monospace b.文字大小（font-size） 值常为:Npx、百分数 eg:p { font-style: normal; } p { font-size: 12px; } p { font-size: 20%; }  c.文字颜色（ color ） 值可为颜色单词、#FFFFFF d.文字粗细（font-weight） normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置 bold : 粗体。相当于number为700。也相当于b对象的作用 bolder : IE5+　特粗体 lighter : IE5+　细体 eg:span { font-weight:800; } e.斜体（font-style） normal : 正常的字体 italic : 斜体。对于没有斜体变量的特殊字体，将应用oblique oblique : 倾斜的字体 eg:p { font-style: oblique; } f.下划线、顶划线、删除线(text-decoration ) none : 　无装饰 blink : 　闪烁 underline : 　下划线 line-through : 　贯穿线 overline : 　上划线 有href特性的a以及u默认值为underline ;没有文本的对象此属性不会作用 eg: div { text-decoration : underline overline; } eg: 做一个无下划线的链接，且字体为绿色，如下： a href=例程3-1.html style=color:green; text-decoration:none  g.文字之间的间隔字间距(letter-spacing ) normal : 　默认间隔 length : 　由浮点数字和单位标识符组成的长度值，允许为负值 div {letter-spacing:6px; } div {letter-spacing:0.5pt; } b.段落垂直对齐方式（vertical-align ） top : 　将支持valign特性的对象的内容与对象顶端对齐 text-top : 　将支持valign特性的对象的文本与对象顶端对齐 middle : 　将支持valign特性的对象的内容与对象中部对齐 bottom : 　将支持valign特性的对象的文本与对象底端对齐 text-bottom : 　将支持valign特性的对象的文本与对象顶端对齐 eg: td { vert