样式表(css)经析二

August 11, 2008 | tags css   | views
Comments 0

样式表中的方框属性
(1) 方框属性包括上边界margin-top、右边界margin-right、下边界margin-bottom、左边界margin-left、边界margin、上补白padding-top、右补白paddint-right、下补白padding-bottom、左补白padding-left、补白padding、上边框宽度border-top-width、右边框宽度border-right-width、下边框宽度border-bottom-width、左边框宽度border-left-width、边框宽度border-width、边框颜色border-color、边框风格border-style、上边框border-top、右边框border-right、下边框border-bottom、左边框border-left、边框border、宽度width、高度height、漂浮float、清除clear共26种属性。

下面分别介绍:
1.上边界属性margin-top用于设定元素上边界同其他元素之间的空白距离,当应用于标记时就相当于该标记的topmargin属性。上边界属性用一个指定的长度或者百分比来设置元素的上边界。百分比值参考上级元素的宽度。允许使用负值。语法:marign-top:[<长度>|<百分比>|auto]初始值:0适用于:所有元素向下兼容:否范例:table{margin-top:20px}

2.右边界属性margin-right跟上边界属性用法相似,在此不再赘述,仅给出语法。语法:marign-right:[<长度>|<百分比>|auto]初始值:0适用于:所有元素向下兼容:否范例:table{margin-right:20px}

3.下边界属性margin-bottom用法:同上。语法:marign-bottom:[<长度>|<百分比>|auto]初始值:0适用于:所有元素向下兼容:否范例:table{margin-bottom:20px}

4.左边界属性margin-left同上。语法:marign-left:[<长度>|<百分比>|auto]初始值:0适用于:所有元素向下兼容:否范例:table{margin-left:20px}

5.边界属性margin是用1~4个值来略写设置前面4个边界的。每个值都是长度、百分比或者自动。百分比参考上级元素的宽度。允许使用负值。语法:marign:[<长度>|<百分比>|auto]{1,4}初始值:未定义适用于:所有元素向下兼容:否
范例1:table{margin:20px 20px 20px 20px}
范例2:table{margin:20px}
范例3:table{margin:20px 10px}
范例4:table{margin:20px 10px 15px}
如果4个值都给出,它们分别对应上、右、下、左边界(如范例1)。如果只给出一个值,它将被应用于四个边界属性(比如范例2,table的四个边界都被指定为20px)。如果只给出两个或三个值,缺少的边界值将使用对边所指定的值(范例3只给出两个值,对应上边界和右边界,这时下边界将使用上边界的值20px,左边界将使用右边界的值10px。范例4只给出三各值,缺少左边界的值将使用右边界的值10px。)如果边界属性在垂直方向上邻接了,会改用其中较大的那个值,比如设置<li>的margin-top为15px,margin-bottom为20px,则两个<li>元素之间的垂直方向上的边界会取20px为其值而不是两个值之和35px。而在水平方向上则不会按此规则选取较大值。

6.上补白属性padding-top描述了边框同内部元素之间的空白距离。比如一个表元td,它的内部元素,不妨假设为一段文字,其首行文字顶端到td上边框的距离就是上补白。该属性跟上边界比较相似,其值可以是一个长度或者百分比。百分比的值参考上级元素的宽度。但补白(包括下面的右补白,下补白等)不能象边界一样使用负值。
语法:padding-top:[<长度>|<百分比>]初始值:0适用于:所有元素向下兼容:否
范例:p{padding-top:20px}7.右补白属性padding-right用法同上补白。
语法:padding-top:[<长度>|<百分比>]初始值:0适用于:所有元素向下兼容:否范例:p{padding-top:20px}8.下补白属性padding-bottom同上。
语法:padding-bottom:[<长度>|<百分比>]初始值:0适用于:所有元素向下兼容:否
范例:p{padding-bottom:20px}9.左补白属性padding-left同上。
语法:padding-left:[<长度>|<百分比>]初始值:0适用于:所有元素向下兼容:否范例:p{padding-left:20px}10.补白属性是上补白、右补白、下补白、左补白属性的略写。用法同边界属性margin。
语法:padding:[<长度>|<百分比>]{1,4}初始值:0适用于:所有对象向下兼容:否
范例1:p{padding:20px 20px 20px 20px}
范例2:p{padding:20px}
范例3:p{padding:20px 10px}
范例4:p{padding:20px 10px 15px}
样式表中的方框属性(2)
7.上边框宽度border-top-width定义了一个元素上边框的宽度。值可以是三个关键字中的一个,可以用于实现成比例的宽度。不允许使用负值。
语法:border-top-width:[thin|medium|thick<长度>]初始值:视元素而定适用于:所有元素向下兼容:否
范例:p{border-top-width:2px}注意单纯设置边框宽度而让边框风格为“none”的话也是看不见边框的,边框风格将在下面讲到。

