信息发布与网页设计-Dreamweaver-11-CSS课件.ppt

《信息发布与网页设计-Dreamweaver-11-CSS课件.ppt》由会员分享，可在线阅读，更多相关《信息发布与网页设计-Dreamweaver-11-CSS课件.ppt（40页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、信息发布与网页设计信息发布与网页设计DREAMWEAVER11CSS-层叠样式表层叠样式表信息学院信息发布与网页设计课题组20 二月 20232023/2/20111.1 样式表应用：内嵌、外连样式表应用：内嵌、外连11.2 创建样式表创建样式表11.3 创建外部样式表创建外部样式表11.4 CSS编辑器编辑器11.5 应用应用CSS样式表样式表11.6 管理管理CSS样式表样式表第第11章章主要内容主要内容2023/2/2023基本概念基本概念ooHTMLHTML有两种样式：有两种样式：HTMLHTML样式、样式、CSSCSS样式。样式。ooHTMLHTML样式是通过样式是通过HTMLHTM

2、L标识符，对段落或选择的标识符，对段落或选择的文本进行格式化，是一系列文本进行格式化，是一系列HTMLHTML格式化标记的组格式化标记的组合，用于对文本对象进行设置。合，用于对文本对象进行设置。ooCSSCSS样式的优点：样式的优点：n n网页维护方便：将网页内容和显示方式分开设计网页维护方便：将网页内容和显示方式分开设计n n缩短下载时间：只下载一次声明标记格式的缩短下载时间：只下载一次声明标记格式的CSSCSS样式，样式，供网站的所有网页使用；供网站的所有网页使用；n n文件易读性好：文件易读性好：.css.css文件独立存在，以链接方式供多个文件独立存在，以链接方式供多个网页使用。网页使

3、用。2023/2/2034基本概念基本概念oo在网页中应用样式的3种方法n n使用使用HTMLHTML标记符的标记符的STYLESTYLE属性嵌套样式信息属性嵌套样式信息n n通过在网页的通过在网页的HEADHEAD标记中使用标记中使用STYLESTYLE标记符嵌标记符嵌套样式信息套样式信息n n通过在网页的通过在网页的HEADHEAD标记中使用标记中使用LINKLINK标记符链接标记符链接外部样式表文件（外部样式表文件（.css.css文件）文件）2023/2/20411.1CSS介绍介绍o什么是什么是CSS？CascadingStyleSheets-层叠或级联样式表层叠或级联样式表oCSS

4、的好处的好处n扩展了扩展了HTML的显示样式；的显示样式；n显示样式与数据内容分离，便于修改样式或数据；显示样式与数据内容分离，便于修改样式或数据；n可共享，便于统一和修改显示风格。可共享，便于统一和修改显示风格。o当前版本：当前版本：W3C制定的两个版本：制定的两个版本：CSS11996、CSS21998，CSS31998-正处于开发之中正处于开发之中。2023/2/206CSS语法语法o构成三部分：选择符、属性、属性值构成三部分：选择符、属性、属性值o选择符选择符属性名属性名1:属性值属性值1;属性名属性名n:属性值属性值n选择符一般是选择符一般是:标记名称：如标记名称：如h1、h2、p等

5、等类名称：英文句点开始，以英文字符命名，如类名称：英文句点开始，以英文字符命名，如.abc扩展：扩展：filterCSS语句样例：语句样例：pfont-size:40pt;font-family:隶书隶书;color:greenoCSS中的注释中的注释n/*这是这是CSS中的注释中的注释*/2023/2/207CSS的使用的使用三种应用：内嵌、外联、导入三种应用：内嵌、外联、导入1.内嵌内嵌。2.外联外联文件名文件名.扩展名扩展名2023/2/208CSS内嵌样例内嵌样例CSS样例样例pfont-size:12pt;font-family:隶书隶书p:first-letterfont-size

6、:400%;float:left惠园是我们共同的家 用用style标记内嵌样式单标记内嵌样式单定义定义P标记、首字母大小标记、首字母大小2023/2/201011.2DW中创建中创建CSS方法一方法一:“窗口窗口”“CSS样式样式”面板上单击鼠标右键，面板上单击鼠标右键，选择选择“新建新建”样式；样式；方法二方法二:通过通过“CSS样式样式”面板上的带面板上的带+的按钮，打开的按钮，打开“新建新建CSS样式样式”对话框。对话框。2023/2/2011CSS中的类：中的类：CLASS及及IDoCSS的类有的类有2种种:class、idnclass、id均可有区别的表现相同均可有区别的表现相同HT

