讲座 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 以小写字母显示文本。
示例：
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 上关注我
里多伊·哈桑
以上就是CSS 中的版式和字体样式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1629747.html
微信扫一扫 
支付宝扫一扫 
