第四章 CSS样式.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,计算机与信息学院,计算机与信息学院,第四章,CSS,样式的应用,胡欣欣,4.1,样式概述,层叠样式表,CSS,（,Cascading Style Sheet,）是一种对网页元素进行准确定位的技术，是一系列格式设置规则，控制网页元素的外观，可以定义文字、表格、图像、表单等网页元素的属性。,CSS,样式可以使用自定义样式以减少设计者的工作量,CSS,将格式与结构分离，使得代码简单明了。,CSS,更加灵活而精确地控制页面的格式和布局，如像素调节、图像精确定位、字间距、行间距等。,可以更有效的实现网页的维护和更新，减少了代码数量，避免重复工作。,4.1,样式概述,在,HTML,中，样式表信息包括在,标记中，为了使样式表对整个页面中产生作用，放置在,标记中。,如需对同一个,HTML,标签呈现不同的风格，则使用,CLASS,方法：,4.2,创建,CSS,样式,1,、创建新的,CSS,样式,方法一：窗口,CSS,样式或,Shift+F11,，弹出,CSS,面板。单击面板右下角区域中的“新建,CSS,样式”按钮。,方法二：选择文本菜单,CSS,样式,新建,CSS,样式,4.2,创建,CSS,样式,2,、选择器类型,4.2,创建,CSS,样式,2,、选择器类型,类（可应用于任何,HTML,元素）：,创建一个可作为,class,属性应用于任何,HTML,元素的,自定义样式,。,注意：类名称,必须以点号开头,，并且可以包含任何字母和数字组合，例如，,.mycss1,。如果没有输入开头的点号，,Dreamweaver,将自动输入“,.unnamed1”,、“,.unnamed2”,等作为新建,CSS,样式名称。,4.2,创建,CSS,样式,标签（重新定义,HTML,元素）,：重新定义特定,HTML,标签的默认格式设置，所有用该标签设置了格式的文本都立即更新。,4.2,创建,CSS,样式,高级,：为具体某个标签组合或所有包含特定,ID,属性的标签定义格式，所提供的选择器（称作,伪类选择器,）包括,a:activea:hover,、,a:link,和,a:visited,。,a:active,：正在被访问的超级链接,a:hover,：当鼠标移至超级链接上，超级链接的样式,a:link,：还没有被访问过的超级链接,a:visited,：已经被访问过的超级链接,一般默认建立链接的文本为蓝色带下划线，访问过后为紫色带下划线。,4.2,创建,CSS,样式,3,、保存方式,保存在网页内部（内部,CSS,样式表）：一系列包含在文档,HTML,代码的,部分的,标签内的,CSS,样式。单击“仅对该文档”按钮。,保存在网页外部（外部,CSS,样式表）：一系列存储在独立的扩展名为,.css,的外部文件。在下拉框中选择新建样式表文件”。,4.2,创建,CSS,样式,4,、样式的编辑,方法一：双击所要编辑的样式，在,CSS,规则定义对话框中修改,方法二：选中所要编辑样式，在,CSS,样式面板中修改,5,、删除样式,方法一：选中所要删除的样式或某项属性，单击右键“删除”,方法二：在文本属性面板中，从“样式”弹出式菜单中选择“无”。,4.2,创建,CSS,样式,6,、样式的应用,方法一：选中所需设置样式的页面元素，选择相应样式，在,CSS,活动面板单击右键，进行套用,方法二：选中所需设置样式的页面元素，在属性面板中，选择类右侧的下拉菜单，进行套用,4.3,设置,CSS,属性,设置样式选项,4.3,设置,CSS,属性,“,类型,”,类别可以定义,CSS,样式的基本字体和类型设置。,“,行高,”,：设置文本所在行的高度。选择,“,正常,”,自动计算字体大小的行高，或输入一个确切的值并选择一种度量单位。比较直观的写法用百分比，例如,200%,是指行高等于文字大小的,2,倍。,“,修饰,”,：向文本中添加下划线、上划线或删除线，或使文本闪烁。正常文本的默认设置是,“,无,”,。,“,粗细,”,：对字体应用特定或相对的粗体量。,“,正常,”,等于,400,；,“,粗体,”,等于,700,。,“,变量,”,：设置文本的小型大写字母变量。,Dreamweaver,不在,“,文档,”,窗口中显示该属性。,Internet Explorer,支持变量属性，但,Navigator,不支持。,“,大小写,”,：将选定内容中的每个单词的首字母大写或将文本设置为全部大写或小写。,4.3,设置,CSS,属性,4.3,设置,CSS,属性,“,背景,”,类别可以定义,CSS,样式的背景设置。可以对网页中的任何元素应用背景属性。,例如，创建一个样式，将背景颜色或背景图像添加到任何页面元素中，比如在文本、表格、页面等的后面。还可以设置背景图像的位置。,“,背景颜色,”,和,“,背景图像,”,用于设置对象的背景颜色和图像。若同时为一个对象设置了背景颜色和图像，则,Dreamweaver,优先显示背景图像。,4.3,设置,CSS,属性,“,重复,”,：确定当背景图像的尺寸小于对象尺寸时，是否以及如何重复背景图像。有以下若干选项：,“,不重复,”,，在元素开始处显示一次图像；,“,重复,”,，在元素的后面水平和垂直平铺图像；,“,横向重复,”,和,“,纵向重复,”,分别显示图像的水平带区和垂直带区。图像被剪辑以适合元素的边界。,“,附件,”,：确定背景图像是固定在它的原始位置还是随内容一起滚动。注意，某些浏览器可能将,“,固定,”,选项视为,“,滚动,”,。,“,水平位置,”,和,“,垂直位置,”,：指定背景图像相对于元素的初始位置。这可以用于将背景图像与页面中心垂直和水平对齐。如果附件属性为,“,固定,”,，则位置相对于,“,文档,”,窗口而不是元素。,4.3,设置,CSS,属性,4.3,设置,CSS,属性,“,区块,”,类别可以定义标签和属性的间距和对齐设置。,“,单词间距,”,：设置单词之间的距离。若要设置特定的值，可在弹出式菜单中选择,“,值,”,，然后输入一个数值。在第二个弹出式菜单中，选择度量单位（例如像素、点等）。,“,字母间距,”,：增加或减小字母或字符的间距。若要减少字符间距，可指定一个负值（例如,-4,）。字母间距设置覆盖对齐的文本设置。,“,垂直对齐,”,：指定应用它的元素的垂直对齐方式。仅当应用于,标签时，,Dreamweaver,才在,“,文档,”,窗口中显示该属性。,4.3,设置,CSS,属性,“,文本对齐,”,：设置元素中的文本对齐方式。,“,文本缩进,”,：指定第一行文本缩进的程度。可以使用负值创建凸出，但显示效果取决于浏览器。仅当标签应用于块级元素时，,Dreamweaver,才在,“,文档,”,窗口中显示该属性。,“,空格,”,：确定如何处理元素中的空白。从下面三个选项中选择：,“,正常,”,，收缩空白；,“,保留,”,，其处理方式与文本被括在,pre,标签中一样（即保留所有空白，包括空格、制表符和回车）；,“,不换行,”,，指定仅当遇到,标签时文本才换行。,Dreamweaver,不在,“,文档,”,窗口中显示该属性。,“,显示,”,：指定是否以及如何显示元素。选项,“,无,”,表示关闭它所指定的元素的显示。,4.3,设置,CSS,属性,4.3,设置,CSS,属性,方框类别可以为控制元素在页面上的放置方式的标签和属性定义设置。,“,宽,”,和,“,高,”,：设置元素的宽度和高度。宽和高定义的对象多为图片，表格，层等。,“,浮动,”,：设置元素浮动方式（如文本、层、表格等）。其它元素按通常的方式环绕在浮动元素的周围。,“,清除,”,：不允许元素的浮动。左对齐：表示不允许左边有浮动对象。右对齐：表示不允许右边有浮动对象。两者：表示允许两边都可以有浮动对象。无：不允许有浮动对象。两种浏览器都支持,“,清除,”,属性。,4.3,设置,CSS,属性,“,填充,”,：指定元素内容与元素边框（如果没有边框，则为边距）之间的间距。取消选择,“,全部相同,”,选项可设置元素各个边的填充。,“,全部相同,”,：将相同的填充属性设置为它应用于的元素的,“,上,”,、,“,右,”,、,“,下,”,和,“,左,”,侧。,“,边界,”,：指定一个元素的边框（如果没有边框，则为填充）与另一个元素之间的间距。仅当应用于块级元素（段落、标题、列表等）时，,Dreamweaver,才在,“,文档,”,窗口中显示该属性。取消选择,“,全部相同,”,可设置元素各个边的边距。,“,全部相同,”,：将相同的边距属性设置为它应用于的元素的,“,上,”,、,“,右,”,、,“,下和,“,左,”,侧。,4.3,设置,CSS,属性,4.3,设置,CSS,属性,“,边框,”,类别可以定义元素周围的边框的设置例如宽度、颜色和样式。,“,样式,”,：设置边框的样式外观。样式的显示方式取决于浏览器。,Dreamweaver,在,“,文档,”,窗口中将所有样式呈现为实线。两种浏览器都支持样式属性。取消选择,“,全部相同,”,可设置元素各个边的边框样式。,“,宽度,”,：设置元素边框的粗细。两种浏览器都支持,“,宽度,”,属性。取消选择,“,全部相同,”,可设置元素各个边的边框宽度。,“,颜色,”,：设置边框的颜色。可以分别设置每个边的颜色，但显示取决于浏览器。取消选择,“,全部相同,”,可设置元素各个边的边框颜色。,4.3,设置,CSS,属性,4.3,设置,CSS,属性,“,列表,”,类别为列表标签定义列表设置（如项目符号大小和类型）。,“,类型,”,：设置项目符号或编号的外观。两种浏览器都支持,“,类型,”,。,“,项目符号图像,”,：可以为项目符号指定自定义图像。单击,“,浏览,”,选择图像或键入图像的路径。,“,位置,”,：设置列表项文本是否换行和缩进以及文本是否换行到左边距。,4.3,设置,CSS,属性,4.3,设置,CSS,属性,“,定位,”,样式属性使用,“,层,”,首选参数定义层的默认标签，将标签或所选文本块更改为新层。,“,类型,”,：确定浏览器应如何来定位层，有,“,绝对,”,、,“,相对,”,和,“,静态,”,三个选项。,“,绝对,”,，使用,“,定位,”,框中输入的坐标（相对于页面左上角）来放置层；,“,相对,”,，使用,“,定位,”,框中输入的坐标（相对于对象在文档的文本中的位置）来放置层。该选项不显示在,“,文档,”,窗口中；,“,静态,”,：将层放在它在文本中的位置。,“,显示,”,：确定层的初始显示条件。如果不指定可见性属性，则默认情况下大多数浏览器都继承父层的值。其选项包括：,“,继承,”,，指定继承父层的可见性属性。如果层没有父层，则它将是可见的；,“,可见,”,，显示该层的内容，而不管父层的值是什么；,“,隐藏,”,隐藏这些层的内容，而不管父层的值是什么。,4.3,设置,CSS,属性,“,Z,轴,”,：确定层的堆叠顺序。编号较高的层显示在编号较低的层的上面。值可以为正，也可以为负。注意：若要改变堆叠顺序使用,“,层,”,面板更改层的堆叠顺序更容易。,“,溢出,”,：确定在层的内容超出它的大小时的处理方法，此仅限于,CSS,层。其选项包括：,“,可见,”,，增加层的大小，使它的所有内容均可见。层向右下方扩展；,“,隐藏,”,，保持层的大小并剪辑任何超出的内容，不提供任何滚动条；,“,滚动,”,，在层中添加滚动条，不论内容是否超出层的大小，该选项仅适用于支持滚动条的浏览器。,I,4.3,设置,CSS,属性,自动,”,：使滚动条仅在层的内容超出它的边界时才出现。,“,定位,”,：指定层的位置和大小。例如当鼠标停留在超级链接时，层上移,8,像素的效果。效果浏览器如何解释位置取决于,“,类型,”,设置。位置和大小的默认单位是像素。对于,CSS,层，还可以指定下列单位：,pc,（十二点活字）、,pt,（点）、,in,（英寸）、,mm,（毫米）、,cm,（厘米）、,(ems),、,(exs),或,%,（父层值的百分比）。缩写必须紧跟在值之后，中间不留空格：例如，,3mm,。,“,剪辑,”,：定义层的可见部分。如果指定了剪辑区域，可以通过脚本语言（如,JavaScript,）访问它，并操作属性以创建像擦除这样的特殊效果。通过使用,“,改变属性,”,行为可以设置这些擦除效果。,4.3,设置,CSS,属性,4.3,设置,CSS,属性,“,扩展,”,样式属性包括过滤器、分页和指针选项,“,分页,”,：若选中该项，则在打印期间在样式所控制的对象之前或者之后时强行分页。选择要在弹出式菜单中设置的选项。,“,光标,”,：用来设置光标显示属性设置。当指针位于样式所控制的对象上时改变指针图像。可选择弹出式菜单进行设置。,4.3,设置,CSS,属性,“,过滤器,”,：又称,CSS,滤镜，对样式所控制的对象应用特殊效果。它把我们带入绚丽多姿的世界。正是有了滤镜属性，页面才变得更加漂亮。,Dreamweaver,扩展类过滤器嵌入,16,项样式属性，可以根据实际需要从,“,过滤器,”,弹出式菜单中选择并加以设置。在弹出式菜单的选项中包含,“,？,”,号，这些问号表示要求设计者用具体的值来代替。,实例,1,gaikuang.html,样式编辑,1,、创建类,CSS,样式,步骤一：建立新的,CSS,样式，选择“类”，名称为,.title,，设置其字体：黑体，大小：,46px,，颜色：黑色；,步骤二：选中“厦门概括”，套用,.title,样式；,步骤三：同理对文档的文字进行设置：新建类,.text,，在“类型”分类中为其设定“字体”为仿宋,_GB2312,、“大小”为,16px,、“颜色”为黑色；在“区块”分类中为其设定“字母间距”为,2px,、“文字缩进”为,20,点数。,实例,1,gaikuang.html,样式编辑,2,、创建标签,CSS,样式,步骤四：新建标签样式，从“标签”的弹出式菜单中选择无序列表标签“,li,”,，“仅对该文档”生效,步骤五：在“,.Li,的,CSS,样式定义”对话框中设置。在“类型”分类中为其设定“字体”为仿宋,_GB2312,、“大小”为,16px,、“颜色”为黑色；在“区块”分类中为其设定“字母间距”为,2px,；在“列表”分类中“项目符号图像中”选择站点文件夹,xiamen,下的,gold_flower,.gif,。,步骤六：对各个列表项应用样式“,.,li,实例,1,gaikuang.html,样式编辑,3,、创建高级样式,步骤七：对文档中“经济状况”等超级链接样式进行修改。在此规定，默认的超链接（,a:link,）为黑色、仿宋,_GB2312,、,16px,、无下划线；鼠标经过链接（,a:hover,）为红色、仿宋,_GB2312,、,16px,、有下划线；访问过（,a:visited,）的链接是暗红色、仿宋,_GB2312,、,16px,、无下划线。,步骤八：保存，预览页面。,实例,2,链接外部样式表,外部,CSS,样式表是一些列存储在一个单独的外部,CSS(.CSS),文件中的,CSS,规则。,实例,2,链接外部样式表,参考步骤：,1.在,CSS,面板中，单击右键选择附加样式表,2.,选择,images/yangshi.css,，添加为 设置为链接，即可链接外部样式表。,实例,3,导出样式以创建,CSS,样式表,参考步骤,1.,打开素材文件，在样式面板中选择的,CSS,样式，单击右键，选择“导出”选项,2.,保存为样式文件。,实例,4,定义文本间行距,参考步骤,1.,新建,CSS,规则，选择类，名称,.hg,，仅对该文档,2.,设置大小为,12,像素，行高为,200%,，颜色为黑色,3.,选择设置行高的对象，套用。,实例,5,设置文字间距,为了避免在网页中文字过于拥挤，可利用,CSS,设置文字与文字的间距,参考步骤：,1.新建,CSS,样式，选择器类型为类，名称为,.,jianju,，仅对该文档,2.,区块：字母间距设为,0.5,字体高,3.,选择对象，套用。,实例,6,如何解决文字在不同电脑的显示大小,经常会出现网页中的文字在某些电脑上号正常，但在某些电脑上会变大或变小，为了解决这一问题，必须将网页中的文字利用,CSS,固定才行，这样不论在哪台电脑都不会变化,参考步骤,1.,新建,CSS,规则，选择器类型为类，名称为,.,zt,，仅对该文档,2.,类型：字体为宋体，大小,12,像素,3.,选择对象，套用。,实例,7,利用,CSS,设计水平线样式,实例,7,利用,CSS,设计水平线样式,参考步骤,1.,新建,CSS,规则，选择器类型为类，名称为,.spx,，仅对该文档,2.,打开,.spx,的,CSS,规则定义对话框，选择边框选项，设置为虚线,3.,选中水平线，应用样式。,实例,8,消除链接文字下划线,参考步骤,1.,新建,CSS,样式，选择器类型为类，名称为,.,xhx,，仅对该文档,2.,打开,.,xhx,的,CSS,规则定义，大小为,13,像素，颜色为黑色，修饰为无,3.,选择对象，套用,实例,9,利用,CSS,改变鼠标形状,参考步骤,1.,新建,CSS,规则，选择器类型为类，名称为,.,shb,，仅对该文档,2.,扩展：光标下拉列表中选择,Crosshair,3.,选择应用对象，套用。,实例,10,利用,CSS,滤镜制作光晕文字,实例,10,利用,CSS,滤镜制作光晕文字,参考步骤,1.,在相应位置插入,1,行,1,列表格，设置为居中对齐，输入“中秋节”，设置居中对齐,2.,新建,CSS,样式，选择器类型设为类，名称,.,gy,，大小为,24,像素，颜色,#BDBDFE,3.,扩展：在滤镜下拉列表中选择,Glow(Clolr,=,？,Strength=?),，设置,Color,为,#FF0000,，,Strength,为,10,4.,选中,表格,，套用。,实例,10,利用,CSS,滤镜制作光晕文字,说明：,“,glow,”,滤镜只有两个参数，,“,color,”,是指定发光的颜色，,“,strength,”,是发光的强度，也可理解为光芒的长度。取值范围,1,255,之间的任何整数。,实例,11,利用,CSS,滤镜制作立体文字,参考步骤,1.,新建,CSS,规则，选择器类型为类，名称为,.,lt,，仅对该文档,2.,扩展,:,在滤镜下拉列表中选择,Blur,（,Add=,？,Direction=?,Strength=?,），其中,Add,为,true,Direction,为,135,Strength=10,3.,选中文字所在表格，套用。,实例,11,利用,CSS,滤镜制作立体文字,说明：把,Blur,滤镜加载到文字上，可产生立体字的效果，加载到图片上，可以产生风吹模糊效果。,Add,：是否让,Blur,滤镜起作用，只有两个值，即,true,和,false,；,Direction,：阴影的方向，取值范围,0360,度，,45,度一个间隔，所以实际上只有八个方向值；,Strength,：指定阴影的长度,实例,12,应用,CSS,样式制作阴影文字,应用,CSS,中的,Shadow,滤镜可以制作阴影文字,实例,12,应用,CSS,样式制作阴影文字,参考步骤,1.,在相应位置插入,1,行,1,列表格，设置为居中对齐,2.,新建,CSS,规则，选择器类型为类，名称为,.,yy,，仅对该文档，打开,.,yy,的,CSS,规则定义对话框，,3.,类型：设置字体为宋体，大小24,像素，颜色为,#EC3B09,4.,扩展：,实例,12,应用,CSS,样式制作阴影文字,说明：,shadow,滤镜格式为,shadow,（,Color=,？，,Direction=,？），其中,Color,为投影的颜色，用十六制数表示，,Direction,为投影角度，取,0360,度。当为,0,度是，投影垂直向上。本例,Color=#990000,，,Direction=100,5.,选择所要应用表格，套用。,说明：,CSS,滤镜只能,应用于有局域限制的对象,，如表格、单元格、图片等，而不能直接用于文字，所以需要把要增加特效的文字放在表格中，在对表格应用,CSS,样式。,实例,13,利用,CSS,制作导航栏,实例,13,利用,CSS,制作导航栏,参考步骤,1.,在相应位置插入层，输入文字,2.,新建,CSS,规则，选择器类型为高级，下拉列表中选择,a:link,（有链接的文字样式）,仅对该文档作用，修饰设置为无,3.,新建,CSS,规则，选择器类型为高级，下拉列表中选择,a:visited(,已经访问过得链接样式,),仅对该文档作用，修饰设置为无,实例,13,利用,CSS,制作导航栏,4.,新建,CSS,规则，选择器类型为高级，下拉列表中选择,a:hover,（鼠标停留在链接时文字的样式）,仅对该文档作用；边框：设置为上凸出，细；,5.,新建,CSS,规则，选择器类型为高级，下拉列表中选择,a:active,（链接激活是的样式）,仅对该文档作用；边框：设置为上凹陷，细；,6.,保存预览。,Thanks!,