IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值4

08cf9b3b783b481eb77f10c424e619bc.jpg

 

6  鼠标光标属性

在网页中默认的鼠标指针只有两种,一种是最普通的箭头,另一种是当移动到链接上时出现的“小手”。但现在越来越多的网页都使用了CSS鼠标指针技术,当将鼠标移动到链接上时,可以看到多种不同的效果。CSS可以通过cursor属性实现鼠标形状的改变,其属性可以是默认的鼠标形状default、小手形状hand、指示某对象可被移动move、交叉十字crosshair、文本选择器号text、Windows的沙漏形状wait、带有问号的鼠标help及各个方向的箭头属性值。例句如下:

p {cursor: pointer;}       /* 当鼠标放在此项修饰的段落元素上时,出现“小手”形状鼠标 */

7  列表属性

默认的列表样式比较简单,但可以使用CSS中有关的属性丰富列表的外观。例如可以在文本行前面加实心圆、空心圆、实心方块,还可以在有序列表中使用阿拉伯数字、大写或小写的罗马数字、大写或小写的英文字母,还可以定制列表符号。其属性如表1所示。

表1  CSS中常见的控制列表的属性

 

fbc6121eee3d4ee8a6aa137b9915d089.png

 

虽然可以使用list-style-type属性设定丰富的列表符号类型,而且也可以使用list-style-image属性添加自定义的列表符号,但是这些方法对符号的位置控制能力不强。比较常用的方法是关闭列表项自身的符号,然后使用定制的符号图像作为背景添加在列表元素上。这样就可以使用CSS的背景图像定位属性,精确地控制自定义符号的对齐方式。

不同的浏览器对列表样式的解析也不一样,IE和Opera浏览器使用左外空白边距控制列表的缩进,而Firefox和Safari浏览器则使用左内填充空白边距控制列表的缩进。因此,在使用列表样式时,首先要将列表的左外空白边距(margin)和左内填充空白边距(padding)设置为0,去掉所有边距的缩进。完成这些工作的例句代码如下所示:

dcaaaa095fd3461f86afb4ec0ae676a7.png

接下来就可以添加自定义的符号了。首先在列表项左边用空白填充或使用文本缩进,为符号图像留出所需的空间,然后将自定义的符号图像作为背景图像应用于列表项中。如果一个列表项中的内容跨越多行,不希望将符号图像放置在第一行的位置,就可以将垂直位置设置为center或50%,让符号图像垂直居中。例句如下所示:

63435525d4dc453ba7993d1a36951464.png

posted on 2019-10-31 08:23  老码农的一亩三分地  阅读(...)  评论(... 编辑 收藏

导航