信息发布与网页设计-Dreamweaver_11_CSS教材教学课件.ppt

属性值的设定 Display 属性 Block 块 Inline 字符显示在同一行 list-item 列表显示 None 不显示的内容 background-color 属性 设定背景颜色 rgb指定法 Border 属性 「top」、「bottom」、「left」、「right」。 CSS样式单中的单位使用 单位换算 英寸（in） 1 in = 2.54 cm 厘米（cm） 1 cm = 0.3937 in 毫米（mm） 1 mm = 0.1 cm 磅 （pt） 1 pt = 1/72 in = 0.3528 mm 派卡（pc） 1 pc = 12 pt = 1/6 in CSS样式单的使用 相对单位 em 字母M的宽度； Ex 字母X的高度 px 像素点 % 百分比 绝对单位 In 英寸(1 英寸 = 2.54 厘米) Cm 厘米 Mm 毫米。 Pt 磅(1 磅 = 1/72 英寸) Pc 皮卡(1 皮卡 = 12 磅) 如父元素指定font-size=12pt, 则其子元素定义 Font-size=150%，即18pt。 CSS样式单的使用 块级 (block) 内联 (inline) 列表项 (list-item) 不可见 (none) CSS样式单的使用-颜色单位 四种 颜色名称、十进制(0~255)、十六进制(00~ff)、百分比。 content{color:red} content{color:rgb(silver} content{color:rgb(0%,50%,50%)} content{color:rgb(00, 00, ff)} 红 绿 黄 CSS中的定位 CSS定位：相对/绝对定位 position属性决定元素位置类型 Position=absolute | relative | static absolute：屏幕上的绝对位置。 relative： 屏幕上的相对位置。 static： 固有位置。 CSS中的定位 页面位置  元素 区域 页边距 margin 填充距 Padding CSS中的定位 z-index属性： CSS允许元素重叠显示，z-index属性用整数定义元素的前后位置，数值越大，显示在相对靠前的位置。 z-index=auto|integer 网上参考教程：/css/index.htm CSS练习 设置如下滤镜效果： 文字水平、垂直反转。 阴影、投影、透明。 谢谢观看 Thank you(for your attention.) 欢迎辞 * * 信息发布与网页设计 DREAMWEAVER 11 CSS-层叠样式表 信息学院 《信息发布与网页设计》课题组 * 11.1 样式表应用：内嵌、外连 11.2 创建样式表 11.3 创建外部样式表 11.4 CSS编辑器 11.5 应用CSS样式表 11.6 管理CSS样式表 第11章 主要内容 * 基本概念 HTML有两种样式：HTML样式、CSS样式。 HTML样式是通过HTML标识符，对段落或选择的文本进行格式化，是一系列HTML格式化标记的组合，用于对文本对象进行设置。 CSS样式的优点： 网页维护方便：将网页内容和显示方式分开设计 缩短下载时间：只下载一次声明标记格式的CSS样式，供网站的所有网页使用； 文件易读性好：.css文件独立存在，以链接方式供多个网页使用。 * 基本概念 在网页中应用样式的3种方法 使用HTML标记符的STYLE属性嵌套样式信息 通过在网页的HEAD标记中使用STYLE标记符嵌套样式信息 通过在网页的HEAD标记中使用LINK标记符链接外部样式表文件（.css文件） * 在网页上应用HTML样式 如在网页中已有文本是所需要的格式，而这个格式需要经常使用，可基于该文本，创建新的HTML格式，然后将这个样式应用到本文档的其它文本中，也可以应用到整个站点的其它文档中。 11.1 CSS介绍 什么是CSS？ Cascading Style Sheets-层叠或级联样式表 CSS的好处 扩展了HTML的显示样式； 显示样式与数据内容分离，便于修改样式或数据； 可共享，便于统一和修改显示风格。 当前版本： W3C制定的两个版本：CSS11996、CSS21998，CSS31998- 正处于开发之中 。 CSS语法 构成三部分：选择符、属性、属性值 选择符{属性名1:属性值1;…属性名n:属性值n} 选择符一般是: 标记名称：如h1、h2、…p等 类名称：英文句点开始，以英文字符命名，如.abc 扩展：