关闭

关闭

关闭

封号提示

内容

首页 CSS编程基础与DIV+CSS.doc

CSS编程基础与DIV+CSS.doc

CSS编程基础与DIV+CSS.doc

上传者: 回忆是苍白 2017-09-26 评分 0 0 0 0 0 0 暂无简介 简介 举报

简介:本文档为《CSS编程基础与DIV+CSSdoc》,可适用于IT/计算机领域,主题内容包含CSS编程基础与DIVCSSCSS编程基础(一)CSS简介CSS是CascadingStyleSheets的英文缩写,即层叠样式表。作用是控制网页样符等。

CSS编程基础与DIVCSSCSS编程基础(一)CSS简介CSS是CascadingStyleSheets的英文缩写,即层叠样式表。作用是控制网页样式并将样式信息与网页内容分离的一种标记性语言。CSS常常与HTML标记配合使用通过链接方式对HTML标记进行控制使网页达到更美观的效果。特点:,CSS文件是一个后缀为CSS的文本文件,包含各种CSS标记。,CSS是一种标记语言,不需要编译,可以直接由浏览器解释执行。,CSS可以支持多种设备,如手机,PDA,打印机等。,使用CSS可以减少网页代码量,增加网页的浏览速度。CSS文件链接方式HTML文档链接CSS有三种方式:,外部引用,内部引用,内联引用一、CSS外部引用CSS外部引用使用了外接的CSS文件浏览器一般都带有缓存功能所以用户不用每次都下载此CSS文件。,外部引用是WC推荐使用的是最好的引入CSS的方式可以网页使代码量最小,表现最统一。外部引用CSS的两种方法:使用link标签引用CSS语法:<linkrel="stylesheet"type="textcss"href="*css">stylesheet指连接的元素是一个样式表使用import引用CSS语法:<styletype="textcss">importurl(*css)<style>注意:一些老式的浏览器不支持import方法二、内部引用CSS可以使用style标签直接把CSS文件中的内容加载到HTML文档内部在HTML文档的<html>和<body>标记之间插入一个<style><style>块对象<styletype="textcss">body{fontfamily:"隶书"fontsize:ptcolor:blue}<style>三、内联引用CSS内联引用可以把CSS样式直接作用在HTML标签中<pstyle="fontsize:pxcolor:#FF">使用CSS内联引用表现段落<p>内联引用虽然是一种快捷的方式但是不利于以后的统一修改和表现的一致性所以不提倡使用。总结:在实际应用中往往是种样式表同时运用:,网站的总体风格依靠外部样式表来定义每个网站的网页都链接一个或几个固定的css文件,当某个页面需要特别的样式时则在该页面上采用内部样式表,当页面的某个标签需要特别的样式时在该标签上应用内联样式表。通过这样的方法做到了共性与个性的统一在变化与现多次。长度单位在CSS中长度单位用于宽度、高度、字号、字和字母间距、文本的缩排、行高、页边距、贴边、边框线宽以及许多其他属性。p{fontsize:px}长度单位分两种:,相对长度单位,绝对长度单位长度单位CSS相对长度单位会随着它的参考值变化而变化不是固定的。以下是CSS相对长度单位列表:CSS相对长度单位说明相对于当前对象内文本的字体尺寸。如果现在的字体大小为pt那么emem=pt。若当前行内文本的字体尺寸未被人为设置则相对于浏览器的默认字体尺寸。相对于字符“x”的高度。此高度通常为字体尺寸的一半。ex像素Pixels是相对于显示器分辨率而言的。WONDOWS的用户所使用的分辨px率一般是像素英寸。而MAC的用户所使用的分辨率一般是像素英寸。可能会因为浏览者的屏幕分辨率不同而造成显示上的效果差异。百分比绝对长度单位是一个固定的值。CSS绝对长度单位说明英寸Inches(英寸=厘米)in厘米Centimeterscm毫米Millimetersmm点Points(点=英寸)pt皮卡Picas(皮卡=点)pc注意:,pt单位在所有的浏览器和操作平台上都适用in=pc=pt=cm=mm,绝对长度值最好用于打印机输出设备而在仅仅作为屏幕显示时应该尽量使用相对长度值,注意:,不要在属性值与单位之间留有空格。假如使用“px”而不是“px”在很多浏览器中可能无法正常工作。<styletype="textcss">p{fontsize:px}<style>RGB颜色十六进制颜色表示法:,#rrggbb,如:#ff#ff#ff短进制颜色表示法:,#rgb,如:#f#f#f,短进制颜色表示法就是当进制颜色表示法中的两个表示颜色值的数字一样的时候的简写比如#ff可以简写为#f。RGB颜色表示法,rgb(x,x,x)x是一个介乎~之间的整数。,例如:rgb(,,)rgb(,,)rgb(,,)RGB百分比颜色表示法,rgb(y,y,y)y是一个介乎~之间的整数。,例如:,rgb(,,),rgb(,,),rgb(,,)示例:p{color:#ff}p{color:#f}p{color:rgb(,,)}p{color:rgb(,,)}注意:使用RGB百分比时即使值为也要写百分比符号。CSS字体属性CSS字体属性用于定义文字的字体,大小,粗细的表现等是样式表的最常见用途之一。属性描述简写属性。作用是把所有针对字体的属性设置在一个声明中。font设置字体系列。fontfamily设置字体的尺寸。fontsize设置字体风格如斜体字。fontstyle以小型大写字体或者正常字体显示文本。fontvariant设置字体的粗细。fontweightfontfamily:设置字体相当于HTML标记中fontface属性的功能。,系统中不一定有我们定义的字体,可以定义多个字体,如果第一个字体没有,就使用下一个,以此类推。,字体名称超过一个单词时要使用冒号扩起来比如“TimesNewsRoman”,“宋体“。fontsize:定义字体的大小值描述xxsmall最小xsmall较小small小绝对大小从xxsmall到xxlarge。medium正常默认值:medium。large大xlarge较大xxlarge最大把fontsize设置为比父元素更小的尺寸。smaller把fontsize设置为比父元素更大的尺寸。larger把fontsize设置为一个固定的值。中文常用字体是pxlength把fontsize设置为基于父元素的一个百分比值。fontstyle:定义字体显示的方式参数有三种:,normal:正常的字体。,italic:斜体。对于没有斜体变量的特殊字体将应用oblique。,oblique:属于其中间状态以偏斜体显示。fontvariant:设置对象中的文本是否为小型大写字母。参数:normal:正常字体smalcaps:小型大写字母字体fontweight:定义字体的粗细其值包括:normal:正常,等同于bold:粗体,等同于bolder:更粗lighter:更细||||||||:字体粗细的值前面几个字体属性完全可以使用font属性代替该属性是复合属性:font:fontstyle||fontvariant||fontweight||fontsize||lineheight||fontfamily默认值为:normalnormalnormalmediumnormal"TimesNewRoman"注意:声明方式参数必须按照如上的排列顺序。每个参数仅允许有一个值。可以不设置其中的某个值比如font:verdana也是允许的。未设置的属性会使用其默认值。CSS文本属性CSS文本属性可定义文本的外观。通过文本属性您可以改变文本的颜色、字符间距对齐文本装饰文本对文本进行缩进等。属性描述设置文本颜色color设置文本方向。direction设置行高。lineheight设置字符间距。letterspacing对齐元素中的文本。textalign向文本添加修饰。textdecoration缩进元素中文本的首行。textindent控制元素中的字母。texttransform设置文本方向。unicodebidi设置元素中空白的处理方式。whitespace设置字间距。wordspacing设置文本方向direction属性:规定文本的方向书写方向。值描述默认。文本方向从左到右。ltr文本方向从右到左。rtl说明:direction属性一般与unicodebidi属性一起使用unicodebidi属性用于同一个页面里存在从不同方向读进的文本显示。语法:unicodebidi:normal|bidioverride|embed说明:normal是系统的默认值表示对象不打开附加的嵌入层bidioverride表示严格按照direction属性的值重排序embed表示对象打开附加的嵌入层将direction属性的值指定给嵌入层在对象内部进行隐式重排序。如果想要在内联文本中应用direction属性必须设定该属性的值为embed或bidioverride。设置单词间距wordspacing属性,定义以空格间隔文字的间距,文本间距是指单词(包括汉字与字母)之间插入的空格数。,距离差只是单词与单词的与单词内部没关系。属性值:值描述默认。定义单词间的标准空间。normal定义单词间的固定空间。长度是设定单词间隔的数值及单位可以使用负值。length设置字符间隔letterspacing属性,定义文本中字母的间隔(中文为汉字的间隔)。,在英文中代表字母与字母之间的距离,在中文中代表字与字之间的距离。属性值:值描述默认。规定字符间没有额外的空间。normal定义字符间的固定空间(允许使用负值)。length字母大小写转换texttransform属性定义文本的大小写状态此属性对中文无意义texttransform可以有以下四个值:文本修饰textdecoration属性文本修饰属性允许通过五个属性设置文本的某种效果其属性值如下:注意:IE、Chrome或Safari不支持“blink”属性值。在netscape浏览器中才有效。空白处理方式whitespace属性用于设置页面对象内空白(包括空格和换行等)的处理方式。默认情况下HTML中的连续多个空格会被合并成一个而使用这一属性可以设置成其他的处理方式。属性值:值描述默认。将多个连续的空格合并。normal空白和换行会被浏览器保留。类似HTML中的<pre>标签。pre文本不会换行文本会在在同一行上继续直到遇到<br>标签为止。nowrap保留空格但是正常地进行换行。prewrap合并空格但是保留换行符。preline设置文本水平对齐textalign属性规定元素中的文本的水平对齐方式。属性值:设置文本垂直对齐verticalalign属性设置元素的垂直对齐方式。属性值:文本缩进textindent属性规定文本块中首行文本的缩进。文本缩进属性可以应用于块级元素(p、h等)以定义该元素第一行可以接受的缩进的数量。属性值:值描述定义固定的缩进。默认值:。length定义基于父元素宽度的百分比的缩进。注意:允许使用负值。如果使用负值那么首行会被缩进到左边。行距lineheight行距属性行距指的是行与行之间的距离。在正文中行距能让文本有足够的文本视觉空间。属性值:值描述默认。设置合理的行间距。normal设置数字此数字会与当前的字体尺寸相乘来设置行间距。number设置固定的行间距。length基于当前字体尺寸的百分比行间距。CSS背景设置背景颜色backgroundcolor属性设置元素的背景颜色。属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框)会透过这些透明部分显示出背景色。属性值:值描述规定颜色值为颜色名称的背景颜色(比如red)。colorname规定颜色值为十六进制值的背景颜色(比如#ff)。hexnumber规定颜色值为rgb代码的背景颜色(比如rgb(,,))。rgbnumber默认。背景颜色为透明。transparent设置背景图像backgroundimage属性,为元素设置背景图像。,元素的背景占据了元素的全部尺寸包括内边距和边框但不包括外边距。,默认地背景图像位于元素的左上角并在水平和垂直方向上重复。,属性值:值描述指向图像的路径。url('URL')默认值。不显示背景图像。none设置背景图像滚动backgroundattachment属性背景图像滚动是指背景图像是随对象内容滚动还是让背景图像固定。backgroundattachment:scroll|fixedscroll为默认值表示图像内容滚动而滚动。fixed是固定的即背景图像固定的网页中。当页面的其余部分滚动时背景图像不会移动。设置背景图像位置backgroundposition属性设置背景图像的起始位置。当对象的背景图像用background引入时根据背景图像大小不同所在页面显示的位置也会不一样。值描述toplefttopcentertoprightcenterleft如果您仅规定了一个关键词那么第二个值将是"center"。centercenter默认值:。centerrightbottomleftbottomcenterbottomright第一个值是水平位置第二个值是垂直位置。左上角是。右下角是。xy如果您仅规定了一个值另一个值将是。第一个值是水平位置第二个值是垂直位置。左上角是。单位是像素(pxpx)或任何其他的CSS单位。xposypos如果您仅规定了一个值另一个值将是。您可以混合使用和position值。设置背景图像如何铺排backgroundrepeat属性属性定义了图像的平铺模式。设置是否及如何重复背景图像。背景图像的位置是根据backgroundposition属性设置的。如果未规定backgroundposition属性图像会被放置在元素的左上角。值描述默认。背景图像将在垂直方向和水平方向重复。repeat背景图像将在水平方向重复。repeatx背景图像将在垂直方向重复。repeaty背景图像将仅显示一次。norepeat综合设置background属性background简写属性在一个声明中设置所有的背景属性。可以按顺序设置如下属性:•backgroundcolor•backgroundimage•backgroundrepeat•backgroundattachment•backgroundposition如果不设置其中的某个值也不会出问题比如background:#ffurl('smileygif')也是允许的。通常建议使用这个属性而不是分别使用单个属性因为这个属性在较老的浏览器中能够得到更好的支持而且需要键入的字母也更少。CSS列表列表从某种意义上讲不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单甚至你的所有朋友都可以表示为一个列表或者是列表的列表。由于列表如此多样这使得列表相当重要CSS列表属性允许你放置、改变列表项标志或者将图像作为列表项标志。CSS列表属性(list)属性描述简写属性。用于把所有用于列表的属性设置于一个声明中。liststyle将图象设置为列表项标志。liststyleimage设置列表中列表项标志的位置。liststyleposition设置列表项标志的类型。liststyletype列表项图像liststyleimage属性使用图像来替换列表项的标记。这个属性指定作为一个有序或无序列表项标志的图像。值描述图像的路径。URL默认。无图形被显示。none列表标志位置liststyleposition属性设置在何处放置列表项标记。该属性用于声明列表标志相对于列表项内容的位置。外部(outside)标志会放在离列表项边框边界一定距离处不过这距离在CSS中未定义。内部(inside)标志处理为好像它们是插入在列表项内容最前面的行内元素一样。值描述列表项目标记放置在文本以内且环绕文本根据标记对齐。inside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外outside且环绕文本不根据标记对齐。列表项标记类型liststyletype属性设置列表项标记的类型值描述无标记。none默认。标记是实心圆。disc标记是空心圆。circle标记是实心方块。square标记是数字。decimal开头的数字标记。(,,,等。)decimalleadingzero小写罗马数字(i,ii,iii,iv,v,等。)lowerroman大写罗马数字(I,II,III,IV,V,等。)upperroman小写英文字母Themarkerisloweralpha(a,b,c,d,e,loweralpha等。)大写英文字母Themarkerisupperalpha(A,B,C,D,E,upperalpha等。)CSS表格CSSTable属性CSS表格属性允许你设置表格的布局。(请注意本章介绍的不是如何使用表来建立布局而是要介绍CSS中表本身如何布局。)属性描述设置是否把表格边框合并为单一的边框。bordercollapse设置分隔单元格边框的距离。(仅用于"separatedborders"模型)borderspacing设置表格标题的位置。captionside设置是否显示表格中的空单元格。(仅用于"separatedborders"模型)emptycells设置显示单元、行和列的算法。tablelayoutbordercollapse属性bordercollapse属性设置表格的边框是否被合并为一个单一的边框还是象在标准的HTML中那样分开显示。值描述默认值。边框会被分开。不会忽略borderspacing和emptycells属性。separate如果可能边框会合并为一个单一的边框。会忽略borderspacing和collapseemptycells属性。borderspacing属性borderspacing属性设置相邻单元格的边框间的距离(仅用于“边框分离”模式)。注意:某些版本的IE浏览器不支持此属性。值描述规定相邻单元的边框之间的距离。使用px、cm等单位。不允许使用负值。如果定义一个length参数那么定义的是水平和垂直间距。lengthlength如果定义两个length参数那么第一个设置水平间距而第二个设置垂直间距。该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中第一个是水平间隔第二个是垂直间隔。除非bordercollapse被设置为separate否则将忽略这个属性。captionside属性captionside属性该属性指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前(或之后)的一个块级元素。值描述默认值。把表格标题定位在表格之上。top把表格标题定位在表格之下。bottom把表格标题定位在表格左边。left把表格标题定位在表格右边。right注意:IEIE不支持该属性firefox支持emptycells属性emptycells属性设置是否显示表格中的空单元格(仅用于“分离边框”模式)。该属性定义了不包含任何内容的表单元格如何表示。如果显示就会绘制出单元格的边框和背景。除非bordercollapse设置为separate否则将忽略这个属性。值描述默认。不在空单元格周围绘制边框。hide在空单元格周围绘制边框。show注意:IEIE不支持该属性firefox支持tablelayout属性tablelayout属性用来显示表格单元格、行、列的算法规则。值描述默认。列宽度由单元格内容设定。automatic列宽由表格宽度和列宽度设定。fixedtablelayout属性固定表格布局:固定表格布局与自动表格布局相比允许浏览器更快地对表格进行布局。在固定表格布局中水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距而与单元格的内容无关。通过使用固定表格布局用户代理在接收到第一行后就可以显示表格。自动表格布局:在自动表格布局中列的宽度由列单元格中没有折行的最宽的内容设定。此算法有时会较慢这是由于它需要在确定最终的布局之前访问表格中所有的内容固定布局算法比较快但是不太灵活而自动算法比较慢不过更能反映传统的HTML表。CSS轮廓《与下文中的边框对比学习》轮廓(outline)是绘制于元素周围的一条线位于边框边缘的外围可起到突出元素的作用。CSSoutline属性规定元素轮廓的样式、颜色和宽度。IE和IE不完全支持outline属性CSS轮廓属性属性描述在一个声明中设置所有的轮廓属性。outline设置轮廓的颜色。outlinecolor设置轮廓的样式。outlinestyle设置轮廓的宽度。outlinewidth设置轮廓的颜色outlinecolor属性设置一个元素整个轮廓中可见部分的颜色。,请始终在outlinecolor属性之前声明outlinestyle属性。元素只有获得轮廓以后才能改变其轮廓的颜色。,轮廓线不会占据空间也不一定是矩形。,要记住轮廓的样式不能是none否则轮廓不会出现。值描述规定颜色值为颜色名称的轮廓颜色(比如red)。colorname规定颜色值为十六进制值的轮廓颜色(比如#ff)。hexnumber规定颜色值为rgb代码的轮廓颜色(比如rgb(,,))。rgbnumber默认。执行颜色反转(逆向的颜色)。可使轮廓在不同的背景颜色invert中都是可见。设置轮廓的样式outlinestyle属性用于设置元素的整个轮廓的样式。样式不能是none否则轮廓不会出现。请始终在outlinecolor属性之前声明outlinestyle属性。元素只有获得轮廓以后才能改变其轮廓的颜色。IE和IE不能很好的支持。值描述默认。定义无轮廓。none定义点状的轮廓。dotted定义虚线轮廓。dashed定义实线轮廓。solid定义双线轮廓。双线的宽度等同于outlinewidth的值。double定义D凹槽轮廓。此效果取决于outlinecolor值。groove定义D凸槽轮廓。此效果取决于outlinecolor值。ridge定义D凹边轮廓。此效果取决于outlinecolor值。inset定义D凸边轮廓。此效果取决于outlinecolor值。outset设置轮廓的宽度outlinewidth属性设置元素整个轮廓的宽度只有当轮廓样式不是none时这个宽度才会起作用。如果样式为none宽度实际上会重置为。不允许设置负长度值。请始终在outlinewidth属性之前声明outlinestyle属性。元素只有获得轮廓以后才能改变其轮廓的颜色。值描述规定细轮廓。thin默认。规定中等的轮廓。medium规定粗的轮廓。thick允许您规定轮廓粗细的值。length综合设置outline属性outline简写属性在一个声明中设置所有的轮廓属性。可以按顺序设置如下属性:,outlinecolor,outlinestyle,outlinewidth如果不设置其中的某个值也不会出问题比如outline:solid#ff也是允许的。规定边框的颜色。outlinecolor规定边框的样式。outlinestyle规定边框的宽度。outlinewidthCSS尺寸CSS尺寸(Dimension)属性允许你控制元素的高度和宽度。同样它允许你增加行间距。属性描述设置元素的高度。height设置行高。lineheight设置元素的最大高度。maxheight设置元素的最大宽度。maxwidth设置元素的最小高度。minheight设置元素的最小宽度。minwidth设置元素的宽度。width设置元素的高度height属性height属性设置元素的高度。值描述默认。浏览器会计算出实际的高度。auto使用px、cm等单位定义高度。length基于包含它的父对象的百分比高度。设置元素的宽度width属性width属性设置元素的宽度值描述默认值。浏览器可计算出实际的宽度。auto使用px、cm等单位定义宽度。length定义基于包含块(父元素)宽度的百分比宽度。CSS滤镜CSS滤镜将把我们带入绚丽多姿的多媒体世界。正是有了CSS滤镜属性页面才变得更加漂亮。CSS滤镜属性的标识符是filter。其书写格式如下:filter:filtername(parameters)Filter是滤镜属性选择符。filtername是滤镜属性名parameters是表示各个滤镜属性的参数这些参数决定了滤镜将以怎样的效果显示。CSS滤镜属性名称CSS滤镜属性描述设置透明度Alpha设置模糊效果Blur设置指定颜色透明Chroma设置投射阴影Dropshadow水平翻转Fliph垂直翻转Flipv为对象的外边界增加光效Glow设置灰度(降低图片的色彩度)Grayscale设置底片效果Invert设置灯光投影Light设置透明膜Mask设置阴影效果Shadow利用正弦波纹打乱图片Wave只显示轮廓XrayCSS滤镜仅适用于以下标签网页文档的主体元素所有的可见范围都在<BODY>元素内body表单域的按钮可以有“发送(submit)”、“重置(reset)”等形式button定义了网页上的一个区域这个区域的高度、宽度或者绝对位置都是已知的div图片元素通过指定“src"属性来指定图片的来源img输入表单域input移动字幕效果marquee定义了网页上的一个区域这个区域的高度、宽度或者绝对位置都是以知的span表格table表格数据单元格td文本区域textarea输入文本框text表格标题单元格th表格标题thead表格行tralpha属性alpha属性用来设置图片透明度。filter:alpha(opacity=opcity透明度等级可选值从到代表完全透明代表完全不透明finishopacity=finishopacitystyle=stylestartX=startXstartY=startYfinishX=finishXfinishY=finishY)Opacity代表透明度等级可选值从到代表完全透明代表完全不透明。Style参数指定了透明区域的形状特征。其中代表统一形状代表线形代表放射状代表长方形。Finishopacity是一个可选项用来设置结束时的透明度从而达到一种渐变效果它的值也是从到。StartX和StartY代表渐变透明效果的开始坐标。finishX和finishY代表渐变透明效果的结束坐标。blur属性blur属性blur属性设置可以达到某种模糊的效果语法格式如下:filter:blur(add=adddirectionstrength=strength)Add参数有两个参数值:true和false。意思是指定图片是否被改变成模糊效果。Strength参数值只能使用整数来指定它代表有多少像素的宽度将受到模糊影响。默认值是像素。Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中度代表垂直向上每度一个单位默认值是向左的度。角度方向的对应关系见下表:CSS滤镜:blur属性角度CSS滤镜:blur属性方向top垂直向上topright垂直向右right向右bottomright向下偏右bottom垂直向下bottomleft向下偏左left向左topleft向上偏左Chroma属性Chroma属性设置可以设置一个对象中指定的颜色为透明色。chroma属性对于图片文件不是很适合。因为很多图片是经过了减色和压缩处理(比如JPG、GIF等格式)所以它们很少有固定的位置可以设置为透明。语法格式如下:Filter:Chroma(color=color)DropShadow属性DropShadow属性DropShadow属性可以添加对象的阴影效果。实现的效果看上去就像使原来的对象离开页面然后在页面上显示出该对象的投影。chroma属性对于图片文件不是很适合。因为很多图片是经过了减色和压缩处理(比如JPG、GIF等格式)所以它们很少有固定的位置可以设置为透明。DropShadow属性语法格式如下:Filter:DropShadow(Color=colorOffx=OffxOffy=offyPositive=positive)Color代表投射阴影的颜色。Offx和offy分别X方向和Y方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数代表X轴的右方向和Y轴的向下方向。设置为负整数则相反。Positive参数有两个值:True为任何非透明像素建立可见的投影False为透明的像素部分建立可见的投影。FlipH属性、FlipV属性FlipH属性、FlipV属性FlipH属性、FlipV属性是CSS滤镜的翻转属性。FlipH代表水平翻转FlipV代表垂直翻转。语法格式如下:Filter:FlipHFilter:FlipVGray属性Gray属性Gray属性就是把一张图片变成灰度图。语法格式:Filter:GrayGlow属性Glow属性使对象的边缘产生类似发光的效果。语法格式:Filter:Glow(Color=colorStrength=strength)Color是指定发光的颜色。Strength指定发光的强度参数值从到。Invert属性Invert属性可以把对象的可视化属性全部翻转包括色彩、饱和度和亮度值。语法格式:Filter:InvertMask属性Mask属性可以为对象建立一个覆盖于表面的膜。语法格式:Filter:Mask(Color=颜色)只有一个Color参数用来指定使用什么颜色作为掩膜。mask属性对图片文件的支持还是不够不能达到应该有的效果。Shadow属性Shadow属性Shadow属性可以在指定的方向建立物体的投影。语法格式:Filter:Shadow(Color=colorDirection=direction)Color参数用来指定投影的颜色Direction参数用来指定投影的方向。Dropshadow属性和Shadow属性的区别Shadow属性可以在任意角度进行投射阴影Dropshadow属性实际上是用偏移来定义阴影的。所以看上去左图的文字和阴影就像是一体的而右图的文字就像脱离了阴影一样。Wave属性Wave属性Wave属性用来把对象按照垂直的波纹样式打乱。语法格式:Filter:Wave(Add=True(False)Freq=频率LightStrength=增强光效,Phase=偏移量Strength=强度)Add参数有两个参数值:True代表把对象按照波纹样式打乱False代表不打乱Freq参数指生成波纹的频率也就是指定在对象上共需要产生多少个完整的波纹。LightStrength参数是为了使生成的波纹增强光的效果。参数值可以从到。Phase参数用来设置正弦波开始的偏移量。这个值的通用值为它的可变范围为从到。这个值代表开始时的偏移量占波长的百分比。比如该值为代表正弦波从度(*)的方向开始。Xray属性Xray属性Xray属性顾名思义这种属性产生的效果就是使对象看上去有一种X光片的感觉。语法格式:Filter:XrayCSS框模型CSS框模型概述元素框的最内部分是实际的内容直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距外边距默认是透明的因此不会遮挡其后的任何元素。width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸但是会增加元素框的尺寸。CSS框模型概述假设框的每个边上有个像素的外边距和个像素的内边距。如果希望这个元素框达到个像素就需要将内容的宽度设置为像素如下图所示:内边距、边框和外边距都是可选的默认值是零。但是许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式。可以使用通用选择器对所有元素进行设置:*{margin:padding:}浏览器兼容性大多数浏览器都会按照上面的图示来呈现内容。然而IE和的呈现却是不正确的。根据WC的规范元素内容占据的空间是由width属性设置的而内容周围的padding和border值是另外计算的。不幸的是IEX和在怪异模式中使用自己的非标准模型。这些浏览器的width属性不是内容的宽度而是内容、内边距和边框的宽度的总和。padding属性元素的内边距在边框和内容区之间。控制该区域最简单的属性是padding属性。padding属性接受长度值或百分比值但不允许使用负值。属性描述简写属性。作用是在一个声明中设置元素的所内边距属性。padding设置元素的下内边距。paddingbottom设置元素的左内边距。paddingleft设置元素的右内边距。paddingright设置元素的上内边距。paddingtop所有h元素的各边都有像素的内边距h{padding:px}使用四个单独的属性分别设置上、右、下、左内边距h{paddingtop:pxpaddingright:empaddingbottom:expaddingleft:}省略的数值写法:如果没有left值则使用right代替如果没有bottom值则使用top代替如果没有right值则使用top值代替。可以按照上、右、下、左的顺序分别设置各边的内边距各边均可以使用不同的单位或百分比值:h{padding:pxemex}示例:paddingDemohtmlCSS边框元素的边框(border)是围绕元素内容和内边距的一条或多条线。CSSborder属性允许你规定元素边框的样式、宽度和颜色。属性描述简写属性用于把针对四个边的属性设置在一个声明。border用于设置元素所有边框的样式或者单独地为各边设置边框样式。borderstyle简写属性用于为元素的所有边框设置宽度或者单独地为各边borderwidth边框设置宽度。简写属性设置元素的所有边框中可见部分的颜色或为个边bordercolor分别设置颜色。简写属性用于把下边框的所有属性设置到一个声明中。borderbottom设置元素的下边框的颜色。borderbottomcolor设置元素的下边框的样式。borderbottomstyle设置元素的下边框的宽度。borderbottomwidth简写属性用于把左边框的所有属性设置到一个声明中。borderleft设置元素的左边框的颜色。borderleftcolor设置元素的左边框的样式。borderleftstyle设置元素的左边框的宽度。borderleftwidth简写属性用于把右边框的所有属性设置到一个声明中。borderright设置元素的右边框的颜色。borderrightcolor设置元素的右边框的样式。borderrightstyle设置元素的右边框的宽度。borderrightwidth简写属性用于把上边框的所有属性设置到一个声明中。bordertop设置元素的上边框的颜色。bordertopcolor设置元素的上边框的样式。bordertopstyle设置元素的上边框的宽度。bordertopwidth定义边框的样式CSS的borderstyle属性定义了个不同的非inherit样式包括none。值描述定义无边框。none与"none"相同。不过应用于表时除外对于表hidden用于解决边框冲突。hidden定义点状边框。在大多数浏览器中呈现为实线。dotted定义虚线。在大多数浏览器中呈现为实线。dashed定义实线。solid定义双线。双线的宽度等于borderwidth的值。double定义D凹槽边框。其效果取决于bordercolor的值。groove定义D垄状边框。其效果取决于bordercolor的值。ridge定义Dinset边框。其效果取决于bordercolor的值。inset定义Doutset边框。其效果取决于bordercolor的值。outset规定应该从父元素继承边框样式。inherit示例:borderstyleDemohtmlborderstyleDemohtml边框的宽度borderwidth简写属性为元素的所有边框设置宽度或者单独地为各边边框设置宽度。只有当边框样式不是none时才起作用。如果边框样式是none边框宽度实际上会重置为。值描述定义细的边框。thin默认。定义中等的边框。medium定义粗的边框。thick允许您自定义边框的宽度。length规定应该从父元素继承边框宽度。inheritCSS没有定义个关键字的具体宽度所以一个用户代理可能把thin、medium和thick分别设置为等于px、px和px而另一个用户代理则分别设置为px、px和px。可以按照toprightbottomleft的顺序设置元素的各边边框:实例:borderwidthDemohtml注意:由于borderstyle的默认值是none如果没有声明样式就相当于borderstyle:none。因此如果希望边框出现就必须声明一个边框样式。例如:根据以下规则所有h元素都不会有任何边框更不用说像素宽了:边框的颜色设置边框颜色非常简单。CSS使用一个简单的bordercolor属性它一次可以接受最多个颜色值。可以使用任何类型的颜色值例如可以是命名颜色也可以是十六进制和RGB值:如果颜色值小于个值复制就会起作用。例如下面的规则声明了段落的上下边框是蓝色左右边框是红色:注意:边框的样式不能为none或hidden否则边框不会出现。要始终把borderstyle属性声明到bordercolor属性之前。元素必须在您改变其颜色之前获得边框。综合实例:bordercolorDemohtml定义单边颜色还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同:•bordertopcolor•borderrightcolor•borderbottomcolor•borderleftcolor要为h元素指定实线黑色边框而右边框为实线红色可以这样指定margin属性margin在中文中我们翻译成外边距。他是元素盒模型(boxmodel)的基础属性。围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用margin属性这个属性接受任何长度单位、百分数值甚至负值。margin属性可以应用于几乎所有的元素属性描述简写属性。在一个声明中设置所有外边距属性。margin设置元素的下外边距。marginbottom设置元素的左外边距。marginleft设置元素的右外边距。marginright设置元素的上外边距。margintopmargin默认值为px并且margin支持负值可以使用单边外边距属性为元素单边上的外边距设置值:p{margintop:pxmarginright:pxmarginbottom:pxmarginleft:px}也可以使用margin属性进行综合设置:p{margin:pxpxpxpx}不论使用单边属性还是使用margin得到的结果都一样。属性margin可以用来同时指定box的四边外边距。如果属性margin有四个值那么值将按照上右下左的顺序作用于四边即从元素的上边开始按照顺时针的顺序围绕元素。表达式如下:margin:toprightbottomleftmargintop:valuemarginright:valuemarginbottom:valuemarginleft:valuediv标签CSSXHTML主要用div标签进行网页的布局而控制布局的工具是CSS代码以使网页符合Web标准。所以很多网页设计师把这种布局方法的网页叫做“DivCSS”网页。div标签在Web标准的网页中使用非常频繁那么相对于其他HTML继承而来的元素div有什么特别之处呢,div标签可以放置任何内容包括其他的div标签。也就是说div标签是一个没有任何特性的容器而已。div标签作为网页CSS布局的主力元素相对于表格布局更加灵活因为div只是一个没有任何特性的容器CSS可以非常灵活地对其进行控制组成网页的每一块区域。在大多数情况下仅仅通过div标签和CSS的配合即可完成页面的布局<div>我是第个div标签中的内容<div><div>我是第个div标签中的内容<div><div>我是第个div标签中的内容<div>说明:没有CSS的帮助下div标签没有任何特别之处每个div标签占据一行。即默认情况下一行只能容纳一个div标签<styletype="textcss">#top,#bt{backgroundcolor:#eee}#mid{backgroundcolor:#width:px}#bt{width:px}<style><divid="top">第个div标签中的内容<div><divid="mid">第个div标签中的内容<div><divid="bt">第个div标签中的内容<div>说明:通过背景色的设置可以看到div标签默认占据一行宽度也为一行的宽度。通过宽度的设置可以发现并不是因为div的宽度为一行导致无法容纳后面的div标签。无论宽度多小一行始终只有一个div标签。div元素的样式设置设置宽度与高度width属性用于设置其宽度height属性设置其高度。由于网页大多数用于计算机显示屏幕作媒介所以常用像素作为固定尺寸的单位即px。(在HTML元素中设置样式不需要填写单位默认为像素。)当单位为百分比时div元素的宽度和高度为自适应状态即宽度和高度适应浏览器窗口尺寸而变化。<styletype="textcss">#fst{backgroundcolor:#eeeborder:pxsolid#width:pxheight:px}#sec{backgroundcolor:#eeeborder:pxsolid#width:height:}<style><divid="fst">这是固定尺寸的宽度和高度<div><hr><divid="sec">这是自适应尺寸的宽度和高度<div>说明:第个div宽度和高度固定形成了一个“坚硬”的盒子。而第个div由于设置其宽度为其宽度随着浏览器的宽度变化而变化。但是第个div的高度虽然设置为按理说其高度应该随着浏览器的高度变化而变化。然而在示例中div高度仅和文本高度相当好像高度设置没有起作用。其实设置高度自适应有一个前提div的高度自适应是相对于父容器的高度本例中div父容器为body或者html(不同浏览器解析方式不同)。body或者html在本例中没有设置高度div的高度自适应没有参照物也就无法生效。接下来在CSS中设置body和html的高度就可解决div的高度自适应问题。body和html的高度直接设置为即可不会对页面有任何影响。布局页面水平居中为了适应不同浏览用户的分辨率网页设计师要始终保证页面整体内容在页面居中。使用HTML表格布局页面时只需要设置布局表格的align属性为center即可。而div居中没有属性可以设置只能通过CSS控制其位置。在布局页面前网页制作者一定要把页面的默认边距清除。为了方便操作常用的方法是使用通配选择符*将所有对象的边距清除即margin属性和padding属性。margin属性代表对象的外边距(上、下、左、右)padding属性代表对象的内边距也叫填充(上、下、左、右)。margin属性和padding属性类似于表格单元格的cellspacing属性和cellpadding属性不过margin属性和padding属性作用于所有块状元素。使div元素水平居中的方法有多种常用的方法是用CSS设置div的左右边距即marginleft属性和marginright属性。当设置div左外边距和右外边距的值为auto即自动时左外边距和右外边距将相等即达到了div水平居中的效果。<styletype="textcss">*{margin:pxpadding:px}#all{width:height:pxbackgroundcolor:#eeeborder:pxsolid#marginleft:automarginright:auto}<style><divid="all">布局页面内容<div>div元素的嵌套类似于表格布局页面为了实现复杂的布局结构div元素也需要互相嵌套。不过在布局页面时尽量少嵌套因为XHTML元素多重嵌套将影响浏览器对代码的解析速度。<styletype="textcss">*{margin:pxpadding:px}#all{width:pxheight:pxbackgroundcolor:#margin:pxauto}#one{width:pxheight:pxbackgroundcolor:#eeeborder:pxsolid#margin:pxauto}#two{width:pxheight:pxbackgroundcolor:#eeeborder:pxsolid#margin:pxauto}<style><divid="all"><divid="one">顶部<div><divid="two">底部<div><div>div元素的浮动一个div标签占据一行怎样实现布局中并列块区域呢,块状元素有一个很重要的“float”属性可以使多个块状元素并列于一行。float属性也被称为浮动属性对前面的div元素设置浮动属性后当前面的div元素留有足够的空白宽度时后面的div元素将自动浮上来和前面的div元素并列于一行。float属性的值有left、right、none和inherit。很多对象都有inherit属性这是继承属性代表继承父容器的属性。float属性值为none时块状元素不会浮动这是块状元素的默认值。float属性值为left时块状元素将向左浮动float属性值为right时块状元素将向右浮动。注意:使个div并列于一行的前提是:这一行有足够的宽度容纳个div的宽度。设置div向左浮动<styletype="textcss">*{margin:pxpadding:px}#one{width:pxheight:pxbackgroundcolor:#eeeborder:pxsolid#float:left}#two{width:pxheight:pxbackgroundcolor:#eeeborder:pxsolid#}<style><divid="one">第个div<div><divid="two">第个div<div>设置第个div向右浮动<styletype="textcss">*{margin:pxpadding:px}#one{width:pxheight:pxbackgroundcolor:#eeeborder:pxsolid#float:left}#two{width:pxheight:pxbackgroundcolor:#eeeborder:pxsolid#float:right}<style><divid="one">第个div<div><divid="two">第个div<div>个div元素对换位置<styletype="textcss">*{margin:pxpadding:px}#one{width:pxheight:pxbackgroundcolor:#eeeborder:pxsolid#float:right}#two{width:pxheight:pxbackgroundcolor:#eeeborder:pxsolid#float:left}<style><divid="one">第个div<div><divid="two">第个div<div>为了更加灵活地定位div元素CSS提供了clear属性中文意思即为“清除”。clear属性的值有none、left、right和both默认值为none。当多个块状元素由于第个设置浮动属性而并列时如果某个元素不需要被“流”上去即可设置相应的clear属性。示例:divclearhtml说明:第种情况为默认情况即clear属性值为none由于前面的div都设置了浮动属性(个向左浮动个向右浮动)所以第个div元素自动“流”上去处于个div之间的空白处。第种情况clear属性值为both即不管前面的div设置向左浮动还是向右浮动此div元素不自动“流”上去。其不受浮动影响保持在底部不动。第种情况clear属性值为right第个div两边都有浮动的div但不允许向右浮动的div处于同一行所以第个div元素自动换行。第种情况clear属性值为left第个div两边都有浮动的div但不允许向右浮动的div处于同一行所以第个div元素自动换行

用户评论(0)

0/200

精彩专题

上传我的资料

每篇奖励 +2积分

资料评价:

/67
0下载券 下载 加入VIP, 送下载券

意见
反馈

立即扫码关注

爱问共享资料微信公众号

返回
顶部