Adobe_Dreamweaver教程课件_第6章_CSS样式表

,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,第6章 CSS样式表入门,本章介绍的主要内容有：,CSS样式表简介,创建CSS样式表的方法,内部CSS样式表的应用,链接外部CSS样式表,在代码视图编辑CSS样式表,为何要,用,用CSS样式,表,表？,能给人,赏,赏心悦,目,目、工,工,工整整,的,的感觉,内容和,形,形式的,分,分离便,于,于站点,的,的维护,简练代,码,码，缩,短,短浏览,器,器加载,的,的时间,DW很多地,方,方是基,于,于CSS的,6.1CSS样式表,基,基础,6.1,.,.1认识CSS,CSS是CascadingStyleSheets（层叠,样,样式表,）,）的简,称,称,1CSS样式的,类,类型(选择器,的,的类型),类样式,：,：（可,应,应用于,页,页面任,何,何标签,）,）。,HTML标签样,式,式：重,定,定义HTML标签样,式,式。,高级样,式,式：（,重,重新定,义,义特定,元,元素组,合,合的格,式,式，,tdh2,重定义,包,包含特,定,定id属性的,标,标签格,式,式，#mystyle）。,内联样,式,式表,外部样,式,式表,2CSS规则,CSS格式设,置,置规则,由,由两部,分,分组成,：,：选择,器,器和声,明,明,h1,font-size,:,:16 pixels;,font-family:,宋体;,font-weight:bold;,在这个CSS规则中,，,，h1是选择,器,器，介,于,于大括,号,号之间的,所,所有内,容,容都是,声,声明块,。,。,各个声,明,明由两,部,部分组,成,成：属,性,性（如font-family）和值,（,（如16pixels）。,6.1,.,.2对样式,表,表操作,的,的三种,方,方式,1第一,种,种方式,执行【窗口】【CSS样式】命令，,打,打开【CSS样式】面板,2第二,种,种方式,3第三,种,种方式,在空白,处,处右击,6.1,.,.3,“,“CSS样式”,面,面板,样式表文件名,CSS规则列表,属性和属性值列表,工具按钮栏,在Dreamweaver中，“CSS样式”,面,面板是,新,新建、,编,编辑、,管,管理CCS的主要,工,工具。,选,选择“,窗,窗口”|“CSS样式”,命,命令可,以,以打开,或,或者关,闭,闭“CSS样式”,面,面板。,类别视图,6.2新建CSS规则和,应,应用CSS样式,6.2,.,.1定义样,式,式表选,项,项,在【CSS样式】面板上,，,，单击【新建CSS规则】按钮，,打,打开【新建CSS规则】对话框,。,。,1【定义在】选项,（1）【新建样,式,式表文,件,件】,（2）【仅对该,文,文档】,2【选择器,类,类型】选项,（1）【类（可,应,应用于,任,任何标,签,签）】,（2）【标签（,重,重新定,义,义特定,标,标签的,外,外观）】,（3）【高级（ID、伪类,选,选择器,等,等）】,3【名称】文本框,在这个,文,文本框,中,中输入CSS规则名,称,称。根,据,据所选,择,择的“,选,选择器,类,类型”,的,的不同,，,，,这里可,以,以输入,或,或者选,择,择 不,同,同的名,称,称。,6.2,.,.2在网页,中,中应用,样,样式,1在【属性】面板选,择,择应用,样,样式,2利用【标签选,择,择器】选择样,式,式,3使用,右,右键快,捷,捷菜单(套用),4清除,样,样式,Css,样,样式定,义,义的分,类,类说明,类型,对,对文,字,字的字,体,体、大,小,小、颜,色,色、效,果,果等基,本,本样式,进,进行设,置,置。,背景,对,对元,素,素的背,景,景进行,设,设置，,一,一般对,页,页面、,表,表格、,区,区域的,设,设置,区块,设,设置对象文,本,本的文字,间,间距、,对,对齐方,式,式、上,标,标、下,标,标、排,列,列方式,、,、首行,缩,缩进等,方框,设,设置对象的边界,、,、间距,、,、高度,、,、宽度,和,和漂浮,方,方式等,边框,设,设置对,象,象边框,的,的宽度,、,、颜色,及,及样式,列表,设,设置列,表,表样式,、,、列表,项,项图像,和,和位置,定位,相,相当与,对,对象放,在,在一个,层,层里来,定,定位，,它,它相当,于,于HTML的DIV,标,标记,扩展,设,设置打,印,印网页,时,时或者,是,是对象,视,视觉显,示,示效果,6.3创建和,应,应用CSS样式,6.3,.,.1控制浏,览,览器中,的,的文字,大,大小：,“,“稳定,性,性”,6.3,.,.2设置行,间,间距：,使,使不大,不,不小，,美,美观,6.3,.,.3为图片加,上,上边框,效,效果：,可,可随意,设,设置边,框,框颜色,6.3,.,.4利用“,自,自定义,样,样式表,”,”改变,鼠,鼠标指,针,针的形,态,态,hand：是大,家,家所熟,悉,悉的手,型,型。,crosshair：是十,字,字型。,text：是平,时,时鼠标,移,移动到,文,文本上,的,的样式,。,。,wait：是等,待,待的效,果,果。,default：是默,认,认的那,种,种效果,。,。,help：是带,问,问号的,鼠,鼠标样,式,式。,e-resize：是向,右,右的箭,头,头。,ne-resize：是向,右,右上方,的,的箭头,。,。,n-resize：是向,上,上的箭,头,头。,nw-resize：是向,左,左上方,的,的箭头,。,。,w-resize：是向,左,左的箭,关,关。,sw-resize：是向,左,左下的,箭,箭头。,s-resize：是向,下,下的箭,头,头。,se-resize：是向,右,右下方,的,的箭头,。,。,auto：是系,统,统自动,的,的效果,。,。,6.3,.,.5利用有,关,关链接,的,的样式,表,表修改,链,链接的,格,格式,a:link定义了,链,链接文,字,字的样,式,式。,a:visited浏览者,已,已经访,问,问过的,链,链接样,式,式。,a:hover定义了,鼠,鼠标悬,浮,浮在链,接,接文字,上,上时的,样,样式。,a:active定义链,接,接被激,活,活时的,样,样式，,即,即鼠标,已,已经单,击,击了链,接,接，但,页,页面还,没,没有跳,转,转时,。,。,6.3,.,.6控制页,面,面背景,图,图像的,样,样式,执行【修改】【页面属,性,性】命令，,弹,弹出【页面属,性,性】对话框,。,。,通过重,新,新定义body标签的CSS规则来,控,控制网,页,页的背,景,景图像,。,。,6.3,.,.7利用自,定,定义样,式,式表制,作,作项目,图,图标,定义一,个,个类控,制,制器，,设,设置这,个,个CSS规则的,“,“列表,”,”属性,，,，然后,将,将CSS规则应,用,用在HTML文档的ul或者ol标签上,。,。,6.3,.,.8CSS样式滤,镜,镜的应,用,用,下面是,各,各个滤,镜,镜的意,义,义：,Alpha：设置,透,透明度,。,。,Blur：建立,模,模糊效,果,果,Chroma：把指,定,定的颜,色,色设置,为,为透明,。,。,DropShadow：建立,一,一种偏,移,移的影,像,像轮廓,，,，即投,射,射阴影,。,。,FlipH：水平,反,反转。,FlipV：垂直,反,反转。,Glow：为对,象,象的外,边,边界增,加,加光效,。,。,Grayscale：降低,图,图片的,彩,彩色度,。,。,Invert：将色,彩,彩、饱,和,和度及,亮,亮度值,完,完全反,转,转建立,底,底片效,果,果。,Light：在一,个,个对象,上,上进行,灯,灯投影,。,。,Mask：为一,个,个对象,建,建立透,明,明膜。,Shadow：建立,一,一个对,象,象的固,体,体轮廓,，,，即阴,影,影效果,。,。,Wave：在X轴和Y轴方向,用,用正弦,波,波纹打,乱,乱图片,。,。,Xray：只显,示,示对象,的,的轮廓,举例说,明,明:,Blur(Add=true,Direction=135,Strength,=,=10,),),6.4外部CSS样式表,6.4,.,.1建立外,部,部CSS样式表,文,文件并,定,定义文,字,字和段,落,落样式,6.4,.,.2定义表,格,格样式,通过重,新,新定义table标签控,制,制网页,中,中的表,格,格的外,观,观。,6.4,.,.3定义超,级,级链接,样,样式,通过定,义,义a:link和a:hover两个高,级,级样式,来,来控制,网,网页中,的,的超级,链,链接的,外,外观。,6.4,.,.4定义特,殊,殊段落,的,的样式,网页中,经,经常会,有,有一些,特,特殊段,落,落，比,如,如程序,代,代码等,，,，为了,让,让这些,特,特殊段,落,落和其,他,他段落,区,区分开,来,来，本,小,小节再,定,定义一,个,个特殊,段,段落的,样,样式。,6.4,.,.5链接外,部,部CSS样式表,在【CSS样式】面板上,单,单击【附加样,式,式表】按钮，,在,在弹出,的,的【链接外,部,部样式,表,表】对话框,中,中的【添加为】单选项,中,中选择【链接】，然后,单,单击“,浏,浏览”,按,按,钮,钮，选,择,择创建,的,的外部,样,样式表,文,文件“mycss.css,”,”。,6.4,.,.6在网页,中,中应用,外,外部CSS样式表,（1）因为,控,控制超,链,链接和,表,表格的CSS规则，,是,是用相,应,应的标,签,签重新,定,定义得,到,到的，,所,所以网,页,页中的,超,超链接,和,和表格,会,会自动,应,应用样,式,式。,（2）我们,可,可以将.text样式应,用,用到标签上,，,，这样,网,网页中,的,的文字,都,都被.text这个样,式,式控制,外,外观。,（3）对于,网,网页中,的,的程序,代,代码段,落,落，可,以,以用.teshu样式来,控,控制外,观,观。,6.5在【代码视,图,图】手动添,加,加和编,辑,辑CSS,6.5,.,.1CSS样式表,的,的标记,和,和语句,格,格式,1内联,样,样式表,的,的代码,结,结构,CSS样式代码,样式表,的,的代码,一,一般格,式,式：,样式表,名,名称,属性1:属性1值;,属性2:属性2值;,2类选,择,择器的CSS代码结,构,构,应用类,标,标识符,样,样式时,，,，都是,通,通过class属性的,设,设置实,现,现的：,class=,myCSS,_,_Class,在“代,码,码视图,”,”下，,通,通过手,动,动添加,代,代码，,编,编辑某,个,个HTML标签的class属性，,就,就可以,让,让这个HTML标签控,制,制范围,内,内的元,素,素应用,类,类选择,符,符样式,。,。,3ID选择器,的,的CSS代码结,构,构,应用ID选择器,样,样式时,，,，都是,通,通过HTML标签的id属性的,设,设置实,现,现的：id=,myCSS,_,_ID,“,“,ID属性是HTML标签的,一,一个重,要,要属性,，,，一个,网,网页中,的,的标签,的,的ID属性值,不,不能重,复,复，因,此,此在利,用,用ID属性应,用,用标识,选,选择符CSS样式时,，,，只能,应,应用于,一,一个标,签,签。如,果,果应用,于,于多个,标,标签，,就,就会造,成,成标签,的,的ID属性冲,突,突。,4链接,外,外部样,式,式表的,代,代码结,构,构,网页文,档,档链接,了,了外部CSS样式文,件,件后，,在,在代码,视,视图中,，,，可以,观,观察到head标签中,增,增加了,一,一行类,似,似于下,面,面的代,码,码：,这就是,链,链接外,部,部CSS样式文,件,件的代,码,码。,6.5,.,.2通过编,辑,辑CSS代码改,变,变网页,滚,滚动条,的,的外观,在网页,代,代码和,之间插,入,入下面,的,的代码,：,：,body,SCROLLBAR,-,-FACE-COLOR:,#,#3333FF;/,/,/立体滚,动,动条