返回

网罗CSS基础语法4-字体、链接伪类、列表样式 全解析

前端

CSS基础语法4：字体、链接中的伪类、列表样式

在CSS的浩瀚海洋中，字体、链接中的伪类和列表样式是不可或缺的重要基石。本文将深入浅出地探索这些基础语法，让你轻松驾驭CSS的奥秘。

字体属性

字体属性赋予文字以生命，让你轻松控制字体的方方面面。

  • 字体系列： 赋予文字独特的个性，从经典的Times New Roman到现代的Arial，选择适合你风格的字体。
  • 字形： 从普通、斜体到加粗，让文字展现出不同的形态。
  • 字号： 掌控文字的大小，用像素、em或rem巧妙调整，满足不同的显示需求。
  • 粗细： 调节文字的粗壮程度，从纤细的100到强壮的900，赋予文字不同的视觉冲击力。
  • 样式： 为文字添加装饰，下划线、删除线还是大写字母，让文字更具个性化。
p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
  text-decoration: underline;
}

链接中的伪类

链接中的伪类就像魔法棒，赋予链接在不同状态下的特殊表现。

  • a： 基础链接样式，默认是蓝色且有下划线。
  • a:hover： 鼠标悬停时，链接变成红色且有下划线，示意可点击。
  • a:visited： 已访问的链接，通常变成紫色，方便用户识别。
  • a:active： 点击时，链接变成橙色，提供即时反馈。
  • a:focus： 当链接获得焦点时，变成黄色，确保键盘用户也能轻松导航。
a {
  color: blue;
  text-decoration: none;
}
a:hover {
  color: red;
  text-decoration: underline;
}

列表样式

列表样式让你的列表变得井井有条，视觉上更加美观。

  • 列表项样式： 控制列表项的标记，从圆点、方块到圆圈，自由选择最适合的形状。
  • 列表标记： 决定标记的位置，在列表项内还是外？由你掌控。
ul {
  list-style-type: square;
  list-style-position: inside;
}

实例展示

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 16px;
    }
    h1 {
      font-size: 24px;
      font-weight: bold;
    }
    p {
      text-align: justify;
    }
    ul {
      list-style-type: square;
    }
    a {
      color: blue;
      text-decoration: none;
    }
    a:hover {
      color: red;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <h1>CSS基础语法4实例</h1>
  <p>这段文字使用Arial、Helvetica或其他无衬线字体，字号为16像素，对齐方式为两端对齐。</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
  <a href="#">链接文字</a>
</body>
</html>

常见问题解答

  1. 如何让列表标记为字母？

    ul {
  list-style-type: lower-alpha;
}

  2. 如何让链接在访问后变为灰色？

    a:visited {
  color: gray;
}

  3. 如何将列表标记缩进？

    ul {
  padding-left: 20px;
}

  4. 如何让列表项呈水平排列？

    ul {
  display: flex;
  flex-direction: row;
}

  5. 如何让文本居中对齐？

    p {
  text-align: center;
}

结语

通过掌握字体、链接中的伪类和列表样式，你的CSS技能将更上一层楼。在实践中不断探索和尝试，你会发现CSS的魅力无穷，让你创建出令人惊叹的网页杰作。