当前位置：首页 > 文章列表 > 文章 > 前端 > CSS 中的版式和字体样式

CSS 中的版式和字体样式

来源：dev.to 2024-09-03 14:09:50 0浏览收藏

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

CSS 中的版式和字体样式

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

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

了解网页字体

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

1.系统字体

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

示例：

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

2.谷歌字体

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

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

然后，在 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;
}

在此示例中：