7、ML元素；元素；n但但id的内容必须唯一；的内容必须唯一；o类的定义类的定义nclass类由半角英文句点类由半角英文句点(.)开始；开始；nid类由半角英文井号类由半角英文井号(#)开始。开始。.introcolor:red;font-weight:bold;#studentidbackground-color:silvero类的类的引用引用2023/2/201311.4CSS编辑器编辑器-11.分类分类1.字体字体2.字号字号3.样式样式4.行高行高5.粗细粗细6.变量变量7.大、小写大、小写8.颜色颜色9.修饰修饰2023/2/201511.4CSS编辑器编辑器-22.背景背景 body、

8、。可通过添加可通过添加BGCOLORBGCOLOR属性，来设置不同区域的背属性，来设置不同区域的背景颜色或图象。景颜色或图象。设置设置i.重复重复ii.ii.水平位置水平位置iii.iii.垂直位置垂直位置2023/2/201611.4CSS编辑器编辑器-3标签标签SPAN和和DIV的区别的区别DIV(division)是一个块级元素，其左、是一个块级元素，其左、右无法再放置其它内容。右无法再放置其它内容。SPAN是行内元素，是行内元素，SPAN前后不换行，前后不换行，它没有结构的意义，纯粹是应用样式，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用当其他行内元素都不合适时

9、，可以使用SPAN。2023/2/201811.4CSS编辑器编辑器-4（略）（略）4.盒子盒子1.宽、高宽、高2.浮动浮动3.清除清除4.填充填充5.边界边界2023/2/201911.4CSS编辑器编辑器-55.边框边框1.样式样式2.宽度宽度3.颜色颜色2023/2/202011.4CSS编辑器编辑器-66.列表列表1.类型类型1.圆点、圆圈圆点、圆圈2.方快、数字方快、数字3.大、小写罗马数字大、小写罗马数字4.大、小写字母大、小写字母2023/2/202111.4CSS编辑器编辑器-77.定位定位1.层的类型层的类型2.显示：继承、可见、隐藏显示：继承、可见、隐藏3.Z-index确

10、定层叠加的前后顺序确定层叠加的前后顺序4.层的位置、大小层的位置、大小5.益出的处理益出的处理6.剪辑：定义层的可见部分剪辑：定义层的可见部分2023/2/2022CSS样式单应用样式单应用-滤镜效果滤镜效果1ofilter:属性名（参数列表）属性名（参数列表）主要属性名称如下主要属性名称如下nAlpha(opacity:50)透明度透明度0透明，透明，100不透明不透明nBlur()模糊以达到动感效果模糊以达到动感效果nChroma()设置颜色的透明程度设置颜色的透明程度nFliph/flipv水平水平/垂直翻转垂直翻转nGlow()发光发光nGray()灰度灰度2023/2/2024CSS

11、样式单的使用样式单的使用-滤镜效果滤镜效果2oDropshadow()投影投影oShadow()阴影阴影oXray只显示轮廓只显示轮廓例例filter:xray只显示文字、图片的轮廓，只显示文字、图片的轮廓，似似X光效果。光效果。2023/2/202511.6管理管理CSS样式样式编辑编辑CSS样式1.修改修改CSS样式2.拷贝拷贝CSS样式3.删除删除CSS样式2023/2/2026CSS中使用中文中使用中文o在在CSS中显示中文中显示中文在在CSS第第1行添加如下语句，即可在行添加如下语句，即可在CSS中使中使用各种中文字体用各种中文字体charsetgb2312;2023/2/2028C

12、SS样式单中的主要属性样式单中的主要属性o名称 说明ofont-family字型族名称ofont-style字型样式ofont-weight字型粗细ofont-stretch紧缩、扩张ofont-size字型大小ocolor颜色otext-indent文字缩排方式otext-align文字对齐方式otext-shadows文字阴影otext-transform文字变化2023/2/2029属性值属性值的的设定设定oDisplay 属性nBlock块nInline字符显示在同一行nlist-item列表显示nNone不显示的内容obackground-color 属性n设定背景颜色nrgb指定法

13、oBorder 属性ntop、bottom、left、right。2023/2/2031CSS样式单中的单位使用样式单中的单位使用o单位换算英寸（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 in2023/2/2032CSS样式单的使用样式单的使用o相对单位相对单位em字母字母M的宽度；的宽度；Ex字母字母X的高度的高度px像素点像素点%百分比百分比o绝对单位绝对单位In英寸英寸(1 英寸=2.54 厘米)Cm厘米厘米Mm毫米。毫米。Pt

14、磅磅(1 磅=1/72 英寸)Pc皮卡皮卡(1 皮卡=12 磅)o如父元素指定如父元素指定font-size=12pt,则其子元素定义则其子元素定义Font-size=150%，即，即18pt。2023/2/2033CSS样式单的使用样式单的使用o块级块级(block)o内联内联(inline)o列表项列表项(list-item)o不可见不可见(none)2023/2/2034CSS样式单的使用样式单的使用-颜色单位颜色单位o四种四种颜色名称、十进制颜色名称、十进制(0255)、十六进制、十六进制(00ff)、百分比。、百分比。contentcolor:redcontentcolor:rgb(

15、silvercontentcolor:rgb(0%,50%,50%)contentcolor:rgb(00,00,ff)红红绿绿黄黄2023/2/2035CSS中的定位中的定位CSS定位：相定位：相对/绝对定位定位position属性决定元素位置属性决定元素位置类型型Position=absolute|relative|staticabsolute：屏幕上的屏幕上的绝对位置。位置。relative：屏幕上的相屏幕上的相对位置。位置。static：固有位置。固有位置。2023/2/2036CSS中的定位中的定位页面页面位置位置元素元素区域区域页边距页边距margin填充距填充距Padding2023/2/2037CSS中的定位中的定位z-index属性：属性：CSS允允许元素重叠元素重叠显示，示，z-index属性用属性用整数整数定义定义元素的前后位置，数元素的前后位置，数值越大，越大，显示示在相在相对靠前的位置。靠前的位置。z-index=auto|integer网上网上参考教程参考教程：2023/2/2038CSS练习练习1.设置如下滤镜效果：设置如下滤镜效果：n文字水平、垂直反转。文字水平、垂直反转。n阴影、投影、透明。阴影、投影、透明。2023/2/2039谢谢观看Thankyou(foryourattention.)2023/2/2040