html 基础巩固（2）

1.CSS还可以设置鼠标悬停在元素上时的不同光标样式。cursor属性用于设置鼠标的光标样式，即当鼠标悬停在元素上时，可改变鼠标光标的显示样式。其取值如图5-17所示。

2.定位

1）static，静态定位。该取值可让元素留在默认文档流中保持原位置不变，不能自由改变位置。此为默认值。因此，默认情况下，所有元素均不能自由定位。

（2）relative，相对定位。该取值可让元素相对于它在默认文档流中的原始位置，自由定位。如果只是希望元素在其原位置附近微调一段距离，首选相对定位。

（3）absolute，绝对定位。该取值可让元素脱离默认文档流，自由定位。定位时使用的位移坐标，是相对于其所在父元素左上角定位。如果对元素的位置改动较大，或者对灵活性要求较高，那么首选绝对定位。

（4）fixed，固定定位。该取值也可让元素脱离默认文档流，自由定位，但是定位时使用的位移坐标，是相对于浏览器文档显示区左上角的。如果希望被定位的元素不随页面滚动而滚动，则首选固定定位。

position属性只能让元素脱离文档流，无法定义元素位置的坐标。因此，position属性必须和偏移属性共同使用，才能实现自由定位。

偏移属性用于定义元素距离参照容器边缘的偏移距离，其值为数字。通过偏移属性，可分别设置元素在4个方向上的偏移量。每个方向上的偏移属性都是单独设置的，包括以下4种：

（1）top属性，用于定义元素顶部距参照容器上边框的偏移量。若值为正数，表示向下偏移；若值为负数，表示向上偏移。例如，top：50px；表示元素从参照容器上边框起向下偏移50px。

（2）bottom属性，用于定义元素下边框距参照容器下边框的偏移量。若值为正数，表示元素底部高出参照容器下边框的距离；若值为负数，表示元素下边框下陷入参照容器下边框以下的距离。例如，bottom：50px；表示将元素定位在其参照容器中接近底部的位置，并且元素的下边框高出参照容器底部边框50px。

（3）left属性，用于定义元素左边框距参照容器左边框的偏移量。若值为正数，表示元素左边框距离参照容器左边框向右偏移的距离；若值为负数，表示元素左边框向左超出参照容器左边框的距离。例如，left：200px；表示元素距离参照容器左边框向右偏移200px。

（4）right属性，用于定义元素右边框距参照容器右边框的偏移量。若值为正数，表示元素右边框距离参照容器右边框向左偏移的距离；若值为负数，表示元素右边框向右超出参照容器右边框的距离。例如，right：150px；表示元素距离参照容器右边框向左偏移150px。

3.图片截取显示

为了避免网页加载时多次下载每张小图片，减少请求次数，我们在设计图标时，就先将小图标整齐地排列在一张大图片文件内，如图5-29所示。然后，仅请求一次大图片，即可获取所有小图标。而使用时，再根据小图标在大图片中的位置，通过调整元素背景的位置来选择对应的小图片作为背景。这种优化技巧称为CSS精灵（CSS Sprite）。

 

4.

伪类选择器，用于表示处于某种状态的元素。已学过的伪类包括链接伪类（：link，：visited）和动态伪类（：hover，：active，：focus）。除此之外，还有以下几种伪类：

（1）目标伪类，用于突出显示活动的HTML锚点元素，匹配被**时的锚点目标元素。语法格式为：选择器：target{…}，意为当指定“选择器”匹配的元素被锚点**时所呈现的样式。当希望将页面调转到一个锚点位置时，显示特殊效果，就可用目标伪类。利用目标伪类，同样可以做出有趣的动效，如弹出窗或标签页。下面我们将实验5.4.6中的登录框改为弹出框。HTML代码修改如下：

首先，在页面中添加“登录”按钮，居右显示。并设置该按钮的href属性为#loginform。代码如下：

在CSS中，修改#loginform样式规则如下：

5.首字母样式

