第十二章CSS设置表格与表单

1、第十一章，第十二章 属属 性性说说 明明a:link超链接的普通样式，即正常浏览状态的样式超链接的普通样式，即正常浏览状态的样式a:visited被点击过的超链接的样式被点击过的超链接的样式a:hover鼠标指针经过超链接时的样式鼠标指针经过超链接时的样式a:active在超链接上点击时，即在超链接上点击时，即“当前激活当前激活”时超链时超链接的样式接的样式q 例：11-1.htmlq 例：11-2.html表表11.1可制作动态效果的可制作动态效果的CSS伪类别属性伪类别属性11.2 11.2 控制鼠标指针控制鼠标指针表表11.2 cursor定制的鼠标指针效果定制的鼠标指针效果11.3 列

2、表的样式qlist-style-type 列表的符号qlist-style-image 将项目符号显示成图片qlist-style-position 调整列表位置list-style-type 列表的符号list-style-image 将项目符号显示成图片qlist-style-image:url(图片)q例：11-3.htmllist-style-position 调整列表位置qlist-style-position:outside|inside outside表示列表符号不向内缩进，是列表的默认属性值。 inside表示列表符号向内缩进。q例：例：20-1-3.html11.4 创建简单

3、的导航菜单图图11.11 无需表格的菜单无需表格的菜单例：例：11-4.html 11.4.2 横竖自由转换菜单 图图11.16 水平菜单水平菜单 例：例：11-5.html 11.5 应用滑动门技术的玻璃效果菜单图图11.18 玻璃效果的菜单玻璃效果的菜单例：例：11-6.html 首先是菜单的XHTML代码： 菜单一 菜单二 子菜单一 子菜单二 子菜单三 菜单三 菜单四 子菜单一 子菜单二 子菜单三 菜单五设置列表，变成横向：ul margin: 0px; padding: 0px; ul li float: left; font: 0.9em Arial, Helvetica, sans

4、-serif; height: 30px; width: 100px; list-style: none; 美化菜单：ul li a color: #FFF; text-decoration: none; line-height: 29px; width: 100px; margin: 0px; padding: 0px 0px 0px 8px; display: block; border-right: solid 1px #ccc; border-bottom:solid 1px #ccc; background: #808080; 让子菜单和一级菜单有区别：ul li ul li hei

5、ght:25px; ul li ul li a background: #666; line-height:24px;q鼠标滑过某个菜单项的时候，要让它跟其它项目有所区别：ul li a:hover background: #666; q让子菜单隐藏：ul li ul visibility: hidden; q让鼠标滑过有下拉项的时候，显示下拉菜单：ul li:hover ul visibility: visible; q可以进一步修饰这个菜单，比如应该让子菜单中的项目在鼠标滑过的时候也变色：ul li ul li a:hover background: #333; qIe6不支持纯css编写

6、的下拉菜单。qbehavior: url(csshover3.htc); 2112.1 表格设置 属 性CSS名称说说 明明边框属性(用于表单元素) border-style边框样式border-width边框宽度 border-color边框颜色 border综合在CSS中，为了设置边框的外观，提供了边框样式属性。利用边框样式属性不仅可以设置单个边框的样式，而且还可以利用复合边框样式属性border-style统一设置四条边框的样式。基本语法 border-style:样式取值 border-top-style:样式取值 border-bottom-style:样式取值 border-lef

7、t-style:样式取值 border-right-style:样式取值border-style边框样式属性取值说明边框样式属性取值说明样式的取值样式的取值说明说明none不显示边框，为默认值dotted点线dashed虚线，也可成为短线solid实线double双直线groove凹形线ridge凸形线inset嵌入式outset嵌出式q边框样式属性中border-style是一个复合属性，其他4个都是单个边框的样式属性，只能取一个值，而复合属性border-style可以同时取1到4个值分别说明分别说明border-styleborder-style属性的四个取值属性的四个取值方法：方法：q

8、取一个值：四条边框均使用这一个值。q取两个值：上下边框使用第一个值，左右边框使用第二个值，两个值一定要用空格隔开。q取三个值：上边框使用第一个值，左右边框使用第二个值，下边框使用第三个值，取值之间要用空格隔开。q取四个值：四条边框按照上、右、下、左的顺序来调用取值。取值之间也要用空格隔开。例：15-1-1.html，15-1-2.html调整边框宽度调整边框宽度q在CSS中，利用边框宽度属性来控制边框的宽度，一共可用的有五个属性,分别是: 上边框宽度属性border-top-width, 下边框宽度属性border-bottom-width, 左边框宽度属性border-left-width,

9、 右边框宽度属性border-right-width 边框宽度属性border-width.其中边框宽度属性border-width是一个复合属性，可以用来统一设置四条边的宽度。基本语法基本语法qBorder-width:关键字、长度qBorder-top-width:关键字、长度qBorder-bottom-width:关键字、长度qBorder-right-width:关键字、长度qBorder-left-width:关键字、长度语法说明语法说明q边框宽度属性基本语法中的关键字说明见表：关键字关键字说明说明thin细边框medium中等边框，是默认值thick粗边框语法说明语法说明q长度包

10、括长度值和长度单位，不可以使用负数。长度单位可以使用绝对单位也可以使用相对单位。q基本语法中边框宽度属性border-width是一个复合属性，可以同时设置四条边框的宽度。q例：15-2-1.html15.3 15.3 设置边框颜色设置边框颜色q设置边框的颜色，同样可以选择设置单条边框的颜色，或是统一设置四条边框的颜色。所以可以选用的边框颜色属性也有五个：上边框颜色属性border-top-color；下边框颜色属性border-bottom-color；左边框颜色属性border-left-color；右边框颜色属性border-right-color；边框颜色属性border-color.

