HTML之设置背景、边框、边距和补白

背景颜色、背景图片、边框和边距,这些在网页设计中都是使用得比较多的修饰方法。合理地配置网页的前景色与背景色,再加以边款和边距的辅助,可以让网页看起来更漂亮。

背景颜色

背景通常指的是除了文本与边框之外的所有颜色。在CSS里可以使用background-color来设置背景颜色。background-color属性的语法如下:

以上代码的属性值所代表的含义如下: transparent:设置背景颜色透明,该值为默认值。 颜色:可以为命名颜色、RGB颜色或百分比颜色。 inherit:继承父级样式。

在HTML里的大多数元素都可以设置背景颜色,例如body、div、td等,transpatent属性用于设置背景透明,也可以理解为没有背景颜色。

背景图像

页面中的元素背景除了可以设置为特殊的颜色外,还可以使用图像进行设置。使用图像作为元素背景,除了需要设置图像的源文件,同时还需要设置其他的一些属性。

设置背景图像 在HTML中设置网页背景图片的方式为,CSS中设置背景图片的属性为background-image,该属性不但可以设置网页背景图片,还可以设置表格、单元格、按钮等元素的背景图片。

以上代码的属性值所代表的的含义如下: none:无背景图片,该值也是默认值。 url(uri):图片的uri地址,可以是绝对或相对地址。

设置固定背景图像 通常在网页上设置了背景图片之后,背景图片都会平铺在网页的下方,当网页内容比较多时,在拖动滚动条时,网页的背景会跟着网页的内容一起滚动。在CSS里使用background-attachment属性可以将背景图片固定在浏览器上,此时如果拖动滚动条,背景图片不会随着网页内容滚动而滚动,看起来好像文字是浮动在图片上似的。background-attachment属性的语法代码如下:

以上代码的属性是所代表的含义为: scroll:背景图片随着内容滚动。该值为默认值。 fixed:背景图片固定,不随着内容滚动。 inherit:继承父级样式。

设置背景图像平铺方式 在HTML里,如果背景图片大小小于浏览器窗口大小,浏览器会自动将背景图片平铺以充满整个浏览器窗口。不过在很多情况下,这种方式并不是最好的背景图片展现方式。CSS中可以通过background-repeat属性来设置背景图片的平铺方式,background-repeat属性的语法代码如下: background-repeat : repeat | no-repeat | repeat-x | repeat-y | inherit 以下代码的属性值所代表的含义如下: repeat:平铺背景图片,该值为默认值 no-repent:不平铺背景图片。 repeat-x:背景图片在水平方向平铺。 repeat-y:背景图片在垂直方向平铺。 inherit:继承父级样式。

背景图像定位 默认情况下,背景图像都是从元素的左上角开始显示的,使用background-position属性可以更改背景图像的开始显示位置,其语法是:

在这里,设置图像位置的属性值可以有多种形式,可以是X、Y轴反向的百分比或绝对值,也可以使用表示位置的英文名称。具体取值及其含义如下:

在这些设置方式中,百分比和绝对数值可以混用,即前面是百分比,后面可以是数值;同样前面是数值,后面也可以是百分比。 注意:无论使用哪一种设置方式,都应该包含水平方向和垂直方向两个位置,之间用空格分开。

边款

表格的边款很容易理解,其实在HTML里,很多对象都是有边款的,如div、input等。在HTML里,这些元素的边框都是很呆板的,甚至有些元素还显示不了边款,有了CSS之后,网页开发者就可以很轻松地设置边款的样式了,如边款的粗细、颜色等。

设置边款样式 边款的样式在边款的几个属性里可以说是最重要的,边款样式除了可以改变HTML里呆板的边款样式之外,在某些时候甚至还可以控制边款是否显示。在CSS中设置边款样式的属性为border-style,该属性的语法代码为: border-style :边款的样式值 在这里可以为边框设置多种线条效果,也就是边款的样式值,例如实线、点线、短线等,具体的取值及效果如下:

注意:由于边款和元素以及页面其他属性结合在一起的时候,才能真正展现其风格。表格中给出的效果可能并不能很好的体现出来,读者可以在实例中应用不同的值来体会其风格。其中,groove、ridge、inset、outset和边框颜色结合设置能达到更好的效果。 设置不同的边款样式

使用border-style属性也可以为对象四个边款设置不同的样式,其设置方法与border-widht属性类似。可以直接使用border-style属性设置4个边框的风格,它们对应的边框顺序依次是上边框、右边框、下边框和左边框。如果这里只设置了1个边框风格,则会对4个边框同时起作用;如果设置了两个,则第1个值应用于上下边框,第2个值应用于左右边框;如果设置3个,第1个用于上边框,第2个用于左右边框,第3个用于下边框。

设置边框宽度 在HTML里的table元素可以使用border属性来设置边框的宽度,在CSS里可以使用border-widht属性来设置边框宽度,但是border-widht属性不仅仅可以设置表格的边框宽度,还可以设置任何一个有边框的对象的边框宽度。border-widht属性的语法代码如下所示。

