网页美化DIV层CSS样式.ppt

DIV层运用+CSS样式,主讲:夏琳,CSS样式基本介绍,1、什么是CSS样式2、CSS样式表的功能3、CSS的语法4、CSS样式在网页中的四种存在5、CSS样式面板6、CSS样式实例,什公是CSS样式,CSS是“Cascadingstylesheet”的缩写。中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。是对HTML语法的革新。CSS简化了HTML中各种繁琐的标签，使各标签的属性更具一般性和通用性，扩充原来的功能。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。,CSS样式表的功能,可以灵活地控制网页中文字的字体、颜色、大小、间距、风格及位置。可以灵活地设置一个文本块的行高、缩进，并可以加入三维效果的边框。,CSS以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景、整体排版等等.,CSS样式表的优点,CSS使页面载入更快；CSS可以降低网站的流量；CSS使设计师在修改设计时更有效率，而代价更低；CSS使整个站点保持视觉的一致性；CSS使站点可以更好地被搜索引擎找到；CSS使站点对浏览者和浏览器更具亲和力：掌握CSS可以提高设计师的职场竞争力。,CSS的语法,CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。基本格式如下：selectorproperty:value（选择符属性：值）其中：HTML标签不带尖括号。标签属性：属性值参数是一一对应的，每个属性与属性值之间用分号隔开。属性名由两个或两个以上的单词构成时，单词之间以“-”隔开。,基本语法：,!Pfont-family：“宋体”；font-size：9pt；color：#000000Tdfont-family：“楷体”；font-size：20pt；font-style；italic；font-weigh：800；text-decoration：blink；color：#000000,标记选择符HTML标记选择符是对页面中的同一类HTML元素采用同一样式的设置,使其风格一致。,格式:HTML标记CSS样式属性:取值;CSS样式属性:取值.,例如:要使页面中应用了标记的文字全部呈现红色，可这样设置：文字内容文字内容文字内容,!Pfont-family:”宋体”;font-size:9pt;line-height:12pt;color:#00000Tdfont-family:”楷体_GB2312”;font-size:20pt;font-style:italic;A:hoverbackground-color:#ffccff;color:#ff6666;text-decortion:underline;float:leftA:linkcolor:#ff33ff;text-decoration:noneA:visitedcolor:#6600ff;text-decorton:noneA:activecolor:green;text-decoration:none;background-color:#ffcc99,类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类：p.righttext-align:rightp.centertext-align:center然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数：这个段落向右对齐的这个段落是居中排列的注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。,2.类选择符,类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式：.centertext-align:center（定义.center的类选择符为文字居中排列）这样的类可以被应用到任何元素上。下面我们使h1元素（标题1）和p元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符：这个标题是居中排列的这个段落也是居中排列的注意：这种省略HTML标记的类选择符是我们经后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。,HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代：这个段落向右对齐定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id=intro的元素：#introfont-size:110%;font-weight:bold;color:#0000ff;background-color:transparent（字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明）,3.ID选择符,下面这个例子，ID属性只匹配id=intro的段落元素：p#introfont-size:110%;font-weight:bold;color:#0000ff;background-color:transparent注意：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。,4.选择符组你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：h1,h2,h3,h4,h5,h6color:green（这个组里包括所有的标题元素，每个标题元素的文字都为绿色）p,tablefont-size:9pt（段落和表格里的文字尺寸为9号字）效果完全等效于：pfont-size:9pttablefont-size:9pt,你可以在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以/*开头，以*/结尾，如下：/*定义段落样式表*/ptext-align:center;/*文本居中排列*/color:black;/*文字为黑色*/font-family:arial/*字体为arial*/,5、注释,CSS样式在网页中的三种存在方式,1、外部文件方式（外联样式表）CSS以文件的形式存在，在HTML文档头通过文件引用进行控制。CSS文件的引用是在标签之间写下列语句:,2、内嵌样式不以文件的形式存在,仅作用于本文档,直接定义在之间.,3、直接插入式（行内样式）,只需要在每个HTML标签后书写CSS属性。作用范围只限于本标签。在统一站点风格上，用第一方式，在某个网页风格统一上，用第二种方式，而在网页内部某个标签的具体调整上，用第三种方式。,4、导入式样式,导入样式表和外联样式表在概念上类似，都是将多个页面所共用的CSS单独保存在一个CSS文件中，在HTML页面的部分调用这个文件。不同的是导入样式表形式上有点像外联样式来得及和内嵌样式表的结合，与外联样式表的区别是导入样式表在浏览器解释HTML代码是将外部CSS文件中的内容全部调入给页面中，而外联样式表则不将外部CSS文件中的内容调入给页面中，而只在调用到该样式时才在外部CSS文件中调用该样式的定义。,格式：,（1）显示“CSS样式”面板的方式：打开“窗口”菜单“CSS”样式（2）样式视图,CSS样式面板,在Type里有三种样式表类型可供选择：lMakeCustonStyle(class)：（创建自定义样式）自定义一个样式，可以作为class属性应用于页面中。2RedefineHTMLTag：（重定义HTML标记）对指定的HTML标记的默认格式进行重新定义。3UseCSSSelector：（使用CSS选择符）对特定的标签组合，或者包含有指定ID属性的所有标签进行格式定义。,创建自定义样式：名称须以.开头，可应用到任何范围。重定义HTML标签：将扩充某个HTML标签的功能。使用CSS选择器：重新定义一些标签的特定组合格式。外部：将以文件的形式存在。仅对该文档：内嵌式样式。,在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性，Dreamweaver4把这些属性分为Type（类型）、Background（背景）、Block（块）、Box（盒子）、Border（边框）、List（列表）、Positioning（定位）、Extensions（扩展）八个部分，如左图，下面我们分别详细讲解。,CSS提供了一些内置的多媒体滤镜特效，使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上，例如图片、文本容器、以及其他一些对象。Dreamweaver4提供了16种滤镜可供选择，如下图：,创建新的CSS样式创建新的CSS样式的步骤如下：（1）将添加点放在文档中，然后执行以下操作之一打开“新建CSS样式”对话框：（2）定义CSS样式的类型（3）选择定义样式的位置（4）单击“确定”。出现“CSS样式定义”对话框。（5）选择要为新CSS样式设置的样式选项。（6）设置完样式属性后，单击“确定”。,CSS样式实例内嵌样式,内嵌式样式(InlineStyle)这个内嵌样式(InlineStyle)定义段落里面的文字是20pt字体，字体颜色是红色。这段文字没有使用内嵌样式。,CSS样式实例内部样式表,H1.mylayoutborder-width:1;border:solid;text-align:center;color:red这个标题使用了Style。这个标题没有使用Style。,CSS样式实例内部样式表,GenericClassSelector.centertext-align:center这个标题居中显示。这个段落居中显示。,CSS样式实例外部样式表,这个标题使用了Style。这个标题没有使用Style。,CSS样式实例背景颜色属性,背景颜色background-colorbodybackground-color:#99FF00;这个HTML使用了CSS的background-color属性，将HTML的背景颜色变成翠绿色。,CSS样式实例背景重复属性,背景重复background-repeatbodybackground-image:url(./images/css_tutorials/background.jpg);background-repeat:repeat-y这个HTML使用了CSS的background-repeat属性，使背景图片竖向重复。常用的background-repeat的属性值有:repeat-x(横向重复)，repeat-Y(横向重复),no-repeat(不重复)。background-repeat属性要和background-image一起用。,CSS样式实例边距属性,CSS边距属性margin.D1border:1pxsolid#FF0000;.D2border:1pxsolidgray;.D3margin:0.5cm1cm2.5cm1.5cm;border:1pxsolidgray;没有margin上面两个div没有设置边距属性(margin)，仅设置了边框属性(border)。外面那个div的border设为红色，里面那个div的border属性设为灰色。和上面两个div的CSS属性设置不同的是，下面两个div中，里面的那个div设置了边距属性(margin)，设定上边距为0.5cm，右边距为1cm，下边距为2.5cm，左边距为1.5cm。上下左右边距宽度各不同,CSS样式实例文本修饰属性,文本修饰属性text-decoration.p1text-decoration:none.p2text-decoration:underline.p3text-decoration:line-through.p4text-decoration:overline文本修饰属性(text-decoration)的缺省值是none。这段的文本修饰属性(text-decoration)值是underline。这段的文本修饰属性(text-decoration)值是line-through。这段的文本修饰属性(text-decoration)值是overline。,CSS样式实例文本缩进属性,文本缩进属性text-indent.p1text-indent:8m