讲座 4：css 中的版式和字体样式
在本次讲座中，我们将探讨如何使用 css 设置文本样式。版式是网页设计的一个重要方面，影响可读性、用户体验和整体美观。在本讲座结束时，您将了解如何在网站上应用各种字体样式并控制文本外观。
了解网页字体
网络字体允许您在网站上使用各种字体。您可以使用设备上预装的系统字体，也可以使用 google fonts 等服务导入自定义字体。
1.系统字体
系统字体是可靠的，因为它们预装在大多数设备上，但它们限制了您的设计选项。
- 示例：
body {
font-family: arial, sans-serif;
}
2.谷歌字体
google fonts 提供多种网络字体供您选择，您可以轻松地将它们集成到您的网站中。
-
示例：
- 首先，在 html 中包含字体链接：
<link href="https://fonts.googleapis.com/css2?family=roboto:wght@400;700&display=swap" rel="stylesheet">
-
然后，在 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：
<div class="content"> <h1>welcome to our blog</h1> <h2>latest updates</h2> <p class="intro">stay updated with the latest trends in web development, design, and more.</p> <p>explore articles, tutorials, and resources to help you master the art of web design.</p> </div>
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 类中应用特殊样式，包括斜体和小型大写字母。
- 内容位于页面中央，具有最大宽度和自动边距。
练习运动
- 创建一个包含各种标题和段落的 html 页面。
- 应用不同的字体属性来设置文本样式。
- 使用 google 字体让您的网页具有独特的外观。
- 尝试文本对齐、装饰和阴影效果。
下一步：在下一讲中，我们将讨论 css 布局：浮动、flexbox 和网格，您将在其中学习如何为以下内容创建复杂且响应式的布局你的网站。请继续关注！
在 linkedin 上关注我
里多伊·哈桑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
