CSS--层叠样式表PPT演示课件

什么是CSS?,1,CSS-层叠样式表,CSS：CascadingStyleSheets，层叠样式表，也称作级联样式表，简称样式单。作用：针对页面中的对象的风格和样式进行定义使HTML各个标记的属性更具有一般性和通用性引入对象，使脚本程序可以调用对象属性简化了HTML中标记,2,例子,3,css简单例子/*CSS样式定义开始*/*样式定义结束*/*以下的区域内采用中里面定义的格式*/hongen,4,CSS结构和规则,5,CSS的基本规则,规则（语句结构）：选择符属性1：属性值，属性2：属性值例如：Acolor:red,6,divwidth:200;filter:blur(add=true,direction=35,strengh=20);DIV是选择符，选择符可以是HTML中任何的标识符。括号内的WIDTH和FILTER就是属性。WIDTH定义了DIV区域内的页面的宽度，200是属性值。FILTER定义了滤镜属性，BLUR是它的属性值，该属性值产生的是一种模糊效果，其小括号内定义的是BLUR属性值的一些参数。,7,hongenStyle是内嵌到中来定义该段落内的格式的。由于整个段落是定义在中的，所以hongen又将显示出中定义的滤镜属性来。,8,在页面中引用CSS的方法,使用style标记通常放置在head中的双标记种类：内联式样式单：标记内style属性嵌入式样式单：head中的style标记外部式样式单.css文件,9,属性值的单位,px：像素pt：磅em：排版标记，默认1em=12ptmm：毫米cm：厘米pc：1pc=12ptin：英寸,10,单位之间的继承,例如：bodyfont-size:12pt;text-indent:3em;h1font-size:15pt请问：最后显示中h1大小是多少？45pt!,11,其他单位,deg：度grad：梯度rad：弧度Hz,kHz：赫兹,12,简单语法规则,注释：/*/空格只保留一个大小写不同不合格的属性被略掉例如：h3,h4,13,标记符,14,标记符种类,超文本标记符：HTML标记元素类选择符：同一元素分类显示不同样式可以有无相关元素的类，可以被应用于任何元素定义方式：.类名样式ID选择符：个别标记定义id，用id设置样式,15,样式单例2-试验类选择符font.1color:redfont.2color:green.3color:blue1类的效果2类的效果没有用类的效果3类的效果3类的效果,16,样式单例2-试验类选择符#indent3emtext-indent:3em效果没有用的效果,17,补充,重复性的样式可以用,把选择符分开例如：h1,h2color:red特定范围内有效，用空格示意例如：pemcolor:red特定时候有效例如：/pp/color:red表示连续的段落时候使用该标记,18,19,BOX模型属性,20,BOX含义及属性分类,BOX：盒子，容器，内涵BOX属性：CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性。margin：边距属性hadding：填充距属性border：边框属性,21,margin边距属性,例子：设置边距属性的页面,22,Padding填充距属性,填充距指的是文本边框与文本之间的距离。,23,Padding填充距属性,例子：设置填充距属性的页面,24,Border边框属性,常用属性：border-style：边框样式border-width：边框宽度border-color：边框颜色,例子：设置边框属性的页面,25,26,其他容器属性,27,字体属性,控制元素中字体的形状、大小、风格,28,常见字体属性,font-family：字形（字体）font-size：文字大小font-style：文字效果font-weight：文字粗细,29,font-size取值,absolute-size：xx-small不推荐relative-size：参照元素，与绝对大小配合使用length：例如12pt，推荐使用，不接受负数percentage：百分比，推荐使用默认为中等大小,30,其他font属性取值,font-family属性取值：黑体，宋体等font-weight：normal、bold、lighter、100900，默认700font-style：normal、italicfont-variant：取值normal，无影响；small-caps：页面中英文字符除有其他设定，转为大写形式,31,文本属性,-文本显示效果设置,32,文本常用属性,word-spacing：英文词间距letter-spacing：字间距，可应用于中文text-decoration：文本修饰，取值none/underline/overline/line-through,blink(NS4独有）vertical-align：垂直对齐，常用sub,super,33,text-transform：大小写转换text-align：文本对齐text-indent：文本缩进line-height：行间距文本属性使用实例,34,颜色与背景属性,实例,35,36,布局属性,37,clip贴层属性,相对定位和绝对定位：相对定位就是允许在文档的原始位置上进行偏移。而绝对定位则允许任意定位。布局属性示例,38,39,html中引入css的方法,在html中,引入css的方法主要有行内式、内嵌式、导入式和链接式4种行内式在标记的style属性中设定css样式，这种方式本质上没体现出css的优势，因此不推荐使用。嵌入式在对页面中各种元素的设置集中写在和之间的，对于单个页面来说，这种方式很方便导入式导入式格式如下：importmystyle.css;连接式格式如下：,40,采用后两种方式后的显示效果略有区别，区别如下：1。连接式：会在装载页面主体部分之前装载css文件，这样显示出来的网页从一开始就是带有样式效果的，导入式：会在整个页面装载完成后再装载CSS文件，对于有的浏览器来说，在一些情况下，如果网页文件的体积比较大，则会出现先显示无样式的页面，闪烁一下之后再出现设置样式后的效果，从浏览者的感受来说，这是导入式的一个缺陷。对于一些比较大的网站，为了便于维护，可能会希望把所有的css样式分类别放到几个CSS文件中，这样如果使用连接式引入，就需要几个语句分别导入CSS文件如果要调整CSS文件的分类，就需要同时调整HTML文件，这对于维护工作来说，是一个缺陷，如果使用导入式，则可以只引进一个总的CSS文件，在这个文件中再导入其他独立CSS文件；而连接则不具备这个特性。因此给大家的建议是：如果仅需要引入一个CSS文件，则使用连接方式，如果需要引入多个CSS文件，则首先用连接方式引入一个“目录”CSS文件，这个“目录”CSS文件中再使用导入式引入其他CSS文件。,41,第7章使用CSS样式和插入行为,精美的网页离不开CSS技术，使用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。CSS样式的全名为CascadingStyleSheet，它可以定义HTML标签，按列表的语法将许多文字、图片、表格、表单、图层等设计加以格式设定。在HTML语法中，常常需要使用到一些设定颜色、字体大小或框线粗细之类的标签，而CSS在开始制作网页时就将这些设定做好，不需要在制作网页文档时再反复写入同样的标签。行为是以系列使用JavaScript程序预定义的页面特效工具，是JavaScript在Dreamweaer中内置的程序库。利用行为，可以制作处各式各样的特素效果，例如播放声音、弹出菜单等。,42,教学重点与难点,绘制与编辑多线认识CSS样式创建CSS样式设置CSS样式认识行为插入行为,43,7.1认识CSS样式,CSS样式是CascadingStyleSheets(层叠样式单)的简称，也可以称为“级联样式表”，它是一种网页制作的新技术，利用它可以对网页中的文本进行精确的格式化控制。在CSS样式之前，HTML样式被广泛应用，HTML样式用于控制单个文档中某范围内文本的格式。而CSS样式与之不同，它不仅可以控制单个文档中的多个范围内文本的格式，而且可以控制多个文档中文本的格式。要管理一个非常大的网站，使用CSS样式，可以快速格式化整个站点或多个文档中的字体、图像等网页元素的格式。并且，CSS样式可以实现多种不能用HTML样式实现的功能。CSS的基本概念CSS样式面板和常用类型创建CSS样式应用CSS样式,44,7.1.1CSS的基本概念,CSS，是用来控制一个网页文档中的某文本区域外观的一组格式属性。使用CSS能够简化网页代码，加快下载速度，减少上传的代码数量，从而可以避免重复操作。CSS样式表是对HTML语法的一次重达革新，它位于文档的区，作用范围由CLASS或其他任何符合CSS规范的文本来设置。对于其他现有的文档，只要其中的CSS样式符合规范，Dreamweaver就能识别它们。,45,7.1.2CSS样式面板和常用类型,CSS常用的类型有外部样式表和内部样式表两种，要创建样式表，可以在“CSS样式”面板中创建。,46,7.1.3创建CSS样式,在DreamweaverCS3中，可以创建一个CSS样式，然后应用于文档的某个部分，完成文本的格式化。要创建CSS样式，可在文档编辑窗口中单击鼠标右键，在弹出的快捷菜单中选择“CSS样式”|“新建”命令，如图所示，打开“新建CSS规则”对话框，如图所示。,选择“CSS样式”|“新建”命令“CSS规则定义”对话框,47,7.1.4应用CSS样式,创建了CSS样式表后，就可以利用该样式表快速设置页面上的样式，使网站具有统一的风格了。在DreamweaverCS3环境下，对文档指定元素应用CSS样式可以在“属性”面板中设定、在标签处设定、在“标签检查器”面板组的“属性”面板中和右击文档选择快捷菜单设定。,48,7.2管理CSS样式,如果要对CSS样式进行编辑、删除、链接或者新建等操作，可以在“CSS样式”面板中找到相应的操作按钮。链接和导入CSS样式编辑和删除CSS样式设置其他CSS样式CSS样式冲突,49,7.2.1链接和导入CSS样式,单击“CSS样式”面板中的“附加样式表”按钮，打开“链接外部样式表”对话框。单击对话框中的“浏览”按钮，打开“选择样式表文件”对话框，如图所示，在对话框中选择需要链接的外部CSS样式文件，然后单击“确定”按钮，将CSS样式文件倒入到“链接外部样式表”对话框种，选中“添加为”选项区域中的“链接”单选按钮，单击“确定”按钮，在“CSS样式”面板的列表中将显示链接的CSS文件。,50,7.2.2编辑和删除CSS样式,打开“CSS样式”面板，选中要编辑的CSS样式，单击“编辑样式表”按钮，打开“CSS规则定义”对话框，可对在CSS面板中选中的CSS样式进行编辑，如图所示。,51,7.2.3设置其他CSS样式,除了设置CSS文本样式外，还可以设置“背景”、“区块”、“方框”、“边框”、“列表”、“定位”和“扩展”样式。,52,7.2.4C