8右边框宽度border-right-width定义了一个元素右边框的宽度。值可以是三个关键字中的一个,可以用于实现成比例的宽度。不允许使用负值。
语法:border-right-width:[thin|medium|thick|<长度>]初始值:视元素而定适用于:所有元素向下兼容:否
范例:p{border-right-width:2px}

9.下边框宽度border-bottom-width定义了一个元素下边框的宽度。值可以是三个关键字中的一个,可以用于实现成比例的宽度。不允许使用负值。
语法:border-bottom-width:[thin|medium|thick|<长度>]初始值:视元素而定适用于:所有元素向下兼容:否
范例:p{border-bottom-width:2px}

10.左边框宽度border-left-width定义了一个元素左边框的宽度。值可以是三个关键字中的一个,可以用于实现成比例的宽度。不允许使用负值。
语法:border-left-width:[thin|medium|thick|<长度>]初始值:视元素而定适用于:所有元素向下兼容:否
范例:p{border-left-width:2px}15.边框宽度border-width是上边框,右边框,下边框,左边框属性的略写。用法同补白属性padding。语法:border-width:[thin|medium|thick|<长度>]{1,4}初始值:没有定义适用于:所有对象向下兼容:否范例:p{border-width:20px 20px 20px 20px}

11.边框颜色border-color用语设置一个元素的边框色彩。用法同补白padding,可以使用1~4个值指定颜色。
语法:border-color:[<颜色>]{1,4}初始值:颜色属性的值适用于:所有对象向下兼容:否
范例:p{border-color:#000000}注意该属性在边框风格属性值为none时也是看不见效果的。

12.边框风格属性border-style用于设置一个元素的边框样式。这个属性必须用于指定可见的边框。可以使用1~4个关键字。用法同补白padding属性。
语法:border-style:[none|dotted|dashed|solid|double|groove|ridge|inset|ouset]{1,4}初始值:none适用于:所有对象向下兼容:否
范例:p{border-style:solid}其中属性值的含义:none(没有边框),dotted(点组成的虚线),dashed(短线组成的虚线),solid(实线),double(双线),groove(3D沟槽状边框),ridge(3D脊状边框),inset(3D内嵌),outset(3D外嵌)。
注意经实测,目前许多浏览仅支持none和solid两种属性,IE5则能支持solid,double,outset,inset,groove等属性。使用除none和solid以外的属性值时须多注意测试与权衡。

13.上边框属性border-top是一个用于设置一个元素上边框宽度,式样和颜色的缩写。注意只能给出一个边框式样,可以使用略写的边框属性。语法:border-top:[<上边框宽度>||<边框式样>||<边框颜色>]初始值:未定义适用于:所有对象向下兼容:是
范例:p{border-top:2px solid #999999}

14.右边框属性border-right使用方法同上。
语法:border-right:[<边框宽度>||<边框式样>||<边框颜色>]初始值:未定义适用于:所有对象向下兼容:否
范例:p{border-right:2px solid #999999}20.下边框属性border-bottom使用方法同上。语法:border-bottom:[<边框宽度>||<边框式样>||<边框颜色>]初始值:未定义适用于:所有对象向下兼容:否范例:p{border-bottom:2px solid #999999}

15.左边框属性border-bottom使用方法同上。
语法:border-left:[<边框宽度>||<边框式样>||<边框颜色>]初始值:未定义适用于:所有对象向下兼容:否
范例:p{border-left:2px solid #999999}

16.边框属性border用于设定一个元素边框宽度,式样和颜色的略写。边框属性只能为一个元素的四个边框设置相同的值,若需设置不同值,则必须使用其它如边框颜色,边框宽度等属性。
语法:border:[<边框宽度>||<边框式样>||<边框颜色>]初始值:未定义适用于:所有对象向下兼容:否
范例:p{border:2px solid #999999}

17.宽度属性width用于设置一个块级元素或者替换元素的宽度,可以使用具体的长度或者关键字auto来进行指定。初始值为auto,即元素原有宽度,百分比值参考上级元素的宽度,不允许使用负值。
语法:width:[<长度>|auto]初始值:auto适用于:块级元素或替换元素向下兼容:否
范例:p{width:80%}

18.高度属性height同宽度属性width相似,可以使用具体的长度或者关键字auto表示,不允许使用负值。唯一的区别是不允许使用百分比值表示。
语法:height:[<长度>|auto]初始值:auto适用于:块级元素或替换元素向下兼容:否
范例:p{height:550px}

19.漂浮属性float允许网页制作者将文本环绕在一个元素的周围。这同HTML中<img>标记的align=left或align=right是一样的:图象位于左边(或右边),文字则位于右边(或左边)和下边。但样式表中的漂浮属性可以用于所有对象而不是HTML中的仅仅局限于图象和表格。
语法:float:[left|right|none]初始值:none适用于:所有元素向下兼容:否
范例:img{float:left}

20.清除属性clear用于指定一个元素是否允许有元素漂浮在它的旁边。值left清除在其左边的元素并安排到下边。right类似。both则清除左右侧元素。
语法:clear:[none|left|right|both]初始值:none适用于:所有元素向下兼容:否
范例:img{clear:right}样式表的分类属性 分类属性(也称分级属性)包括显示属性display、空白属性white-space、目录样式类型list-style-type、目录样式图象list-style-image、目录样式位置list-style-position和目录样式list-style共6种。
1.显示属性display允许使用下面四个值中的一个来定义一个元素:block(在元素的前后都有换行)、inline(在元素的前后都没有换行,相当于行内元素)、list-item(与block相同,但增加了目录项标记)、none(不显示)
语法:display:[block|inline|list-item|none]初始值:视元素而定适用于:所有元素向下兼容:否
范例:img{display:block}当元素应用了display属性的none值时,元素不参与排版,即元素不会占用任何页面空间,而不管元素本来尺寸有多大。直觉上就如同页面上没有该元素一般。另外经实测,IE不支持list-item属性值。

2.空白属性white-space将决定如何处理一个元素内的空格,该属性的值可以取normal(将多个连续的空格折叠成一个)、pre(不折叠空格)和nowrap(不允许换行,除非遇到<br>)3个中的一个。语法:white-space:[normal|pre|nowrap]初始值:normal适用于:块级元素向下兼容:是范例:p{white-space:pre}值得一提的是,该样式属性目前尚未得到浏览器的广泛支持,包括对样式表支持教好的IE5在内。

3.目录样式类型属性list-style-type用于指定目录项标记的类型,当目录样式图象值为none或当图象载入选项被关闭时使用。该属性在列表中使用较多。语法:list-style-type:[disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none]初始值:disc适用于:带有显示值的目录项元素向下兼容:是范例:li{list-style-type:square}属性值的含义说明:disc(圆饼,即实心圆),circle(圆圈,即空心圆),square(方块),decimal(十进制数1,2,3,4等),lower-roman(小写罗马数字i,ii,iii等),upper-roman(大写罗马数字Ⅰ,Ⅱ,Ⅲ,Ⅳ等),lower-alpha(小写字母a,b,c,d等),upper-alpha(大写字母A,B,C,D等),none(无)

4.目录样式图象属性list-style-image用于指定使用哪个图象代替目录项标记进行显示。语法:list-style-image:[<url>|none]初始值:none适用于:带有显示值的目录项元素向下兼容:是范例:li{list-style-image:url(img/abc.gif)}

5.目录样式位置属性list-style-position可取的值包括inside(内部)和outside(外部)。用于决定目录项标记的位置放在哪里,如果是inside值,则目录项标记如同目录项的内部元素。初始值为outside。
语法:list-style-position:[inside|outside]初始值:outside适用于:所有对象向下兼容:是
范例:li{list-style-position:inside}6.目录样式属性list-style是目录样式类型、目录样式位置和目录样式图象三个属性的略写。
语法:list-style:[<目录样式类型>||<目录样式位置>||<url>]初始值:未定义适用于:带有显示值的目录项元素向下兼容:是
范例:li{list-style:square inside url(img/abc.gif)}样式表的鼠标属性 CSS的鼠标属性用于设置鼠标移动到元素上时的鼠标形状。比如说,在通常情况下,鼠标呈朝向左上方的箭头,而当鼠标移动到超链接上时会呈手状,有了鼠标属性,我们就可以随意的定制鼠标移动到网页元素上的“玉容”啦。
语法:cursor:[auto|crosshair|default|hand|move|e-resize|ne-resize|nw-resize|n-resize|se-resize|sw-resize|s-resize|w-resize|text|wait|help]初始值:未定义适用于:所有元素向下兼容:是
范例:a{cursor:crosshair}你只要将你的鼠标移动到语法栏对应的值上就可以看到鼠标形状了。其中初始值为auto,而值default是指使用鼠标正常状况下的形状(操作系统的默认形状,当未做更改时是朝向左上方的箭头)。不过部分IE5会不正常的支持该鼠标属性,表现为取值nw-resize时鼠标形状本来应该是朝向左上方的箭头状(即鼠标正常时的默认形状),实际上却变成了改变物件大小的“沿对角线调整”形状了。遇到这种情况你所看见的鼠标样式也就不是正确的样式了。样式表的定位属性 定位属性包括位置属性position、左边距属性left、上边距属性top、元素宽度属性width、元素高度属性height、剪切属性clip、溢出处理属性overflow、Z轴定位属性z-index和可视属性visibility。定位属性在DHTML中占有重要地位,一些javascript菜单正因为该定位属性才能得以实现。

1.定位类型属性position可以取三个值static(静态定位)、relative(相对定位)和absolute(绝对定位),其中static是其初始值。
语法:position:[static|relative|absolute]初始值:未定义适用于:所有元素向下兼容:否
范例:div{position:absolute}一个元素最初即具有static类型的定位属性静态定位。静态定位和相对定位效果相当,区别是,前者不能为内部元素提供定位依据,而后者可以。这些话可能你还不能理解,先让我们看看绝对定位,回过头来再讲静态和相对定位。说到绝对定位,其实很好理解,它的原理其实就相当于坐标定位。定位参照点(相当于坐标原点)通常在浏览器显示区域的左上角,竖直向下方向为Y轴的正方向。定位参照点到被定位元素左上角的竖直距离用top进行设定。水平向右方向为X轴的正方向,定位参照点到被定位元素左上角的水平距离用left进行设定。比如将一个图象定位在距离原点(150象素,100象素)的网页位置上,使用下面的语句即可:<img src="url" style="position:absolute;left:150px;top:100px">这样也就很容易理解,为什么一个使用绝对定位的元素,将之放置于某个元素的前面或者后面都不会影响它在页面上的位置的。那么什么又是静态定位和相对定位呢?前面说过,任何一个HTML元素,它的初始定位属性值都是静态。假设一个页面中有并且只有三个HTML的段落元素p,则浏览器在显示这三个段落时会按顺序将第二个段落放在第一个段落之后,第三个段落放在第二个段落之后。假如我们修改HTML文件,删除第二个段落,这时第三个段落就占据原来第二个段落的位置,而如果增加第一个段落的内容,则第二个,第三个段落都会往下移。这就是静态定位和相对定位的重要性质:一个元素的位置视前面的元素而定。假如页面中有一个table元素,我们将一个绝对定位元素,比如前面举例的那个img元素书写在table元素的内部,这时若table元素的定位属性是相对定位,则img的定位参照点就是table元素的左上角,而不是浏览器的左上角,当table元素在浏览器上的位置变动时,img元素势必也会做相应的变动。但若table使用的是静态定位,则img的定位参照点仍然是浏览器的左上角,而不管table元素在页面上的具体位置如何。这就是相对定位和静态定位的区别。假设一个元素内部没有绝对定位元素,那么它的定位属性无论是静态还是相对,该元素的显示效果是相同的。此外采用相对定位时还可以通过指定left和top属性指定该元素的位置偏移。正值表示向X或者Y轴正方向偏移,负值相反。

2.上边距属性top刚刚已经讲过了,就是被定位元素左上角到定位参照点的竖直距离。该值是一个合法的长度值,允许使用负值和百分比值。语法:top:[<长度>]初始值:视position属性而定适用于:所有元素向下兼容:否范例:同上

3.左边距属性left同2。语法:left:[<长度>]初始值:视position属性而定适用于:所有元素向下兼容:否范例:同上

4.元素宽度和高度属性在方框属性中已经讲解过了,不再赘述。

5.剪切属性clip定义了一个位于被剪切物件上的剪切形状(矩形),物件在该矩形区域内的部分被予以显示,而位于区域外的部分则被“剪掉”了,因此叫做剪切。语法:clip:[<shape>|auto]初始值:auto适用于:所有元素向下兼容:否范例:img{clip:rect(20px 50px 60px 20px)}

6.溢出属性overflow定义了一个元素的内部元素在超出该元素大小后的处理方式。可取的值包括:visible(可见)、hidden(隐藏)、scroll(滚动)和auto(自动)。语法:overflow:[visible|hidden|scroll|auto]初始值:auto适用于:所有元素向下兼容:否范例:p{width:400px;height:400px;overflow:hidden}其中visible(可见)是使元素适当扩展高度或者宽度以全部显示内部元素。hidden则对超出元素范围的内部元素隐藏掉,这跟剪切有点相似。scroll则总是提供滚动条,而不管内部元素是否超出范围。auto则是由浏览器决定何时提供滚动条。需要注意的是该属性必须与宽度和高度属性一起指定,以便判断是否溢出。

7.Z轴定位属性z-index定义了元素在Z轴(垂直于浏览器向外方向)上的顺序。当几个绝对定位元素产生重叠时,哪个元素应该在最上面,哪个在最下面成了网页制作者不得不考虑的问题。z-index属性正好解决该问题。其合法的值应是一个整数,数值大的位于上方。初始值为0,允许使用负值。
语法:z-index:[<整数>]初始值:0适用于:所有元素向下兼容:否
范例:img{position:absolute;z-index:-2}若不赋予元素z-index属性的值,浏览器会按元素出现的先后顺序决定元素在Z轴上的顺序,后出现的元素将处于上方。
语法:z-index:[<整数>]初始值:0适用于:所有元素向下兼容:否
范例:img{position:absolute;z-index:-2}8.可视属性visibility用于指定元素是否可见,可取的值包括inherit(继承)、visible(可见)、hidden(隐藏)。初始值为inherit(继承),使元素的可视属性根据上级元素来确定。
语法:visibility:[inherit|visible|hidden]初始值:inherit适用于:所有元素向下兼容:是
范例:img{visibility:hidden}注意若元素的可视属性为hidden,则该元素只是不显示出来而已,但仍然占据排版位置,也就是说元素所在的位置仍然存在,只不过是一片空白而已。而前面的display属性则相反,一旦display属性值为none,对应的元素就如同不存在一般。

样式表单位汇总

样式表的单位大致可以分为长度单位,百分比单位,颜色单位和统一资源管理(URLs)四大类。下面做介绍:

1.长度单位一个长度的值由可选的正号“+”或负号“-”、加上一个数字以及表明单位的两个字母组成。在一个长度的值之中是没有空格的,例如12 px就不是一个有效的长度单位,但12px是有效的。一个为0的长度不论使用什么单位都是一样的,因此不需要单位声明。长度单位可以分为相对单位和绝对单位,CSS都予以支持。相对值单位确定一个相对于另一长度属性的长度,因为它能更好的适应不同的媒体,所以在许多情况下是首选。以下是有效的相对单位:px(pixel,象素,相对于屏幕的分辨率)em(元素的字体高度)ex(字母“x”的高度)很多人不理解象素怎么是一个相对单位。其实象素是相对于屏幕的分辨率的,而屏幕的分辨率通常是可调的(注意此处的分辨率和显示器的分辨率如800×600是不同的概念)。若你的操作系统分辨率为72象素/英寸,则1px=1/72英寸,余类推。在日常使用中,mac操作系统中的分辨率为72dpi,windows的则为96dpi,当然若在显示属性中选用“大字体”则分辨率为120dpi。绝对单位视输出介质而定,所以在网页制作方面逊色于相对单位。以下是有效的相对单位:in(inch,英寸,1英寸=2.54厘米)cm(centimeter,厘米,不用多说了吧?)mm(millimeter,毫米)pt(point,点,1点=1/72英寸)pc(pica,帕,1帕=12点)在网页设计中,经常见到的单位是px和pt,许多人爱用pt做单位,这本是无可厚非的,因为在大部分电脑中9pt和11pt的文字都非常精美。可偏偏一些人没有弄清楚象素到底是绝对单位还是相对单位,就开始混用。于似乎一方面使用HTML标记的属性width和height(这些属性的值使用的单位就是象素),一方面用pt定义文字大小,在自己的电脑上测试完成后就放到网上去了。却不知一些朋友在自己的windows操作系统中选用了大字体,使屏幕的分辨率为120dpi,而1pt=1/72英寸,所以1pt=1.5px;而通常情况下屏幕分辨率为96dpi,此时1pt=1.2px。试想这样的情况下网页会是怎样的面目全非。我不是反对使用pt,也不是嘲笑那些没有搞明白这些区别的人,对于样式表学得不深的情况下是可以理解这种错误的。我在学习样式表之初也犯过这种错误,但一些大机构也出现这种错误就有点让人觉得不可思议了,我就见过一套书的配套光盘上的用做漫游的网页出现这种问题,在选用大字体的系统上根本无法使用。若在制作网页时,整个页面都使用样式表以pt做单位,不使用HTML的width和height属性当然不会出现问题。若你的页面仅仅是一些对布局要求不严格的页面,改变文字大小不会改变页面美观,在这种情况下使用pt也是不错的。但若你的页面布局严密就应该好好考虑了。

2.百分比单位一个百分比单位由可选的正号“+”或负号“-”加上数字和百分比号“%”组成,同样,在百分比值中是没有空格的。百分比值是相对于其他数值,同样地用于定义每个属性。最经常使用的百分比值是相对于元素的字体大小。

3.颜色单位颜色值是一个关键字或一个RGB格式的数字。windows的VGA(视频图象阵列)形成了16个关键字:aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,yellow。RGB颜色有如下四种形式:#rrggbb(如#00cc00)#rgb(如#0c0)rgb(x,x,x),x是一个介于0到255之间的整数。如rgb(0,204,0)rgb(y%,y%,y%),y是一个介于0到100之间的整数。如rgb(0%,80%,0%)上述例子指定的是同一种颜色。4.统一资源管理(URLs)一个URLs值的格式为:url(foo),foo是一个URL(统一资源定位,因特网的地址)。URLs可以选择用单引号或者双引号,并且在URLs之前或者之后可以包含空格。在URLs中的括弧、逗号、空格、单引号、双引号都必须避开反斜杠。不完整的URLs将被浏览器理解为样式表的源代码,而不是HTML源代码。

样式表实例
滚动条控制   
自从dhtml出现以来,微软对dhtml功能的加强就没有停止过,在微软最新的游览器internet explorer 5.5的的ie5.5增加了许多新的样式表内容,对滚动条的样式进行修改也是其中之一,下面我们简单地介绍一下涉及浏览器滚动条的样式表内容:
1.overflow内容溢出时的设置overflow-x水平方向内容溢出时的设置overflow-y垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。
2.scrollbar-3d-light-color立体滚动条亮边的颜色scrollbar-arrow-color上下按钮上三角箭头的颜色scrollbar-base-color滚动条的基本颜色scrollbar-dark-shadow-color立体滚动条强阴影的颜色scrollbar-face-color立体滚动条凸出部分的颜色scrollbar-highlight-color滚动条空白部分的颜色scrollbar-shadow-color立体滚动条阴影的颜色以上七个属性设置的值都是颜色值,可以使用样式表定义的各种表达方式。使用以上的样式定义内容,我们可以指定浏览器窗口、多行文本框的滚动条的显示与否和颜色样式,第一组样式属性用于设定被设定对象是否显示滚动条,第二组样式属性则用于设置滚动条的颜色,要注意的本文涉及的样式属性都是ie才能支持的,第二组的样式属性只有ie5.5版本才能支持,所以请大家在调试的时候注意。
我们通过几个实例来讲解上述的样式属性:
1.让浏览器窗口永远都不出现滚动条没有水平滚动条<body style="overflow-x:hidden">没有垂直滚动条<body style="overflow-y:hidden">没有滚动条<body style="overflow-x:hidden;overflow-y:hidden">或<body style="overflow:hidden">

2.设定多行文本框的滚动条没有水平滚动条<textarea style="overflow-x:hidden"></textarea>没有垂直滚动条<textarea style="overflow-y:hidden"></textarea>没有滚动条<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>或<textarea style="overflow:hidden"></textarea>3.设定窗口滚动条的颜色设置窗口滚动条的颜色为红色<body style="scrollbar-base-color:red">scrollbar-base-color设定的是基本色,一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。加上一点特别的效果:<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">4.设定其他元素时,基本上一样,你最好是在样式表文件中定义好一个类,这样你就可以重复使用了。.coolscrollbar {scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}将以上语句加入到样式表文件中或html头部的<style></style>当中,然后使用<textarea class="coolscrollbar"></textarea>快快行动,让你的主页马上酷起来。 
 


原创文章如转载,请注明:转载自常州SEO-网站推广优化-iitding
原文地址:http://www.dingseo.com.cn/post/13.html





发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。