1） ：first-letter或：：first-letter，用于匹配某个元素的首字符。例如，包含一段文字的p元素：

希望将首字母L变大并跨多行显示，可使用如下CSS：

浏览效果如图5-37所示。

2） ：first-line或：：first-line，用于匹配某个元素的首行文字。例如，还是同上HTML代码，希望首行字符背景加深，可使用如下CSS：

浏览效果如图5-38所示。

图5-38 ：：first-line

如果同时设置了首字符样式和首行样式，在两者发生冲突时，优先使用首字符的样式

6.标签前后插入样式

内容生成就是使用CSS属性动态向某元素中插入一段内容。要在特定位置插入一段内容，首先要用选择器获得要插入新内容的位置。伪元素选择器用于匹配元素内容中特定位置，包括:

（1） :before或::before，用于匹配某元素内容区域之前的位置。例如，<p>锄禾日当午</p>中，“锄”字之前看不见的位置，就是::before表示的位置。

（2） :after或::after，用于匹配某元素内容区域结尾的位置。例如，<p>锄禾日当午</p>中，“午”字之后看不见的位置，就是::after表示的位置，如图5-39所示。

图5-39:after和:before

通过选择器获得要插入新内容的位置后，还需要特定的CSS属性才能插入内容。content属性负责在指定位置插入新内容，其值是一段文字或符号。content属性的值必须用引号包裹起来。例如，希望在站点地图导航前添加“>>”，可使用如下CSS代码:

结果如图5-40所示。

图5-40  站点地图

其实，content属性不仅能添加文字，还能添加图标、图片。如果希望动态添加图标、图片，则必须借助url（）功能的支持。url（）用于为内容生成添加图片。其中，小括号内应指定要添加图片的路径地址。例如，希望在一句话之前添加图片，可使用如下CSS代码:

p::before{content:url(img/arrow_left.png)}

结果如图5-41所示。

图5-41  内容生成一张图片

 

------------------------------------

6.2  转换

转换（transform），也称变形，就是改变元素在页面中的位置、大小、角度以及形状。转换分为2D转换和3D转换两种。2D转换是指仅在x轴和y轴形成的平面内发生的转换。3D转换是指在x轴、y轴和z轴组成的三维空间中发生的转换。

6.2.1  转换属性

要用CSS对元素实现转换，可使用transform属性。其属性值不是简单的数值，而是一系列专门执行各种转换功能的函数。

图6-10  转换原点

使用转换属性之前，还需要确定转换的原点。转换原点是指在转换过程中，位置不发生改变的点。默认的转换原点在元素的中心点，如图6-10所示。

如果希望以其他位置作为转换原点，可使用transform-origin属性修改。在二维平面中要确定一个原点，通常需要两个值，分别是原点的x轴坐标和y轴坐标。因此，transform-origin属性的一种语法格式为：transform-origin：x y。其中，x、y可以是数字，也可以是百分比，还可以是表示位置的关键词。对应效果如图6-11所示。

图6-11  转换原点不同，转换效果不同

在三维空间中确定一个原点需要3个值，分别是原点的x轴坐标、y轴坐标和z轴坐标。因此，transform-origin属性的另一种语法格式为：transform-origin：x y z。

6.2.2  位移

位移就是改变元素在页面中的位置。在定义transform属性时，执行translate（）函数，可让元素发生位移。其取值有以下3种情况：

（1）translate（x），指定元素在x轴上的位移。若取值为正，元素右移；若取值为负，元素左移。

（2）translate（x，y），指定元素同时在x轴和y轴上发生的位移。其中，y指元素在y轴上的位移距离。若取值为正，元素下移；若取值为负，元素上移。

（3）translateX（x）和ranslateY（y），分别设置元素在x轴和y轴上的位移。

位移效果如图6-12所示。

图6-12  位移效果

 

6.2.3  缩放

缩放就是改变元素在页面中的尺寸。在定义transform属性时，执行scale（）函数，可对元素进行缩放。其取值有以下3种情况：

