信息发布与网页的设计Dreamweaver 11 CSS.ppt

信息发布与网页设计 DREAMWEAVER 11 CSS-层叠样式表 信息学院 《信息发布与网页设计》课题组 * 11.1 CSS介绍 什么是CSS？ Cascading Style Sheets-层叠或级联样式表 CSS的好处 扩展了HTML的显示样式； 显示样式与数据内容分离，便于修改样式或数据； 可共享，便于统一和修改显示风格。 当前版本： W3C制定的两个版本：CSS11996、CSS21998，CSS31998- 正处于开发之中 。 CSS语法 构成三部分：选择符、属性、属性值 选择符{属性名1:属性值1;…属性名n:属性值n} 选择符一般是: 标记名称：如h1、h2、…p等 类名称：英文句点开始，以英文字符命名，如.abc 扩展：filter CSS语句样例： p {font-size:40pt; font-family:隶书;color:green} CSS中的注释 /*这是CSS中的注释*/ CSS的使用 三种应用：内嵌、外联、导入 内嵌 style type=text/css 。。。/style 外联 HEAD link href=new.css rel=stylesheet type=text/css /HEAD CSS的使用 3、导入*(不要求) 在HTML中用“@import”命令，导入样式表 style type=text/css @import url( style.css ) /style CSS内嵌样例 html headTITLECSS 样例/TITLE style type=text/css p {font-size:12pt; font-family:隶书} p:first-letter{font-size:400%; float:left} /style /head bodyp惠园是我们共同的家/p/body /html 11.2 DW中创建CSS 方法一: “窗口” → “CSS样式”面板上单击鼠标右键，选择“新建”样式； 方法二: 通过“CSS样式”面板上的带+的按钮，打开“新建CSS样式”对话框。 11.3 选用外部CSS样式 方法一: “窗口” → “CSS样式”，打开“CSS样式”面板； 单击右上角的下拉菜单； 选择“附加样式表”； 单击“预览”，选择外部样式表文件。 方法二: 通过“CSS样式”面板上的“附加样式表”按钮，打开“附加外部样式表”对话框。余同方法一。 CSS中的类：CLASS及ID CSS的类有2种: class、id class、 id均可有区别的表现相同HTML元素； 但id的内容必须唯一； 类的定义 class类由半角英文句点(.)开始； id类由半角英文井号(#)开始。 .intro { color: red; font-weight: bold; } #studentid {background-color: silver} 类的引用 HTML标记名 … class=类名 CSS中的类CLASS及ID HTML中应用如下： p class=intro网页制作/p div id= studentid id和class不同之处在于： id用在内容唯一的元素上， class可用在多个元素上。 11.4 CSS编辑器-1 分类 字体 字号 样式 行高 11.4 CSS编辑器-2 背景 body、table、td。。。 可通过添加BGCOLOR属性，来设置不同区域的背景颜色或图象。 设置 重复 水平位置 垂直位置 11.4 CSS编辑器-3 区块 单词间距 字母间距 垂直对齐 文本对齐 文字缩进 11.4 CSS编辑器-3 标签SPAN?和?DIV?的区别 DIV(division)是一个块级元素，其左、右无法再放置其它内容。 SPAN?是行内元素，SPAN?前后不换行，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。 11.4 CSS编辑器-4（略） 盒子 宽、高 浮动 清除 填充 边界 11.4 CSS编辑器-5 边框 样式 宽度 颜色 11.4 CSS编辑器-6 列表 类型 圆点、圆圈 方快、数字 大、小写罗马数字 大、小写字母 11.4 CSS编辑器-7 定位 层的类型 显示：继承、可见、隐藏 Z-index 确定层叠加的前后顺序 层的位置、大小 益出的处理 剪辑：定义层的可见部分 11.4 CSS编辑器-8 扩展 分页 光标 滤镜 CSS样式单应用-滤镜效果1 filter:属性名（参数列表） 主要属性名称如下 A