文本样式不仅仅是装饰，它对用户体验和网站的可读性有着重要影响。

借助文本样式为网页赋予生命——WEB开发系列28_布局

一、基本文本和字体样式

1. 字体

CSS 中的字体属性定义了文本的外观，包括字体的类型、大小、粗细等。我们来详细了解这些属性：

字体颜色

使用 color 属性可以设置文本的颜色。例如：

p {
  color: #333; /* 深灰色 */
}

借助文本样式为网页赋予生命——WEB开发系列28_html_02

字体种类

font-family 属性指定文本的字体。可以设置多个字体，以确保在不同设备上都有合适的显示。例如：

body {
  font-family: 'Arial', 'Helvetica', sans-serif;
}

借助文本样式为网页赋予生命——WEB开发系列28_文本样式_03

这里，浏览器会首先尝试使用 Arial 字体，如果不可用，则使用 Helvetica，最后使用系统默认的无衬线字体 sans-serif。

网页安全字体和字体栈

网页安全字体 是指在大多数操作系统中都可用的字体，如 Arial 和 Times New Roman。字体栈 是指按照优先级排列的字体列表。例如：

h1 {
  font-family: 'Georgia', 'Times New Roman', serif;
}

借助文本样式为网页赋予生命——WEB开发系列28_前端_04

在这里，Georgia 是首选字体，如果不可用，则使用 Times New Roman，最后使用 serif（衬线字体）作为备用。

字体大小

使用 font-size 属性设置字体的大小。可以使用像素（px）、相对单位（em、rem）等。例如：

h1 {
  font-size: 2rem; /* 相对于根元素字体大小的两倍 */
}

借助文本样式为网页赋予生命——WEB开发系列28_css3_05

2. 字体样式和粗细

字体样式

font-style 属性用于设置字体样式，例如斜体：

em {
  font-style: italic;
}

借助文本样式为网页赋予生命——WEB开发系列28_文本样式_06

字体粗细

font-weight 属性设置字体的粗细，可以使用关键词（如 normal、bold）或数值（如 400、700）：

strong {
  font-weight: bold;
}

借助文本样式为网页赋予生命——WEB开发系列28_html_07

文本转换

text-transform 属性用于控制文本的大小写转换：

h2 {
  text-transform: uppercase; /* 全部大写 */
}

借助文本样式为网页赋予生命——WEB开发系列28_html_08

文本装饰

text-decoration 属性用于添加或移除文本装饰，例如下划线、删除线：

a {
  text-decoration: none; /* 去掉下划线 */
}

借助文本样式为网页赋予生命——WEB开发系列28_布局_09

借助文本样式为网页赋予生命——WEB开发系列28_文本样式_10

文字阴影

text-shadow 属性为文本添加阴影效果：

h3 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

借助文本样式为网页赋予生命——WEB开发系列28_文本样式_11

这段代码给 h3 元素的文本添加了一个 2px 的水平和垂直偏移的阴影，模糊半径为 4px，阴影颜色为半透明的黑色。

二、文本布局

1. 文本对齐

text-align 属性用于设置文本对齐方式：

p {
  text-align: center; /* 居中对齐 */
}

借助文本样式为网页赋予生命——WEB开发系列28_文本样式_12

2. 行高

line-height 属性设置文本行之间的距离，通常用于改善文本的可读性：

p {
  line-height: 1.5; /* 1.5 倍的行高 */
}

借助文本样式为网页赋予生命——WEB开发系列28_html_13

3. 字母和单词间距

字母间距

letter-spacing 属性设置字母之间的间距：

h1 {
  letter-spacing: 1px;
}

借助文本样式为网页赋予生命——WEB开发系列28_布局_14

单词间距

word-spacing 属性设置单词之间的间距：

p {
  word-spacing: 2px;
}

借助文本样式为网页赋予生命——WEB开发系列28_布局_15

4. Font 简写

font 属性是一个简写属性，可以同时设置字体样式、粗细、大小、行高和字体家族。例如：

p {
  font: italic bold 16px/1.5 'Arial', sans-serif;
}

借助文本样式为网页赋予生命——WEB开发系列28_前端_16

这段代码同时设置了字体样式为斜体、字体粗细为粗体、字体大小为 16px、行高为 1.5、字体家族为 Arial 或系统默认无衬线字体。

三、为列表添加样式

1. 列表间距

使用 margin 和 padding 属性来调整列表项之间的间距。例如：

