HTML&CSS精选笔记_列表与超链接

时间:2022-05-13 20:28:30
列表与超链接

列表标记


无序列表ul


无序列表的各个列表项之间没有顺序级别之分,是并列的
<ul>
<li>列表项1</li>
<li>列表项2</li>
  <li>列表项3</li>
......
</ul>
每对<ul></ul>中至少应包含一对<li></li>。
无序列表中type属性的常用值有三个,它们呈现的效果不同
disc(默认值)    
circle                    
square                 
注意:
不赞成使用无序列表的type属性,一般通过CSS样式属性替代。
<li>与</li>之间相当于一个容器,可以容纳所有元素。但是<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标记中输入文字的做法是不被允许的。



有序列表ol


有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
......
</ol>
在有序列表中,除了type属性之外,还可以为<ol>定义start属性、为<li>定义value属性,它们决定有序列表的项目符号
type  1(默认) 项目符号显示为数字1 2 3…
a或A 项目符号显示为英文字母a b c d…或A B C…
i或I 项目符号显示为罗马数字i ii iii…或I II III…
start 数字 规定项目符号的起始值
value 数字 规定项目符号的数字
注意:
各浏览器对有序列表的type和value属性的解析不同。

不赞成使用<ol><li>的type、start和value属性,可通过CSS样式替代。


定义列表dl


定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    ...
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>

    ...

</dl>


列表的嵌套应用


在使用列表时,列表项中可能包含若干子列表项。要想在列表项中定义子列表项就需要将列表进行嵌套


CSS控制列表样式


list-style-type属性


用于控制无序和有序列表的项目符号,其取值有多种
列表类型 属性值 显示效果
无序列表(ul)
disc
circle
square
有序列表(ol)
decimal 阿拉伯数字1、2、3......
upper-alpha 大写英文字母A、B、C......
lower-alpha 小写英文字母a、b、c......
upper-roman 大写罗马数字I、II、III......
lower-roman 小写罗马数字i、ii、iii......
<ul>、<ol>公共属性
none 不显示任何符号


注意:
在实际网页制作过程中,各个浏览器对list-style-type属性的解析不同。因此,不推荐使用list-style-type属性。

list-style-image属性


list-style-image属性的取值为图像的url(地址)。使用list-style-image属性可以为各个列表项设置项目图像,使列表的样式更加美观。

list-style-position属性


用于控制列表项目符号的位置,其取值如下所示:
    inside:列表项目符号位于列表文本以内。
    outside:列表项目符号位于列表文本以外(默认值)。

list-style属性


列表样式也是一个复合属性,可以将列表相关的样式都综合定义在一个复合属性list-style中。
list-style:列表项目符号 列表项目符号的位置 列表项目图像;


使用复合属性list-style时,通常按上面语法格式中的顺序书写,各个样式之间以空格隔开,不需要的样式可以省略。
在实际网页制作过程中,为了更高效地控制列表项目符号,通常将list-style的属性值定义为none,然后通过为<li>设置背景图像的方式实现不同的列表项目符号。


超链接标记


创建超链接


只需用<a></a>标记环绕需要被链接的对象即可
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
<a>标记是一个行内标记,用于定义超链接,href和target为其常用属性
href:用于指定链接目标的url地址,当为<a>标记应用href属性时,它就具有了超链接的功能。
target:用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,_blank为在新窗口中打开方式。
注意:
暂时没有确定链接目标时,通常将<a>标记的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。
不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。


创建图像超链接时,在某些浏览器中,图像会添加边框效果,影响页面的美观。
为了不影响页面的美观,通常需要去掉图像的边框效果,使图像正常显示。去掉链接图像的边框很简单,只需将图像的边框定义为0即可,代码如下所示:
<a href="#"><img src="images/logo.gif" border="0" /></a>


锚点链接


通过创建锚点链接,用户能够快速定位到目标内容。
创建锚点链接分为两步:
使用“<a href=”#id名“>链接文本</a>”创建链接文本。
使用相应的id名标注跳转目标的位置。


链接伪类控制超链接


在CSS中,通过链接伪类可以实现不同的链接状态。
所谓伪类并不是真正意义上的类,它的名称是由系统定义的,通常由标记名、类名或id名加“:”构成。
超链接标记<a>的伪类有4种
a:link{ CSS样式规则; } 未访问时超链接的状态
a:visited{ CSS样式规则; } 访问后超链接的状态
a:hover{ CSS样式规则; } 鼠标经过、悬停时超链接的状态
a: active{ CSS样式规则; } 鼠标点击不动时超链接的状态
注意:
同时使用链接的4种伪类时,通常按照a:link、a:visited、a:hover和a:active的顺序书写,否则定义的样式可能不起作用。
除了文本样式之外,链接伪类还常常用于控制超链接的背景、边框等样式。