讲座 4：css 中的版式和字体样式
在本次讲座中，我们将探讨如何使用 css 设置文本样式。版式是网页设计的一个重要方面，影响可读性、用户体验和整体美观。在本讲座结束时，您将了解如何在网站上应用各种字体样式并控制文本外观。
了解网页字体
网络字体允许您在网站上使用各种字体。您可以使用设备上预装的系统字体，也可以使用 google fonts 等服务导入自定义字体。
1.系统字体
系统字体是可靠的，因为它们预装在大多数设备上，但它们限制了您的设计选项。
- 示例：
body {
font-family: arial, sans-serif;
}
2.谷歌字体
google fonts 提供多种网络字体供您选择，您可以轻松地将它们集成到您的网站中。
立即学习“前端免费学习笔记（深入）”；
-
示例：
- 首先，在 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 以小写字母显示文本。
新版本程序更新主要体现在：完美整合BBS论坛程序，用户只须注册一个帐号，即可全站通用!采用目前流行的Flash滚动切换广告 变换形式多样，受人喜爱!在原有提供的5种在线支付基础上增加北京云网支付!对留言本重新进行编排，加入留言验证码，后台有留言审核开关对购物系统的前台进行了一处安全更新。在原有文字友情链接基础上，增加LOGO友情链接功能强大的6种在线支付方式可选，自由切换。对新闻列表进行了调整，
- 示例：
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 类中应用特殊样式，包括斜体和小型大写字母。
- 内容位于页面中央，具有最大宽度和自动边距。
练习运动
- 创建一个包含各种标题和段落的 html 页面。
- 应用不同的字体属性来设置文本样式。
- 使用 google 字体让您的网页具有独特的外观。
- 尝试文本对齐、装饰和阴影效果。
下一步：在下一讲中，我们将讨论 css 布局：浮动、flexbox 和网格，您将在其中学习如何为以下内容创建复杂且响应式的布局你的网站。请继续关注！
在 linkedin 上关注我
里多伊·哈桑
