目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《CSS 中的版式和字体样式》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

讲座 4：css 中的版式和字体样式

在本次讲座中，我们将探讨如何使用 css 设置文本样式。版式是网页设计的一个重要方面，影响可读性、用户体验和整体美观。在本讲座结束时，您将了解如何在网站上应用各种字体样式并控制文本外观。

---

了解网页字体

网络字体允许您在网站上使用各种字体。您可以使用设备上预装的系统字体，也可以使用 google fonts 等服务导入自定义字体。

1.系统字体

系统字体是可靠的，因为它们预装在大多数设备上，但它们限制了您的设计选项。

• 示例：

  body {
    font-family: arial, sans-serif;
  }

2.谷歌字体

google fonts 提供多种网络字体供您选择，您可以轻松地将它们集成到您的网站中。

• 示例：

  1. 首先，在 html 中包含字体链接：

1. 然后，在 css 中应用字体：
   

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

css 中的字体属性

css 提供了多种属性来设置字体样式，包括字体大小、粗细、样式等等。

1.字体大小

您可以使用 font-size 属性控制文本的大小。

• 示例：

  h1 {
    font-size: 36px;
  }
  p {
    font-size: 16px;
  }

2.字体粗细

font-weight 属性允许您设置文本显示的粗体程度。

• 示例：

  h1 {
    font-weight: bold; /* or use numeric values like 700 */
  }

3.字体样式

字体样式属性可让您将文本设置为斜体。

• 示例：

  em {
    font-style: italic;
  }

4.字体变体

使用 font-variant 以小写字母显示文本。

• 示例：

  p.caps {
    font-variant: small-caps;
  }

5.行高

line-height 属性控制文本行之间的间距。

• 示例：

  p {
    line-height: 1.5;
  }

6.文本对齐

text-align 属性控制元素内文本的水平对齐方式。

• 示例：

  h1 {
    text-align: center;
  }

7.文字装饰

text-decoration 属性允许您向文本添加下划线、上划线或删除线。

• 示例：

  a {
    text-decoration: underline;
  }

8.文字阴影

您可以使用 text-shadow 属性为文本添加阴影效果。

• 示例：

  h2 {
    text-shadow: 2px 2px 5px gray;
  }

实际示例：

让我们结合这些属性来设计网页样式，重点关注排版。

html：

  
welcome to our blog
  
latest updates
  
stay updated with the latest trends in web development, design, and more.
  
explore articles, tutorials, and resources to help you master the art of web design.

css：

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  line-height: 1.6;
}

/* Heading Styles */
h1 {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  text-shadow: 2px 2px 4px #aaa;
}

h2 {
  font-size: 28px;
  font-weight: 700;
  margin-top: 20px;
}

/* Paragraph Styles */
p {
  font-size: 18px;
  margin-bottom: 15px;
}

.intro {
  font-style: italic;
  font-variant: small-caps;
  text-align: justify;
}

/* Centering the content */
.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

在此示例中：

• 所有文本均使用 google 字体“open sans”。
• 标题（h1、h2）采用特定的字体大小、粗细和文本阴影进行样式设置。
• 段落采用标准字体大小，并在 .intro 类中应用特殊样式，包括斜体和小型大写字母。
• 内容位于页面中央，具有最大宽度和自动边距。

练习运动

1. 创建一个包含各种标题和段落的 html 页面。
2. 应用不同的字体属性来设置文本样式。
3. 使用 google 字体让您的网页具有独特的外观。
4. 尝试文本对齐、装饰和阴影效果。

---

下一步：在下一讲中，我们将讨论 css 布局：浮动、flexbox 和网格，您将在其中学习如何为以下内容创建复杂且响应式的布局你的网站。请继续关注！

---

在 linkedin 上关注我
里多伊·哈桑

本篇关于《CSS 中的版式和字体样式》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！