ul {
  padding-left: 20px; /* 列表项左侧内边距 */
}

li {
  margin-bottom: 10px; /* 列表项底部外边距 */
}

2. 列表特定样式

符号样式

list-style-type 属性设置列表项的符号样式：

ul {
  list-style-type: square; /* 方形符号 */
}

项目符号位置

list-style-position 属性设置列表项符号的位置：

ul {
  list-style-position: inside; /* 符号位于列表项内容区域内 */
}

使用自定义的项目符号图片

list-style-image 属性允许你使用自定义图像作为列表符号：

ul {
  list-style-image: url('custom-icon.png');
}

list-style 简写

list-style 属性是一个简写属性，可以同时设置符号样式、符号位置和自定义图像。例如：

ul {
  list-style: square inside url('custom-icon.png');
}

3. 管理列表计数

start

list-style-type 属性中的 start 值允许你设置有序列表的起始数字：

ol {
  list-style-type: decimal;
  counter-reset: list 5; /* 从数字 5 开始 */
}

reversed

reversed 属性使有序列表倒序排列：

ol {
  list-style-type: decimal;
  list-style: reversed;
}

value

value 属性允许你指定有序列表的起始值：

ol {
  counter-reset: list 10; /* 从数字 10 开始 */
}

下面我们将上述的属性综合起来用一个例子展示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表样式示例</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }

  /* 无序列表样式 */
  ul.custom-list {
    padding-left: 20px; /* 列表项左侧内边距 */
    list-style: square inside url('custom-icon.png'); /* 使用自定义图像和方形符号 */
  }

  ul.custom-list li {
    margin-bottom: 10px; /* 列表项底部外边距 */
  }

  /* 有序列表样式 */
  ol.custom-ordered-list {
    padding-left: 20px;
    list-style-type: decimal; /* 十进制数字 */
    counter-reset: list 5; /* 从数字 5 开始 */
  }

  ol.custom-ordered-list.reversed {
    list-style-type: decimal;
    list-style: reversed; /* 倒序排列 */
  }

  ol.custom-ordered-list .item {
    margin-bottom: 10px; /* 列表项底部外边距 */
  }

  .container {
    margin: 20px;
  }
</style>
</head>
<body>
  <div class="container">
    <h2>无序列表样式</h2>
    <ul class="custom-list">
      <li>项目一</li>
      <li>项目二</li>
      <li>项目三</li>
    </ul>

    <h2>有序列表样式</h2>
    <ol class="custom-ordered-list">
      <li class="item">第一项</li>
      <li class="item">第二项</li>
      <li class="item">第三项</li>
    </ol>

    <h2>倒序有序列表样式</h2>
    <ol class="custom-ordered-list reversed">
      <li class="item">第一项</li>
      <li class="item">第二项</li>
      <li class="item">第三项</li>
    </ol>
  </div>
</body>
</html>

借助文本样式为网页赋予生命——WEB开发系列28_文本样式_17

四、样式化链接

1. 链接状态

使用 :link、:visited、:hover 和 :active 伪类来样式化链接的不同状态：

a:link {
  color: blue; /* 未访问链接的颜色 */
}

a:visited {
  color: purple; /* 已访问链接的颜色 */
}

a:hover {
  color: red; /* 悬停时的颜色 */
}

a:active {
  color: orange; /* 激活时的颜色 */
}

2. 链接中包含图标

可以使用 ::before 伪元素在链接前添加图标：

a::before {
  content: url('icon.png');
  margin-right: 5px;
}

3. 样式化链接为按钮

通过 CSS 可以将链接样式化为按钮：

a.button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: white;
  background-color: #007bff;
  text-align: center;
  border-radius: 5px;
  text-decoration: none;
}

a.button:hover {
  background-color: #0056b3;
}

下面我们将上述的属性综合起来用一个例子展示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接样式示例</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }

  /* 链接状态样式 */
  a:link {
    color: blue; /* 未访问链接的颜色 */
    text-decoration: none;
  }

  a:visited {
    color: purple; /* 已访问链接的颜色 */
  }

  a:hover {
    color: red; /* 悬停时的颜色 */
    text-decoration: underline;
  }

  a:active {
    color: orange; /* 激活时的颜色 */
  }

  /* 链接中包含图标 */
  a::before {
    content: url('icon.png');
    margin-right: 5px;
    
  }

  /* 样式化链接为按钮 */
  a.button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: #007bff;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
  }

  a.button:hover {
    background-color: #0056b3;
  }
