CSS 中的版式和字体样式-css教程-PHP中文网

CSS 中的版式和字体样式

PHPz

发布： 2024-09-04 11:04:28

转载

945人浏览过

css 中的版式和字体样式

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

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

了解网页字体

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

1.系统字体

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

示例：

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

登录后复制

2.谷歌字体

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

立即学习“前端免费学习笔记（深入）”；

示例：

首先，在 html <head> 中包含字体链接：

 <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.字体样式

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

ecshop仿万表网商城整站

该软件是以ecshop作为核心的仿制万表网的商场网站源码。万表网模板 2015最新版整体简洁大气，功能实用，是一款时尚典雅的综合类模板！样式精美的商品分类树，层次分明，分类结构一目了然。首页轮播主广告分别对应切换小广告，商品宣传更到位。独家特色增加顶级频道页面、品牌页面，以及仿京东对比功能，提升网站档次，让您的网站更加高端大气！并且全站采用div+css布局，兼容性良好，更注重页面细节，增加多种j

查看详情

示例：

  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;
}

登录后复制

在此示例中：