3.6 设置超链接和列表样式-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）

单元3 CSS基础 3.6 设置超链接和列表样式 主要内容 CONTENTS PART 01 超链接伪类 PART 03 设置鼠标样式 PART 02 设置超链接样式 PART 04 设置列表样式 2 超链接伪类 静态伪类：只适用于超链接的伪类，主要状态描述如下。 :link 超链接点击之前的样式。 :visited 链接被访问过之后的样式。 动态伪类：针对所有元素都适用的伪类，主要状态描述如下。 :hover 鼠标放到元素上的时候的样式，即悬停状态。 :active 鼠标点击元素，但是不松手时的样式，即激活状态。 :focus 是某个元素获得焦点时的样式，即获得焦点。 设置超链接样式 超链接及其伪类选择器 【案例3.6.1】设置超链接基本的样式 选择器 说明 a 定义的样式针对所有的超链接(包括锚点) a:link 选择未被访问过的a元素，且a元素必须包含href属性。 a:visited 选中已经被访问过的a元素。 a:hover 当鼠标悬停在a元素上的时候。 a:active 鼠标单击a元素，但不松手的时候。 设置鼠标样式 cursor属性：设置在当前元素上移动鼠标时所要显示的鼠标形状。 cursor:[<url> [<x><y>]?,]*[ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing] 属性值 说明 url 需使用的自定义光标的 URL。 default 默认光标（通常是一个箭头） auto 默认。浏览器设置的光标。 crosshair 光标呈现为十字线。 pointer 光标呈现为指示链接的指针（一只手） move 此光标指示某对象可被移动。 e-resize 此光标指示矩形框的边缘可被向右（东）移动。 ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 n-resize 此光标指示矩形框的边缘可被向上（北）移动。 se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 s-resize 此光标指示矩形框的边缘可被向下移动（南）。 w-resize 此光标指示矩形框的边缘可被向左移动（西）。 text 此光标指示文本。 wait 此光标指示程序正忙。 help 此光标指示可用的帮助。 【案例3.6.3】设置鼠标的样式展示 设置列表样式 列表主要用于对大量信息的分类，列表相关CSS属性。 【案例3.6.4】设置列表的样式展示 属性 说明 list-style-type 功能：规定列表项标记的类型。 语法：list-style-type:disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin list-style-position 功能：规定列表项标记（项目符号）的位置。 语法：list-style-position:outside | inside list-style-image 功能：指定图像作为列表项标记。 语法：list-style-image:none | url list-style 功能：简写属性。在一条声明中设置列表的所有属性。 语法：list-style: list-style-type | list-style-positi