</style>
</head>
<body>
  <h2>链接样式示例</h2>

  <p>这是一个 <a href="https://blog.51cto.com/wamtar">普通链接</a>。</p>
  <p>这是一个 <a href="https://blog.51cto.com/wamtar" class="button">样式化按钮链接</a>。</p>
  <p>这是一个 <a href="https://blog.51cto.com/wamtar">包含图标的链接</a>。</p>
</body>
</html>

借助文本样式为网页赋予生命——WEB开发系列28_css3_18


五、Web 字体

1. Web 字体的使用

Web 字体允许你使用自定义字体，而不是依赖用户的系统字体。使用在线字体服务（如 Google Fonts）是实现这一功能的常见方法。

例如，通过 Google Fonts 引入字体：

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">

2. @font-face 的使用

@font-face 规则允许你定义自定义字体并在网页上使用它们：

@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff');
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

这段代码定义了一个名为 MyCustomFont 的字体，并在 body 元素中应用了它。src 属性指定了字体文件的位置和格式。

六、综合练习

题 1: 创建一个详细的网页设计

任务描述

创建一个网页，展示一个含有标题、描述、按钮、列表和链接的内容。使用 CSS 样式化这些元素，并确保它们在页面上美观且易于阅读。包括以下要求：

  1. 使用自定义字体和 Web 字体。
  2. 设置文本样式，包括字体、颜色、大小、行高、阴影等。
  3. 样式化有序和无序列表，包括自定义符号和列表间距。
  4. 样式化链接为按钮，并添加悬停效果。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合练习题</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
<style>
  body {
    font-family: 'Roboto', sans-serif;
    background-color: #f0f0f0;
    color: #333;
    margin: 0;
    padding: 20px;
  }

  h1 {
    font-size: 2.5rem;
    color: #007bff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  }

  p {
    font-size: 1rem;
    line-height: 1.6;
  }

  .button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: #007bff;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 10px;
  }

  .button:hover {
    background-color: #0056b3;
  }

  ul {
    list-style: circle;
    padding-left: 20px;
  }

  ol {
    list-style-type: decimal;
    padding-left: 20px;
  }

  li {
    margin-bottom: 10px;
  }

  a {
    color: #007bff;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }
</style>
</head>
<body>
  <h1>欢迎来到一条晒干的咸鱼的博客</h1>
  <p>这是一个示例页面，展示了如何使用 CSS 样式化文本和其他元素。下面是一些列表和链接的示例：</p>
  
  <a href="#" class="button">点击这里</a>

  <h2>无序列表：</h2>
  <ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
  </ul>

  <h2>有序列表：</h2>
  <ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
  </ol>

  <p>更多信息，请访问 <a href="#">此链接</a>。</p>
</body>
</html>

借助文本样式为网页赋予生命——WEB开发系列28_布局_19

练习题 2: 制作一个产品展示卡片

任务描述

创建一个产品展示卡片，包含产品图片、标题、描述、价格和一个购买按钮。使用 CSS 为卡片添加样式，包括背景、边框、阴影和字体样式。确保卡片在不同设备上都有良好的显示效果。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产品展示卡片</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
<style>
  .card {
    width: 300px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    margin: 20px auto;
    text-align: center;
    font-family: 'Roboto', sans-serif;
  }

  .card img {
    width: 100%;
    height: auto;
  }

  .card-body {
    padding: 15px;
  }

  .card-title {
    font-size: 1.5rem;
    color: #333;
    margin: 0;
  }

  .card-description {
    font-size: 1rem;
    color: #666;
    margin: 10px 0;
  }

  .card-price {
    font-size: 1.25rem;
    color: #007bff;
    margin: 10px 0;
  }

  .card-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    text-decoration: none;
  }

  .card-button:hover {
    background-color: #0056b3;
  }
</style>
</head>
<body>
  <div class="card">
    <img src="product.gif" alt="Product Image">
    <div class="card-body">
      <h2 class="card-title">产品名称</h2>
      <p class="card-description">这是一个产品的描述，简要介绍产品的主要特性和优点。</p>
      <p class="card-price">￥99.99</p>
      <a href="#" class="card-button">立即购买</a>
    </div>
  </div>
</body>
</html>

借助文本样式为网页赋予生命——WEB开发系列28_文本样式_20

借助文本样式为网页赋予生命——WEB开发系列28_前端_21

如有表述错误及欠缺之处敬请批评指正。