探索CSS（8）：字体、链接和列表在Web开发学习笔记（21）中的深度解析

发表时间: 2024-01-17 22:15

（1）字体的属性

font 属性
font-family 属性
font-size 属性
font-weight 属性
font-style 属性

字体属性用于定义字体的类型、字号大小、加粗、斜体等方面样式。常用的字体属性如下表所示：

属性	可取值	描述
font	font-style、font-variant、font-weight、font-size（或 line-height）、font-family	在一个声明中设置所有的字体属性
font-family	字体名称、inherit	设置字体类型
font-size	xx-small、x-small、small、medium（默认）、large、x-large、xx-large smaller、larger length、%、inherit	设置字体大小
font-weight	normal（默认）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold）	设置字体粗细
font-style	normal、italic、oblique、inherit	设置字体风格

例子，

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      h3 {        font-size: 20px;        font-family: 隶书;        line-height: 28px;      }      span {        font: italic 16px 华文彩云;      }    </style>  </head>  <body>    <h3>Web 前端技术</h3>    <span      >在当今社会中，Web 已经成为网络信息共享和发布的主要形式。要想开发 Web 应用      系统，就必须掌握 Web 前端技术。</span    >  </body></html>

显示为，

（2）CSS 中链接标签可用的伪类：

a:link
a:hover
a:active
a:visited

CSS 中，伪类是添加到选择器的关键字，给指定元素设置一些特殊状态，我们以 : 开头。

链接有以下四个状态。这四种状态也称之为超链接的伪类。

状态	效果
a:link	普通的、未被访问的链接。
a:hover	鼠标指针位于链接的上方。
a:active	链接被单击的时刻。
a:visited	用户已访问的链接。

针对超链接的上述四种状态设置样式规则，能起到美化超链接的作用。例如，为了完成下对超链接的显示要求，编写的 CSS 样式代码如下。

状态	颜色	背景色	文本修饰
未访问	蓝色	无	无下画线
鼠标移到	黑色	#DDDDDD	下画线
正单击	红色	#AAAAAA	删除线
已访问	绿色	无	无下画线

对于超链接的伪类，我们推荐的使用顺序是：:link - :visited - :hover - :active。

例子，

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      * {        text-decoration: none;      }      a:link {        color: red;      }      a:visited {        color: blue;      }      a:hover {        color: green;      }      a:active {        color: yellow;      }    </style>  </head>  <body>    <a href="#">这是一个链接</a>  </body></html>

显示为，

为什么要按照这样的顺序来使用呢？调整几个伪类的顺序，看看会发生什么。

我们把 a:link 放到最后，效果如下：

从图中可以发现其中的样式属性都被覆盖了。

（3）列表相关的样式属性：

list-style 属性
list-style-image 属性
list-style-position 属性
list-style-type 属性

属性	可取值	描述
list-style	list-style-type、list-style-position、list-style-image	在一个声明中设置所有的列表属性
list-style-image	URL、none	设置图像为列表项标志
list-style-position	inside、outside、inherit	设置列表中列表项标志的位置
list-style-type	disc（默认）、circle、square、decimal 等	设置列表项标志的类型

例子，

wget https://labfile.oss.aliyuncs.com/courses/2841/list.gif

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      ul {        list-style-position: inside;        list-style-image: url(list.gif);      }    </style>  </head>  <body>    <ul>      <li>喵喵咪爱哦</li>    </ul>  </body></html>

探索CSS（8）：字体、链接和列表在Web开发学习笔记（21）中的深度解析

热门阅读

推荐阅读