（1）scale（value），让元素横向和纵向同时等比缩放。value指缩放比例，默认值为1，表示不缩放。若value>1，表示放大；若value<1，表示缩小。如果value为负数，则表示水平和垂直方向都翻转180°。

（2）scale（x，y），同时设置元素在x和y两个方向上的不同缩放比例。

（3）scaleX（x）和scaleY（y），分别设置元素在x和y两个方向上的缩放比例。

缩放效果如图6-13所示。

图6-13  缩放效果

例如，在5.7.4实验：实现电商网站商品列表中，若希望鼠标悬停在某个商品卡片上时，商品卡片稍微放大，则可使用如下CSS代码实现：

.product:hover{box-shadow:005px#aaa;transform:scale(1.1)}

效果如图6-14所示。

图6-14  商品卡片缩放效果

 

6.2.4  旋转

旋转就是改变元素在页面上的角度。在设置transform属性时，执行rotate（）函数可让元素旋转一定的角度。rotate（）函数的语法格式为：rotate（ndeg）。其中，n是角度的数值，deg是角度的单位，意为“度”。若n取值为0，则不旋转；若n取值为正，则元素顺时针旋转；若n取值为负，则元素逆时针旋转，如图6-15所示。

图6-15  旋转

特别需要注意的是，旋转时默认的转换原点是图形的中心点。转换原点会影响最后的转换效果，如图6-11所示。另外，旋转是连同坐标轴一同旋转的，故旋转后会影响位移的方向。

6.2.5  倾斜

倾斜就是改变元素在页面中的形状。在设置元素的transform属性时，执行skewX（）和skewY（）函数。skewX（xdeg）是让元素向x轴产生倾斜。其中，x是倾斜的角度，deg是角度的单位。skewX（xdeg）可简写为skew（xdeg）。在元素倾斜的同时，y轴的倾斜角度也发生改变。若x取值为正，则y轴逆时针倾斜；若x取值为负，则y轴顺时针倾斜，如图6-16所示。

skewY（ydeg）是让元素向y轴产生倾斜。其中，y是倾斜的角度。元素向y轴倾斜，实际上改变的是x轴的倾斜角度。若y取值为正，则x轴顺时针倾斜；若y取值为负，则x轴逆时针倾斜，如图6-17所示。

图6-16 向x轴倾斜

图6-17 向y轴倾斜

其实，也可使用两个参数的skew函数：skew（xdeg，ydeg），同时设置向x轴和向y轴倾斜的角度。

6.2.6  3D转换

3D转换就是让元素在x、y、z三条轴组成的三维空间中旋转。但是，显示器是平面的，如何用平面模拟三维的显示效果？这就需要靠透视距离（简称视距）实现。视距是模拟人眼到3D转换元素之间的距离。模拟人眼所在位置，距转换元素越远，元素在显示器投影平面上的像越小，三维转换越不明显。反之，模拟人眼所在位置，距转换元素越近，元素在显示器投影平面上的像越大，三维转换越明显。如图6-18所示。

图6-18 视距

调整视距，可调节3D变换的元素的变化幅度与大小，让3D变换显得更自然。修改要执行3D变换的父元素的perspective属性，可调整视距。其值为一个数字，单位为px。

视距调整好后，就可以执行3D旋转了。设置元素的transform属性时，执行rotate系列函数，可让元素3D旋转。rotate系列函数包括：

（1）rotateX（xdeg），表示以x轴为中心轴，旋转元素的角度。

（2）rotateY（ydeg），表示以y轴为中心轴，旋转元素的角度。

（3）rotateZ（zdeg），表示以z轴为中心轴，旋转元素的角度。

（4）rotate3D（x，y，z，ndeg），可同时定义元素在三条轴上统一的旋转角度n。当x，y，z取值大于0时，表示该轴参与旋转，并且旋转n度。若取值为0，则表示该轴不参与旋转。

3D转换如图6-19所示。

图6-19 3D转换