第22章 设置对象边框.pptVIP

第22章 设置对象边框(初级) 现在网页布局都喜欢用DIV和CSS结合，而通过DIV可以设置容器层的边框，使层对象的大小直观地表现出来，现在的网页都是用边框把内容包围起来，使页面更美观，更有模块感。 细心的读者会发现，边框在前面章节中的实例中已用到了，不过前面用到的是边框的复合属性border，本章中除了介绍复合属性外，还会介绍边框的其他单属性。 学完本章，可以了解以下知识点： 边框的基本语法 边框颜色表示 边框样式表示 边框宽度表示 边框的四边设置 边框的应用 22.1 边框的基本语法 边框是对象的边界框图，用来设置对象的边框样式，语法用border表示，是复合属性，由颜色，样式和宽度组成，其语法完整表示如下： border : border-width || border-style || border-color 从以往学习的复合属性可以知道，没有声明是哪个方位条件下，都代表着上右下左的方位的，边框属性也不例外，即border表示的是四边的边框，参数border-width表示边框的宽度，border-style表示边框用什么样式表达（22.3节介绍），border-color表示边框的颜色。边框属性的参数默认值为medium none，参数medium指border-width的值，参数none指border-style的值，参数border-color 的默认值将采用文本颜色，所以在默认条件下，对象是没有边框的，代码22.1表示有border属性设置的层对象和没有border属性（即默认的）的层对象比较。 22.2 边框颜色 通过上一节对border属性的介绍，对其参数也有所了解，本节就对参数之一边框颜色做讲解，从前面介绍可以知道，边框颜色由border-color表示，后面接颜色值，表示设置边框的颜色，完整代码如下： border-color : color 从前面表示颜色的属性可以知道，color的表示是不同的方式，在此不打算再做介绍。但要注意的是，颜色值可以接多个，在前面实例中都只有一种颜色，表示四边框的颜色，如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框；如果只提供一个，将用于全部的四条边；如果提供两个，第一个用于上－下，第二个用于左－右；如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。 22.3 边框样式 边框样式用来表示对象边框不同的效果，不同的对象包括层，图像等，可以设置其各式各样的效果，如常用的实线，还可以设置为虚线，点线等。设置边框的样式用border-style表示，其后所接的值为边框的不同样式，即多个参数中可选择一个来表示对象的边框样式，稍后讲解。 与边框颜色一样，边框样式也是边框属性的参数之一，由本章第1节可知，边框复合属性由边框颜色、边框样式和边框宽度组成，而本小节讲解的是边框样式，组成边框复合属性的重要属性，用来表示对象的边框样式，参数只是其中的一个值，下面代码表示边框样式属性的完整语法： border-style : none | dotted | dashed | solid | double | groove | ridge | inset | outset 22.4 边框宽度 前面几节中介绍了边框复合属性的语法以及其组成的属性，前面的小节，介绍了边框复合属性中的两个属性：边框颜色和边框样式。其中边框颜色用border-color表示，而边框样式用border-style表示，本小节来介绍border复合属性的最后一个属性用法，即边框宽度。 边框宽度语法用border-width表示，用来设置对象边框中的宽度值，边框宽度的属性值有两种表示方法，最常用的为直接接数值，然后接上单位，而第二种方法为接表示宽度的词，通过三个单词来表示边框为宽、中等宽和窄，与其他属性设置属性一样，只能在两种表示方法中选择一个值，下面是完整的语法形式。 border-width : medium | thin | thick | length 参数medium：默认值，表示默认宽度。 参数thin：表示小于默认宽度。 参数thick：表示大于默认宽度。 参数length：直接表示边框宽度的值。 22.5 对象的四个边框 从前面中可以学到，边框（border）是复合属性，这个复合属性由边框颜色、边框样式和边框宽度组成的，所表示的边框为顶端、右端、底端和左端的边框值，而且是同一个效果的值。 边框属性是复合属性，是由上端、右端、下端和左端边框属性组成的复合属性，也可以单独表示的某一方向的边框，如只设置对象顶端的边框，以区分其他的边框。为了实现边框在不同方向设置边框属性，需要对不同边框方面的属性进行设置。 在网页中表示的边框都是矩形的，即有上下左右的边框围成对象，在本书中也称之为