背景颜色、背景图片、边框和边距,这些在网页设计中都是使用得比较多的修饰方法。合理地配置网页的前景色与背景色,再加以边款和边距的辅助,可以让网页看起来更漂亮。
背景颜色
背景通常指的是除了文本与边框之外的所有颜色。在CSS里可以使用background-color来设置背景颜色。background-color属性的语法如下:
background-color : transparent | 颜色 | inherit
以上代码的属性值所代表的含义如下:
transparent:设置背景颜色透明,该值为默认值。
颜色:可以为命名颜色、RGB颜色或百分比颜色。
inherit:继承父级样式。
在HTML里的大多数元素都可以设置背景颜色,例如body、div、td等,transpatent属性用于设置背景透明,也可以理解为没有背景颜色。
背景图像
页面中的元素背景除了可以设置为特殊的颜色外,还可以使用图像进行设置。使用图像作为元素背景,除了需要设置图像的源文件,同时还需要设置其他的一些属性。
设置背景图像
在HTML中设置网页背景图片的方式为<body background=“图片URL”>,CSS中设置背景图片的属性为background-image,该属性不但可以设置网页背景图片,还可以设置表格、单元格、按钮等元素的背景图片。
background-image属性的语法代码如下:background-image : none | url(uri) | inherit
以上代码的属性值所代表的的含义如下:
none:无背景图片,该值也是默认值。
url(uri):图片的uri地址,可以是绝对或相对地址。
设置固定背景图像
通常在网页上设置了背景图片之后,背景图片都会平铺在网页的下方,当网页内容比较多时,在拖动滚动条时,网页的背景会跟着网页的内容一起滚动。在CSS里使用background-attachment属性可以将背景图片固定在浏览器上,此时如果拖动滚动条,背景图片不会随着网页内容滚动而滚动,看起来好像文字是浮动在图片上似的。background-attachment属性的语法代码如下:
background-attachment : scroll | fixed | inherit
以上代码的属性是所代表的含义为:
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属性可以更改背景图像的开始显示位置,其语法是:
background-position:位置的具体值
在这里,设置图像位置的属性值可以有多种形式,可以是X、Y轴反向的百分比或绝对值,也可以使用表示位置的英文名称。具体取值及其含义如下:
取值方式具体含义百分比(x%y%)起始位置与左上角的距离占整个元素的比例,包含水平方向和垂直方向。例如设置页面的背景图像,则会以整个页面的大小为依据。绝对数值(x,y)起始位置的绝对坐标,包含横坐标和纵坐标。这是以左上角为端点的,在使用这种格式的时候需要同时设置长度单位top使图像在垂直方向上居于顶端bottom使图像在垂直方向上居于底部left使图像在水平方向上居于左端right使图像在水平方向上居于右端center图像在中部显示,它可以设置为水平方向,也可以设置为垂直方向
在这些设置方式中,百分比和绝对数值可以混用,即前面是百分比,后面可以是数值;同样前面是数值,后面也可以是百分比。
注意:无论使用哪一种设置方式,都应该包含水平方向和垂直方向两个位置,之间用空格分开。
边款
表格的边款很容易理解,其实在HTML里,很多对象都是有边款的,如div、input等。在HTML里,这些元素的边框都是很呆板的,甚至有些元素还显示不了边款,有了CSS之后,网页开发者就可以很轻松地设置边款的样式了,如边款的粗细、颜色等。
设置边款样式
边款的样式在边款的几个属性里可以说是最重要的,边款样式除了可以改变HTML里呆板的边款样式之外,在某些时候甚至还可以控制边款是否显示。在CSS中设置边款样式的属性为border-style,该属性的语法代码为:
border-style :边款的样式值在这里可以为边框设置多种线条效果,也就是边款的样式值,例如实线、点线、短线等,具体的取值及效果如下:
风格属性值具体的含义线条的效果none无边框solid实线的效果________dotted点线效果,即边框由点组成.........dashed短线效果,即边框由多个短线组成_ _ _ _ _double双实线效果=========groove带立体效果的沟槽效果无法打印出来ridge突出的脊形效果效果无法打印出来inset内嵌一个立体的边框效果无法打印出来outset外嵌一个立体的边款效果无法打印出来
注意:由于边款和元素以及页面其他属性结合在一起的时候,才能真正展现其风格。表格中给出的效果可能并不能很好的体现出来,读者可以在实例中应用不同的值来体会其风格。其中,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属性的语法代码如下所示。
border-width : medunm | thin | thick | 数值
以上代码的属性值所代表的含义如下:
edium:默认宽度,该值为默认值。
thin:比默认宽度小。
thick:比默认宽度大。
数值:以绝对单位数值或相对单位数值来指定边框的宽度。
设置不同的边框宽度
使用border-widht 属性不仅仅可以设置整个边款宽度,还可以设置单个边框的宽度。用法和设置边框样式一样,如果这里只设置了1个边框宽度,则会对4个边框同时起作用;如果设置了2个边框宽度,则第1个值应用于上下边框,第2个值应用于左右边框;如果提供3个边框宽度,第一个用于上边框,第2个用于左右边框,第3个用于下边框。
设置边框颜色
在HTML里没有办法为表格设置边框颜色,而CSS中的border-color属性可以做到,并且在border-color 属性中不仅仅可以为表格设置边框颜色,还可以为几乎所有的块对象都加上边框颜色,如p、div等元素。border-color属性的语法代码如下:
border-color : 颜色 | transparent
以上代码的属性值所代表的含义如下:
颜色:边框的颜色,可以是颜色英文名、RGB表示法和百分数表示法。
transparent : 透明颜色,即不设置颜色。
设置不同的边框颜色
使用border-color属性不仅仅可以统一设置4个边框的颜色,还可以设置单个边框的颜色,其设置方法与border-width属性和border-style属性类似。
综合设置边框效果
在CSS中,还可以使用border属性直接设置边款的整体效果,其设置语法是:
border:边框宽度 边款样式 边框颜色
在这里,可以只设置其中的一项或几项,但如果要正常显示设置的边框效果,需要设置边款的样式,即使是采用默认的solid。
border属性一般用于设置统一的边框风格,即使用该属性设置边框后,元素的4个边框都采用该效果。即使设置了多个宽度值,也只取最后一个值。如果要为元素的4个边框单独设置不同的效果,还是要分别进行设置。
边距
边距和补白都是为了控制页面的松紧程度而提供的属性。边距一般都是设置元素周围的边界宽度。这个宽度可以明显地区分不同的元素,也许让网页中的内容没有那么拥挤。
设置上边距
在CSS中可以分别为一个元素设置其各个方向的边界宽度。上边距就是指元素与它上面的元素之间的距离,采用的是margin-top属性,其设置语法是:
margin-top:距离值
这里的距离值可以是百分比,也可以是由数值和单位组成的确定的距离。如果只给出一个数值,则默认其单位是像素。百分比是以该元素的上一级元素为基础进行设置的。
设置下边距
下边距与上边距相对,是指元素距离下方元素的边距值,其语法是:
margin'-bottom:距离值这里的距离值同样可以是百分比或具体的数值加单位。如果只给出一个数值,则会认为其单位是像素。
设置左边距
左边距就是元素距离左侧其他元素的距离,其语法是:
margin-left:距离值
这里的距离值可以百分比,也可以使用数值加单位来设置。如果仅给出一个数值,其单位默认为像素。
设置右边距
右边距就是元素距离右侧其他元素的距离,其语法是:
margin-right:距离值
这里的距离值可以是百分比,也可以是具体的数值。当设置为具体数值的时候可以同时设置其单位如果不设置单位,则默认为像素。
综合设置边距
如果要同时设置某个元素的4个边距,除了可以分别进行设置外,还可以使用复合属性margin来进行,其语法是:
margin:各个边距的值在这里可以设置1~4个边距值,设置为1个值,则同时作用于元素的4个方向;如果设置2个值,则分别作用于上下和左边边距;如果设置3个值,则分别作用于上边距、左右边距和下边距;设置4个值则按照上、右、下、左的顺序起作用。
补白
补白则是用于设置元素的边框和内容之间的距离,是设置元素自身松紧度的属性。
设置顶端补白
顶端补白就是指元素的内容与其上边框的距离,一般常用来设置页面补白,其语法是:
padding-top:距离值这里,距离值一般采用数值,可以为其添加单位。如果没有设置单位,默认以像素为单位。
设置底部补白
底部补白就是设置页面元素距离下边框的距离,其语法是:
padding-bottom:距离值
这里,距离值一般采用数值加单位的形式,如果省略单位则默认为是以像素为单位。
设置左侧补白
左侧补白是指设置页面中元素与左侧边界之间的间隔,其语法是:
padding-left:距离值一般采用数值加单位的方式设置距离,如果省略单位,则默认为是以像素为单位。
设置右侧补白
右侧补白是指设置页面中元素与右侧边界之间的间隔,其语法是:
padding-right:距离值一般采用数值加单位的方式设置距离,如果省略单位,则认为是以像素为单位。
综合设置补白
如果要同时设置某个元素的4个补白,除了可以分别进行设置外,还可以使用复合属性padding来进行设置,其语法是:
padding:各个方向的补白
在这里可以设置1~4个补白值,设置为1个值,则同时作用于4个方向;如果设置2个值,则分别作用于上下和左右方向;如果设置3个值,则分别作用于顶端补白、左右补白和底部补白;设置4个值则按照上、右、下、左的顺序起作用。
