《信息发布与网页设计-dreamweaver11css》由会员分享，可在线阅读，更多相关《信息发布与网页设计-dreamweaver11css（40页珍藏版）》请在金锄头文库上搜索。
1、信息发布与网页设计,DREAMWEAVER 11 CSS-层叠样式表 信息学院 信息发布与网页设计课题组 2019年2月23日星期六,2019/2/23,2,11.1 样式表应用：内嵌、外连 11.2 创建样式表 11.3 创建外部样式表 11.4 CSS编辑器 11.5 应用CSS样式表 11.6 管理CSS样式表,第11章 主要内容,2019/2/23,3,3,基本概念,HTML有两种样式：HTML样式、CSS样式。 HTML样式是通过HTML标识符，对段落或选择的文本进行格式化，是一系列HTML格式化标记的组合，用于对文本对象进行设置。 CSS样式的优点： 网页维护方便：将网页内容和显示
2、方式分开设计 缩短下载时间：只下载一次声明标记格式的CSS样式，供网站的所有网页使用； 文件易读性好：.css文件独立存在，以链接方式供多个网页使用。,2019/2/23,4,4,基本概念,在网页中应用样式的3种方法 使用HTML标记符的STYLE属性嵌套样式信息 通过在网页的HEAD标记中使用STYLE标记符嵌套样式信息 通过在网页的HEAD标记中使用LINK标记符链接外部样式表文件（.css文件）,2019/2/23,5,5,在网页上应用HTML样式,如在网页中已有文本是所需要的格式，而这个格式需要经常使用，可基于该文本，创建新的HTML格式，然后将这个样式应用到本文档的其它文本中，也可以
3、应用到整个站点的其它文档中。,2019/2/23,6,11.1 CSS介绍,什么是CSS？ Cascading Style Sheets-层叠或级联样式表 CSS的好处 扩展了HTML的显示样式； 显示样式与数据内容分离，便于修改样式或数据； 可共享，便于统一和修改显示风格。 当前版本： W3C制定的两个版本：CSS11996、CSS21998，CSS31998- 正处于开发之中 。,2019/2/23,7,CSS语法,构成三部分：选择符、属性、属性值 选择符属性名1:属性值1;属性名n:属性值n 选择符一般是: 标记名称：如h1、h2、p等 类名称：英文句点开始，以英文字符命名，如.abc
4、扩展：filter CSS语句样例： p font-size:40pt; font-family:隶书;color:green CSS中的注释 /*这是CSS中的注释*/,2019/2/23,8,CSS的使用,三种应用：内嵌、外联、导入 内嵌 。 外联 ,文件名.扩展名,2019/2/23,9,CSS的使用,3、导入*(不要求) 在HTML中用“import”命令，导入样式表 import url( style.css ) ,2019/2/23,10,CSS内嵌样例, CSS 样例 p font-size:12pt; font-family:隶书 p:first-letterfont-size
5、:400%; float:left 惠园是我们共同的家 ,用style标记内嵌样式单,定义P标记、首字母大小,2019/2/23,11,11.2 DW中创建CSS,方法一: “窗口” “CSS样式”面板上单击鼠标右键，选择“新建”样式； 方法二: 通过“CSS样式”面板上的带+的按钮，打开“新建CSS样式”对话框。,2019/2/23,12,11.3 选用外部CSS样式,方法一: “窗口” “CSS样式”，打开“CSS样式”面板； 单击右上角的下拉菜单； 选择“附加样式表”； 单击“预览”，选择外部样式表文件。 方法二: 通过“CSS样式”面板上的“附加样式表”按钮，打开“附加外部样式表”对话
6、框。余同方法一。,2019/2/23,13,CSS中的类：CLASS及ID,CSS的类有2种: class、id class、 id均可有区别的表现相同HTML元素； 但id的内容必须唯一； 类的定义 class类由半角英文句点(.)开始； id类由半角英文井号(#)开始。 .intro color: red; font-weight: bold; #studentid background-color: silver 类的引用 ,2019/2/23,14,CSS中的类CLASS及ID,HTML中应用如下： 网页制作 id和class不同之处在于： id用在内容唯一的元素上， class可用在
7、多个元素上。,2019/2/23,15,11.4 CSS编辑器-1,分类 字体 字号 样式 行高,粗细 变量 大、小写 颜色 修饰,2019/2/23,16,11.4 CSS编辑器-2,背景 、。 可通过添加BGCOLOR属性，来设置不同区域的背景颜色或图象。 设置 重复 水平位置 垂直位置,2019/2/23,17,11.4 CSS编辑器-3,区块 单词间距 字母间距 垂直对齐 文本对齐 文字缩进,2019/2/23,18,11.4 CSS编辑器-3,标签SPAN 和 DIV 的区别 DIV(division)是一个块级元素，其左、右无法再放置其它内容。 SPAN 是行内元素，SPAN 前后
8、不换行，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。,2019/2/23,19,11.4 CSS编辑器-4（略）,盒子 宽、高 浮动 清除 填充 边界,2019/2/23,20,11.4 CSS编辑器-5,边框 样式 宽度 颜色,2019/2/23,21,11.4 CSS编辑器-6,列表 类型 圆点、圆圈 方快、数字 大、小写罗马数字 大、小写字母,2019/2/23,22,11.4 CSS编辑器-7,定位 层的类型 显示：继承、可见、隐藏 Z-index 确定层叠加的前后顺序 层的位置、大小 益出的处理 剪辑：定义层的可见部分,2019/2/23,23,11
9、.4 CSS编辑器-8,扩展 分页 光标 滤镜,2019/2/23,24,CSS样式单应用-滤镜效果1,filter:属性名（参数列表） 主要属性名称如下 Alpha (opacity :50)透明度 0透明，100不透明 Blur() 模糊以达到动感效果 Chroma() 设置颜色的透明程度 Fliph/flipv 水平/垂直翻转 Glow() 发光 Gray() 灰度,2019/2/23,25,CSS样式单的使用-滤镜效果2,Dropshadow() 投影 Shadow() 阴影 Xray 只显示轮廓 例 filter:xray 只显示文字、图片的轮廓，似X光效果。,2019/2/23,2
10、6,11.6 管理CSS样式,编辑CSS样式 修改CSS样式 拷贝CSS样式 删除CSS样式,2019/2/23,27,CSS中定义背景图片,body display:block; background-image:url(lspbh.jpg); background-repeat:no-repeat 也可以为某个元素定义背景图片，只要将根元素名 换成相应的元素名即可。,2019/2/23,28,CSS中使用中文,在CSS中显示中文 在CSS第1行添加如下语句，即可在CSS中使用各种中文字体 charset “gb2312“;,2019/2/23,29,CSS样式单中的主要属性,名称 说明 f
11、ont-family 字型族名称 font-style 字型样式 font-weight 字型粗细 font-stretch 紧缩、扩张 font-size 字型大小 color 颜色 text-indent 文字缩排方式 text-align 文字对齐方式 text-shadows 文字阴影 text-transform 文字变化,2019/2/23,30,CSS 版面屬性,名称 说明 display 显示状态 width 宽度 background-color 背景颜色,2019/2/23,31,属性值的设定,Display 属性 Block 块 Inline 字符显示在同一行 list-
12、item 列表显示 None 不显示的内容 background-color 属性 设定背景颜色 rgb指定法 Border 属性 top、bottom、left、right。,2019/2/23,32,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,2019/2/23,33,CSS样式单的使用,相对单位 em 字母M的宽度； Ex 字母X的高度 p
13、x 像素点 % 百分比 绝对单位 In 英寸(1 英寸 = 2.54 厘米) Cm 厘米 Mm 毫米。 Pt 磅(1 磅 = 1/72 英寸) Pc 皮卡(1 皮卡 = 12 磅) 如父元素指定font-size=12pt, 则其子元素定义 Font-size=150%，即18pt。,2019/2/23,34,CSS样式单的使用,块级 (block) 内联 (inline) 列表项 (list-item) 不可见 (none),2019/2/23,35,CSS样式单的使用-颜色单位,四种 颜色名称、十进制(0255)、十六进制(00ff)、百分比。 contentcolor:red conte
14、ntcolor:rgb(silver contentcolor:rgb(0%,50%,50%) contentcolor:rgb(00, 00, ff) 红 绿 黄,2019/2/23,36,CSS中的定位,CSS定位：相对/绝对定位 position属性决定元素位置类型 Position=absolute | relative | static absolute：屏幕上的绝对位置。 relative： 屏幕上的相对位置。 static： 固有位置。,2019/2/23,37,CSS中的定位,页面位置,元素 区域,页边距 margin,填充距 Padding,2019/2/23,38,CSS中的定位,z-index属性： CSS允许元素重叠显示，z-index属性用整数定义元素的前后位置，数值越大，显示在相对靠前的位置。 z-index=auto|integer 网上参考教程：http:/ 文字水平、垂直反转。 阴影、投影、透明。,2019/2/23,40,谢谢观看 Thank you (for your attention.),
