20 CSS样式的高级应用

null20 CSS样式的高级应用20 CSS样式的高级应用20.1 列 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 20.2 定位 20.3 CSS层 20.4 鼠标指针——cursor 20.5 小实例——综合设置层样式 20.6 习题 20.1 列表20.1 列表20.1.1 设计列表样式——list-style-type 20.1.2 添加列表图像——list-style-image 20.1.3 调整列表位置——list-style-position 20.1.1 设计列表样式——list-style-type20.1.1 设计列表样式——list-style-type基本语法 list-style-type:<属性值> 20.1.1 设计列表样式——list-style-type20.1.1 设计列表样式——list-style-type语法说明 20.1.1 设计列表样式——list-style-type20.1.1 设计列表样式——list-style-type实例代码20.1.1 设计列表样式——list-style-type20.1.1 设计列表样式——list-style-type接上页20.1.1 设计列表样式——list-style-type20.1.1 设计列表样式——list-style-type网页效果20.1.2 添加列表图像——list-style-image20.1.2 添加列表图像——list-style-image基本语法list-style-image:none|URL20.1.2 添加列表图像——list-style-image20.1.2 添加列表图像——list-style-image语法说明 none表示不使用图像符号。  URL指定图像的名称或者路径。20.1.2 添加列表图像——list-style-image20.1.2 添加列表图像——list-style-image实例代码20.1.2 添加列表图像——list-style-image20.1.2 添加列表图像——list-style-image接上页20.1.2 添加列表图像——list-style-image20.1.2 添加列表图像——list-style-image网页效果20.1.3 调整列表位置——list-style-position20.1.3 调整列表位置——list-style-position基本语法list-style-position:outside|inside 20.1.3 调整列表位置——list-style-position20.1.3 调整列表位置——list-style-position语法说明 outside表示列表符号不向内缩进，是列表的默认属性值。  inside表示列表符号向内缩进。 20.1.3 调整列表位置——list-style-position20.1.3 调整列表位置——list-style-position实例代码20.1.3 调整列表位置——list-style-position20.1.3 调整列表位置——list-style-position接上页20.1.3 调整列表位置——list-style-position20.1.3 调整列表位置——list-style-position网页效果20.1.3 调整列表位置——list-style-position20.1.3 调整列表位置——list-style-position效果说明从图20-3的网页效果可以看出，第一段文字的列表符号和文字是对齐排列的，也就是说列表符号是向内缩进的。而第二段文字的列表符号是在文字外排列的，也就是说列表符号是没有向内缩进的。 20.2 定位20.2 定位20.2.1 定位方式——position 20.2.2 设置位置——top、bottom、right、left 20.2.3 浮动——float 20.2.4 清除——clear 20.2.1 定位方式——position20.2.1 定位方式——position基本语法position:static|absolute|relative 20.2.1 定位方式——position20.2.1 定位方式——position语法说明 static表示为静态定位，是默认设置。  absolute表示绝对定位，与下一节的位置属性top、bottom、right、left等结合使用可实现对元素的绝对定位。  relative表示相对定位，对象不可层叠，但也要依据top、bottom、right、left等属性来设置元素的具体偏移位置。20.2.1 定位方式——position20.2.1 定位方式——position实例代码20.2.1 定位方式——position20.2.1 定位方式——position接上页20.2.1 定位方式——position20.2.1 定位方式——position网页效果20.2.1 定位方式——position20.2.1 定位方式——position效果说明在图20-4的源代码基础上，只要把类样式d1和d2中定位方式语句由position:absolute改为position:relative，就变成了图20-5。但从两图的效果来看，差距是很大的，这主要是因为两个定位方式所参照的 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 不一样，绝对定位是以网页的左上角为参照点，而相对定位是以其相近的元素为参照点。 20.2.2 设置位置——top、bottom、right、left20.2.2 设置位置——top、bottom、right、left 基本语法top:auto|长度值|百分比 bottom: auto|长度值|百分比 left: auto|长度值|百分比 right: auto|长度值|百分比 20.2.2 设置位置——top、bottom、right、left20.2.2 设置位置——top、bottom、right、left 实例代码20.2.2 设置位置——top、bottom、right、left20.2.2 设置位置——top、bottom、right、left 接上页20.2.2 设置位置——top、bottom、right、left20.2.2 设置位置——top、bottom、right、left 网页效果20.2.2 设置位置——top、bottom、right、left20.2.2 设置位置——top、bottom、right、left 效果说明因为类样式d1和d2所定义的位置距网页上端的距离都为70像素，而距网页左边的距离一个为20像素，一个为200像素，所以在两个层引用这两个样式后，层内容分别放到了图像的两边。 20.2.3 浮动——float20.2.3 浮动——float基本语法float:left|right|none 20.2.3 浮动——float20.2.3 浮动——float语法说明 left表示浮动元素在左边，是居左对齐的。  right表示浮动元素在右边，是居右对齐的。  none表示不浮动，是默认值。20.2.3 浮动——float20.2.3 浮动——float实例代码20.2.3 浮动——float20.2.3 浮动——float接上页20.2.3 浮动——float20.2.3 浮动——float网页效果20.2.3 浮动——float20.2.3 浮动——float效果说明实例20-2-3代码中img{float:left}定义了图像的浮动属性为浮动在元素的左边，所以图像20-2-3.jpg浮动到了文字内容的左边，即居左对齐。 20.2.4 清除——clear20.2.4 清除——clear基本语法clear:left|right|both|none 20.2.4 清除——clear20.2.4 清除——clear语法说明 left表示不允许在某元素的左边有浮动元素。  right表示不允许在某元素的右边有浮动元素。  both表示在某元素左右两边都不允许有浮动元素。  none表示在某元素左右两边都允许有浮动元素。20.2.4 清除——clear20.2.4 清除——clear实例代码20.2.4 清除——clear20.2.4 清除——clear接上页20.2.4 清除——clear20.2.4 清除——clear网页效果20.2.4 清除——clear20.2.4 清除——clear效果说明在图20-8的效果图中，图像20-2-4本身应用了浮动属性是浮动在其他内容的右边，但是因为这段文字应用了d1所定义的样式，不允许在该内容右边有浮动元素，所以图像20-2-4浮动到了应用d1所定义样式的内容上面，且还是居右对齐。 20.3 CSS层20.3 CSS层20.3.1 设置层空间——z-index 20.3.2 设置层裁切——clip 20.3.3 设置层大小—度来—width、height 20.3.4 设置层溢出——overflow 20.3.5 设置层可见——visibility 20.3.1 设置层空间——z-index20.3.1 设置层空间——z-index基本语法 z-index:auto|数字 20.3.1 设置层空间——z-index20.3.1 设置层空间——z-index语法说明 auto表示子层会按照父层的属性显示。  数字必须是无单位的整数或负数，但一般情况下都取正整数，所以z-index属性值为1的层位于最下层。 20.3.1 设置层空间——z-index20.3.1 设置层空间——z-index实例代码20.3.1 设置层空间——z-index20.3.1 设置层空间——z-index接上页20.3.1 设置层空间——z-index20.3.1 设置层空间——z-index网页效果20.3.1 设置层空间——z-index20.3.1 设置层空间——z-index效果说明在“图20-9设置层空间”中，第三层的内容覆盖在第二层和第一层内容上面，第二层的内容又覆盖在第一层内容上面，所以从视觉角度会有立体感。 20.3.2 设置层裁切——clip20.3.2 设置层裁切——clip基本语法clip:rect{<上>|<右>|<下>|<左>} |auto 20.3.2 设置层裁切——clip20.3.2 设置层裁切——clip语法说明 auto表示不裁切。  rect的4个坐标值表示所裁切矩形的4个顶点位置，其中以网页左上角为坐标（0，0），而上、右、下、左这4个坐标值则是以左上角为参照点计算的。而且任意一个坐标值都可由auto来代替，表示该边不裁切。20.3.2 设置层裁切——clip20.3.2 设置层裁切——clip实例代码20.3.2 设置层裁切——clip20.3.2 设置层裁切——clip接上页20.3.2 设置层裁切——clip20.3.2 设置层裁切——clip网页效果20.3.2 设置层裁切——clip20.3.2 设置层裁切——clip效果说明层裁切的矩形区域坐标值说明，上坐标10像素是指矩形的上边距网页上边的距离；右坐标6厘米是指矩形的右边距网页左边的距离为6厘米；下坐标80像素是指矩形的下边距网页的上边的距离；左坐标12像素是指矩形的左边距网页左边的距离为12像素。 20.3.3 设置层大小—度来—width、height20.3.3 设置层大小—度来—width、height基本语法width:auto|长度 height:auto|长度 20.3.3 设置层大小—度来—width、height20.3.3 设置层大小—度来—width、height语法说明 width表示的是宽度，而height表示的是高度。  auto表示自动设置长度。  长度包括长度值和单位。  长度也可使用相对值中的百分比。20.3.3 设置层大小—度来—width、height20.3.3 设置层大小—度来—width、height实例代码20.3.3 设置层大小—度来—width、height20.3.3 设置层大小—度来—width、height接上页20.3.3 设置层大小—度来—width、height20.3.3 设置层大小—度来—width、height网页效果20.3.3 设置层大小—度来—width、height20.3.3 设置层大小—度来—width、height注意对于每个层在设置层大小时，其中只能设置宽度和高度中的一个值，另一个值则自动获得。如果两个值都设置了，则还要同时设置层溢出属性overflow。 20.3.4 设置层溢出——overflow20.3.4 设置层溢出——overflow基本语法overflow: visible/hidden/scroll/auto 20.3.4 设置层溢出——overflow20.3.4 设置层溢出——overflow语法说明 visible：扩大层的容纳范围，将所有内容都显示出来。  hidden：隐藏超出范围的内容（超出范围的内容将被裁切掉）。  scroll：表示一直显示滚动条。  auto：当层内容超出了层的容纳范围时，则显示滚动条。 20.3.4 设置层溢出——overflow20.3.4 设置层溢出——overflow实例代码20.3.4 设置层溢出——overflow20.3.4 设置层溢出——overflow接上页20.3.4 设置层溢出——overflow20.3.4 设置层溢出——overflow网页效果20.3.5 设置层可见——visibility20.3.5 设置层可见——visibility基本语法visibility:visible|hidden|inherit 20.3.5 设置层可见——visibility20.3.5 设置层可见——visibility语法说明 visible表示该层是可见的。  hidden表示该层被隐藏，是不可见的。  inherit表示子层或子元素会继承父层或父元素的可见性，父级元素可见则子级元素也可见。 20.3.5 设置层可见——visibility20.3.5 设置层可见——visibility实例代码20.3.5 设置层可见——visibility20.3.5 设置层可见——visibility接上页20.3.5 设置层可见——visibility20.3.5 设置层可见——visibility接上页20.3.5 设置层可见——visibility20.3.5 设置层可见——visibility网页效果20.3.5 设置层可见——visibility20.3.5 设置层可见——visibility效果说明图20-14的效果是在图20-13的代码基础上将d1样式中的可见性visibility属性由hidden修改为visible。所以图像20-3-5-1.jpg在图20-13中被隐藏，而在图20-14中是可见的。 20.4 鼠标指针——cursor20.4 鼠标指针——cursor基本语法cursor:auto|关键字|URL（图像地址） 20.4 鼠标指针——cursor20.4 鼠标指针——cursor语法说明 auto表示根据对象元素的内容自动选择鼠标指针形状。  URL（图像地址）表示选取自定义的图像作为鼠标指针的形状。  关键字共有16种，是系统预先定义好的鼠标指针形状，具体说明和形状见表20-2。20.4 鼠标指针——cursor20.4 鼠标指针——cursor表20-2 鼠标指针关键字说明20.4 鼠标指针——cursor20.4 鼠标指针——cursor实例代码20.4 鼠标指针——cursor20.4 鼠标指针——cursor接上页20.4 鼠标指针——cursor20.4 鼠标指针——cursor网页效果20.4 鼠标指针——cursor20.4 鼠标指针——cursor效果说明在实例20-4-1代码中分别为段落和图像定义了两个不同的鼠标指针形状，当鼠标指向图像时，鼠标指针变为手形，效果如图20-15。当鼠标指向段落文字时，鼠标指针变为文本选择的形状，效果如图20-16。 20.5 小实例——综合设置层样式20.5 小实例——综合设置层样式实例代码20.5 小实例——综合设置层样式20.5 小实例——综合设置层样式接上页20.5 小实例——综合设置层样式20.5 小实例——综合设置层样式网页效果20.5 小实例——综合设置层样式20.5 小实例——综合设置层样式效果说明虽然图20-17的效果看上去并不复杂，但是在实例20-5-1代码中定义的两个类样式几乎涉及了本章所学的所有属性。第一个类样式的定义中应用到了定位属性、位置属性、层空间、层大小、层溢出和鼠标属性。第二个类样式的定义中应用到了定位属性、位置属性、字号和颜色属性、以及层空间、层宽度和列表图像样式属性。