以上代码的属性值所代表的含义如下: edium:默认宽度,该值为默认值。 thin:比默认宽度小。 thick:比默认宽度大。 数值:以绝对单位数值或相对单位数值来指定边框的宽度。

设置不同的边框宽度 使用border-widht 属性不仅仅可以设置整个边款宽度,还可以设置单个边框的宽度。用法和设置边框样式一样,如果这里只设置了1个边框宽度,则会对4个边框同时起作用;如果设置了2个边框宽度,则第1个值应用于上下边框,第2个值应用于左右边框;如果提供3个边框宽度,第一个用于上边框,第2个用于左右边框,第3个用于下边框。

设置边框颜色 在HTML里没有办法为表格设置边框颜色,而CSS中的border-color属性可以做到,并且在border-color 属性中不仅仅可以为表格设置边框颜色,还可以为几乎所有的块对象都加上边框颜色,如p、div等元素。border-color属性的语法代码如下:

以上代码的属性值所代表的含义如下: 颜色:边框的颜色,可以是颜色英文名、RGB表示法和百分数表示法。 transparent : 透明颜色,即不设置颜色。

设置不同的边框颜色 使用border-color属性不仅仅可以统一设置4个边框的颜色,还可以设置单个边框的颜色,其设置方法与border-width属性和border-style属性类似。

综合设置边框效果 在CSS中,还可以使用border属性直接设置边款的整体效果,其设置语法是:

在这里,可以只设置其中的一项或几项,但如果要正常显示设置的边框效果,需要设置边款的样式,即使是采用默认的solid。

border属性一般用于设置统一的边框风格,即使用该属性设置边框后,元素的4个边框都采用该效果。即使设置了多个宽度值,也只取最后一个值。如果要为元素的4个边框单独设置不同的效果,还是要分别进行设置。

边距 边距和补白都是为了控制页面的松紧程度而提供的属性。边距一般都是设置元素周围的边界宽度。这个宽度可以明显地区分不同的元素,也许让网页中的内容没有那么拥挤。

设置上边距 在CSS中可以分别为一个元素设置其各个方向的边界宽度。上边距就是指元素与它上面的元素之间的距离,采用的是margin-top属性,其设置语法是:

这里的距离值可以是百分比,也可以是由数值和单位组成的确定的距离。如果只给出一个数值,则默认其单位是像素。百分比是以该元素的上一级元素为基础进行设置的。

设置下边距 下边距与上边距相对,是指元素距离下方元素的边距值,其语法是: margin'-bottom:距离值 这里的距离值同样可以是百分比或具体的数值加单位。如果只给出一个数值,则会认为其单位是像素。

设置左边距 左边距就是元素距离左侧其他元素的距离,其语法是:

这里的距离值可以百分比,也可以使用数值加单位来设置。如果仅给出一个数值,其单位默认为像素。

设置右边距 右边距就是元素距离右侧其他元素的距离,其语法是:

这里的距离值可以是百分比,也可以是具体的数值。当设置为具体数值的时候可以同时设置其单位如果不设置单位,则默认为像素。

综合设置边距 如果要同时设置某个元素的4个边距,除了可以分别进行设置外,还可以使用复合属性margin来进行,其语法是: margin:各个边距的值 在这里可以设置1~4个边距值,设置为1个值,则同时作用于元素的4个方向;如果设置2个值,则分别作用于上下和左边边距;如果设置3个值,则分别作用于上边距、左右边距和下边距;设置4个值则按照上、右、下、左的顺序起作用。

补白 补白则是用于设置元素的边框和内容之间的距离,是设置元素自身松紧度的属性。

设置顶端补白 顶端补白就是指元素的内容与其上边框的距离,一般常用来设置页面补白,其语法是: padding-top:距离值 这里,距离值一般采用数值,可以为其添加单位。如果没有设置单位,默认以像素为单位。

设置底部补白 底部补白就是设置页面元素距离下边框的距离,其语法是:

这里,距离值一般采用数值加单位的形式,如果省略单位则默认为是以像素为单位。

设置左侧补白 左侧补白是指设置页面中元素与左侧边界之间的间隔,其语法是: padding-left:距离值 一般采用数值加单位的方式设置距离,如果省略单位,则默认为是以像素为单位。

设置右侧补白 右侧补白是指设置页面中元素与右侧边界之间的间隔,其语法是: padding-right:距离值 一般采用数值加单位的方式设置距离,如果省略单位,则认为是以像素为单位。

综合设置补白 如果要同时设置某个元素的4个补白,除了可以分别进行设置外,还可以使用复合属性padding来进行设置,其语法是:

在这里可以设置1~4个补白值,设置为1个值,则同时作用于4个方向;如果设置2个值,则分别作用于上下和左右方向;如果设置3个值,则分别作用于顶端补白、左右补白和底部补白;设置4个值则按照上、右、下、左的顺序起作用。