11、其中边框颜色属性border-color是一个复合属性。语法说明语法说明q在使用边框颜色复合属性border-color时：q如果只设置一种颜色，则四条边框的颜色一样；q设置两种颜色，则边框的上下为一个颜色，左右为另一个颜色；q设置三种颜色，边框的颜色顺序为上、左右、下；q设置四种颜色，边框的颜色顺序为上、右、下、左。q例：15-3-1.html32CSSCSS边框属性边框属性q 边框属性(border) q 这个属性是边框属性的一个快捷的综合写法，它包含border-width, border -style和border-color。q .d1 border:5px solid gray;

12、q 例：15-4-1.html33/50q在CSS中，我们还可以设置方框样式属性。利用方框框样式属性可以设置如下一些属性：q基本语法margin:边界：用来设置设置一个元素在四个方向上与浏览器窗口边界或上一级元素的边界距离；padding:填充：用来控制边框和其内部元素之间的空白距离;CSS的方框属性34CSSCSS边距属性边距属性q 边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。q 左边距属性(margin-left) q 这个属性用来设定左边距的宽度。示例如下： q .d1margin-left :1cm q 右边距属性 (margin-right ) q 这个属性用

13、来设定右边距的宽度。示例如下：q .d1 margin-right:1cm 35CSSCSS边距属性边距属性q 上边距属性(margin-top) q 这个属性用来设定上边距的宽度。示例如下：q .d1 margin-top:1cm q 下边距属性 (margin-bottom) q 这个属性用来设定下边距的宽度。示例如下：q .d1margin-bottom:1cm q 边距属性(margin) q 这个属性是设定边距宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右边距属性。 36CSSCSS边距属性边距属性q 你可以为上下左右边距设置相同的宽度 。示例入下：q .d1 margin

14、:1cm q 你也可以分别设置边距，顺序 是上，右，下，左。示例如下： q .d1 margin:1cm 2cm 3cm 4cmq 上面的代码表示 ，上边距为1cm，右边距为2cm，下边距为3cm，左边距为4cm。 q 例：15-5-1.html37CSSCSS间隙属性间隙属性q 间隙属性(padding)是用来设置元素内容到元素边界的距离。 q 左间隙属性(padding-left ) q 这个属性用来设定左间隙的宽度 。示例如下：q .d1padding -left:1cm q 右间隙属性(padding-right ) q 这个属性用来设定右间隙的宽度。示例如下： q .d1 paddi

15、ng-right:1cm 38CSSCSS间隙属性间隙属性q 上间隙属性(padding-top) q 这个属性用来设定上间隙的宽度。示例如下：q .d1 padding-top:1cm q 下间隙属性(margin-bottom ) q 这个属性用来设定下间隙的宽度。示例如下：q .d1padding-bottom:1cm q 间隙属性(padding ) q 这个属性是设定间隙宽度的一个快捷的综合写法 ，用这个属性可以同时设定上下左右间隙属性。 39CSSCSS间隙属性间隙属性q 你可以为上下左右间隙设置相同的宽度。示例入下 ：q .d1 padding:1cm q 你也可以分别设置间隙，

16、顺序是上，右，下，左。示例如下： q .d1 padding:1cm 2cm 3cm 4cmq 上面的代码表示，上间隙为1cm，右间隙为2cm，下间隙为3cm，左间隙为4cm。 q 例15-6-1.htmlq 例15-7-1.htmlqborder-collapse:collapse;qtable-layout:fixed;q书例：12-7.htmlq书例：12-8.htmlq书例：12-12.htmlq书例：18-10.htmlCSS层层q设置层空间设置层空间z-indexq 设置层裁切设置层裁切clipq设置层大小设置层大小度来度来width、heightq 设置层溢出设置层溢出overf

17、low5 设置层可见设置层可见visibility设置层空间设置层空间z-indexq基本语法基本语法qz-index:auto|数字数字设置层空间设置层空间z-indexq语法说明 auto表示子层会按照父层的属性显示。数字必须是无单位的整数或负数，但一般情况下都取正整数，所以z-index属性值为1的层位于最下层。例：12-3-1.html设置层裁切设置层裁切clipq基本语法qclip:rect| |auto设置层裁切设置层裁切clipq语法说明 auto表示不裁切。 rect的4个坐标值表示所裁切矩形的4个顶点位置，其中以网页左上角为坐标（0，0），而上、右、下、左这4个坐标值则是以左

18、上角为参照点计算的。而且任意一个坐标值都可由auto来代替，表示该边不裁切。例：20-3-2.html设置层大小设置层大小度来度来width、heightq基本语法qwidth:auto|长度长度 qheight:auto|长度长度设置层大小设置层大小度来度来width、heightq语法说明q width表示的是宽度，而height表示的是高度。q auto表示自动设置长度。q 长度包括长度值和单位。q 长度也可使用相对值中的百分比。例：20-3-3.html设置层大小设置层大小度来度来width、heightq注意q对于每个层在设置层大小时，其中只能设置宽度和高度中的一个值，另一个值则自动获得。如果两个值都设置了，则还要同时设置层溢出属性overflow。设置层溢出设置层溢出overflowq基本语法qoverflow: visible/hidden/scroll/auto设置层溢出设置层溢出overflowq语法说明 visible