【css】基础（二）

本专栏内容为：前端专栏 记录学习前端，分为若干个子专栏，html js css vue等

💓博主csdn个人主页：小小unicorn
⏩专栏分类：css专栏
🚚代码仓库：小小unicorn的代码仓库🚚
🌹🌹🌹关注我带你学习编程知识

目录

  • 字体
    • 字体选择很重要
    • 通用字体族
    • Serif 和 Sans-serif 字体之间的区别
    • CSS font-family 属性
    • 字体样式
    • 字体粗细
    • 字体变体
    • 字体大小
      • 绝对尺寸：
      • 相对尺寸：
      • 以像素设置字体大小
      • 用 em 设置字体大小
      • 使用百分比和 Em 的组合
      • 响应式字体大小
    • 谷歌字体
    • 简写字体属性

字体

为您的网站选择正确的字体很重要！

字体选择很重要

选择正确的字体会对网站的用户体验产生巨大影响。

正确的字体可以为您的品牌创造强有力的形象。

使用易于阅读的字体很重要。字体为您的文本增加了价值。为字体选择正确的颜色和文本大小也很重要。

通用字体族

在 CSS 中，有五个通用字体族：

  • 衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
  • 无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
  • 等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
  • 草书字体（Cursive）- 模仿了人类的笔迹。
  • 幻想字体（Fantasy）- 是装饰性/俏皮的字体。

所有不同的字体名称都属于这五个通用字体系列之一。

Serif 和 Sans-serif 字体之间的区别

在这里插入图片描述
提示：在计算机屏幕上，无衬线字体被认为比衬线字体更易于阅读。

一些字体的例子：
在这里插入图片描述

CSS font-family 属性

在 CSS 中，我们使用 font-family 属性规定文本的字体。

font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。

注释：如果字体名称不止一个单词，则必须用引号引起来，例如：“Times New Roman”。

实例：
为三个段落规定不同的字体：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.p1 {font-family: "Times New Roman", Times, serif;}.p2 {font-family: Arial, Helvetica, sans-serif;}.p3 {font-family: "Lucida Console", "Courier New", monospace;}</style>
</head>
<body><h1>CSS font-family</h1><p>这是一个段落，以 Times New Roman 字体显示：</p><p class="p1">This is a paragraph, shown in the Times New Roman font.</p><p>这是一个段落，以 Arial 字体显示：</p><p class="p2">This is a paragraph, shown in the Arial font.</p><p>这是一个段落，以 Lucida Console 字体显示：</p><p class="p3">This is a paragraph, shown in the Lucida Console font.</p>
</body>
</html>

在这里插入图片描述

字体样式

font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

  • normal - 文字正常显示
  • italic - 文本以斜体显示
  • oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.p1 {font-family: "Times New Roman", Times, serif;}.p2 {font-family: Arial, Helvetica, sans-serif;}.p3 {font-family: "Lucida Console", "Courier New", monospace;}/* 正常显示 */p.normal{font-style: normal;}/* 斜体显示 */p.italic{font-style: italic;}/* 倾斜显示 */p.oblique{font-style: oblique;}</style>
</head>
<body><h1>CSS font-family</h1><p>这是一个段落，以 Times New Roman 字体显示：</p><p class="p1">This is a paragraph, shown in the Times New Roman font.</p><p>这是一个段落，以 Arial 字体显示：</p><p class="p2">This is a paragraph, shown in the Arial font.</p><p>这是一个段落，以 Lucida Console 字体显示：</p><p class="p3">This is a paragraph, shown in the Lucida Console font.</p><p class="normal">This is a paragraph in normal style.</p><p class="italic">This is a paragraph in italic style.</p><p class="oblique">This is a paragraph in oblique style.</p>
</body>
</html>

在这里插入图片描述

字体粗细

font-weight 属性指定字体的粗细：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.p1 {font-family: "Times New Roman", Times, serif;}.p2 {font-family: Arial, Helvetica, sans-serif;}.p3 {font-family: "Lucida Console", "Courier New", monospace;}/* 正常显示 */p.normal{font-style: normal;}/* 斜体显示 */p.italic{font-style: italic;}/* 倾斜显示 */p.oblique{font-style: oblique;}/* 正常 */p.normal {font-weight: normal;}细p.light {font-weight: lighter;}粗p.thick {font-weight: bold;}p.thicker {font-weight: 900;}</style>
</head>
<body><h1>CSS font-family</h1><p>这是一个段落，以 Times New Roman 字体显示：</p><p class="p1">This is a paragraph, shown in the Times New Roman font.</p><p>这是一个段落，以 Arial 字体显示：</p><p class="p2">This is a paragraph, shown in the Arial font.</p><p>这是一个段落，以 Lucida Console 字体显示：</p><p class="p3">This is a paragraph, shown in the Lucida Console font.</p><p class="normal">This is a paragraph in normal style.</p><p class="italic">This is a paragraph in italic style.</p><p class="oblique">This is a paragraph in oblique style.</p><p class="normal">This is a paragraph.</p><p class="light">This is a paragraph.</p><p class="thick">This is a paragraph.</p><p class="thicker">This is a paragraph.</p>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

字体变体

font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。

在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.p1 {font-family: "Times New Roman", Times, serif;}.p2 {font-family: Arial, Helvetica, sans-serif;}.p3 {font-family: "Lucida Console", "Courier New", monospace;}/* 正常显示 */p.normal{font-style: normal;}/* 斜体显示 */p.italic{font-style: italic;}/* 倾斜显示 */p.oblique{font-style: oblique;}/* 正常 */p.normal {font-weight: normal;}p.light {font-weight: lighter;}p.thick {font-weight: bold;}p.thicker {font-weight: 900;}p.normal1 {font-variant: normal;}p.small1 {font-variant: small-caps;}</style>
</head>
<body><h1>CSS font-family</h1><p>这是一个段落，以 Times New Roman 字体显示：</p><p class="p1">This is a paragraph, shown in the Times New Roman font.</p><p>这是一个段落，以 Arial 字体显示：</p><p class="p2">This is a paragraph, shown in the Arial font.</p><p>这是一个段落，以 Lucida Console 字体显示：</p><p class="p3">This is a paragraph, shown in the Lucida Console font.</p><p class="normal">This is a paragraph in normal style.</p><p class="italic">This is a paragraph in italic style.</p><p class="oblique">This is a paragraph in oblique style.</p><p class="normal">This is a paragraph.</p><p class="light">This is a paragraph.</p><p class="thick">This is a paragraph.</p><p class="thicker">This is a paragraph.</p><p class="normal1">My name is Bill Gates.</p><p class="small1">My name is Bill Gates.</p>
</body>
</html>

在这里插入图片描述

字体大小

font-size 属性设置文本的大小。

在网页设计中，能够管理文本大小很重要。但是，不应使用调整字体大小来使段落看起来像标题，或是使标题看起来像段落。

请始终使用正确的 HTML 标签，例如<h1> - <h6>用于标题，而 <p> 仅用于段落。

font-size 值可以是绝对或相对大小。

绝对尺寸：

  • 将文本设置为指定大小
  • 不允许用户在所有浏览器中更改文本大小（可访问性不佳）
  • 当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸：

  • 设置相对于周围元素的大小
  • 允许用户在浏览器中更改文本大小

注释：如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。

以像素设置字体大小

使用像素设置文本大小可以完全控制文本大小：

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1 {font-size: 40px;}h2 {font-size: 30px;}p {font-size: 14px;}</style>
</head>
<body><h1>这是标题 1</h1><h2>这是标题 2</h2><p>这是一个段落。</p><p>这是另一个段落。</p>
</body>
</html>

在这里插入图片描述
提示：如果您使用了像素，则仍然可以使用缩放工具来调整整个页面的大小。

用 em 设置字体大小

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。

W3C 建议使用 em 尺寸单位。

1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* h1 { *//* font-size: 40px;}h2 {font-size: 30px;}p {font-size: 14px;} */h1 {font-size: 2.5em; /* 40px/16=2.5em */}h2 {font-size: 1.875em; /* 30px/16=1.875em */}p {font-size: 0.875em; /* 14px/16=0.875em */}</style>
</head>
<body><h1>这是标题 1</h1><h2>这是标题 2</h2><p>这是一个段落。</p><p>这是另一个段落。</p><h1>这是标题 1</h1><h2>这是标题 2</h2><p>这是一个段落。</p><p>用 em 设置字体大小允许所有主要浏览器调整文本大小。不幸的是，旧版本的 IE 仍然存在问题。在调整文本大小时，会变得比原来更大或更小。</p>
</body>
</html>

在上例中，em 单位的文本大小与上一个例子中的像素大小相同。但是，若使用 em 尺寸，则可以在所有浏览器中调整文本大小。

不幸的是，旧版本的Internet Explorer仍然存在问题。放大文本时它比应该大的尺寸更大，缩小文本时会更小。
在这里插入图片描述

使用百分比和 Em 的组合

<!DOCTYPE html>
<html>
<head>
<style>
body {font-size: 100%;
}h1 {font-size: 2.5em;
}h2 {font-size: 1.875em;
}
p {font-size: 0.875em;
}
</style>
</head>
<body><h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是一个段落。</p>
<p>以 ％ 和 em 中设置字体大小会在所有主要浏览器中显示相同的大小，并允许所有浏览器调整文本大小！</p>
</body>
</html>

在这里插入图片描述
我们的代码目前运行良好！它在所有浏览器中显示相同的文本大小，并允许所有浏览器缩放或调整文本大小！

响应式字体大小

可以使用 vw 单位设置文本大小，它的意思是“视口宽度”（“viewport width”）。

这样，文本大小将遵循浏览器窗口的大小，请调整浏览器窗口的大小，以查看字体大小如何缩放：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head>
<body><h1 style="font-size:10vw;">响应式文本</h1><p style="font-size:5vw;">请调整浏览器窗口的大小，以查看文本大小如何缩放。</p><p style="font-size:5vw;">调整文本大小时，请使用 "vw" 单位。 10vw 将尺寸设置为视口宽度的 10％。</p><p>视口是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。</p></body>
</html>

在这里插入图片描述
视口（Viewport）是浏览器窗口的大小。1vw= 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。

谷歌字体

如果您不想使用 HTML 中的任何标准字体，则可以使用Google Fonts API向页面添加数百种其他字体。

只需添加一个样式表链接并引用您选择的字体系列：
示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia"><style>body {font-family: "Sofia";font-size: 22px;}</style>
</head>
<body><h1 style="font-size:0.5vw;">响应式文本</h1><p style="font-size:5vw;">请调整浏览器窗口的大小，以查看文本大小如何缩放。</p><p style="font-size:5vw;">调整文本大小时，请使用 "vw" 单位。 10vw 将尺寸设置为视口宽度的 10％。</p><p>视口是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。</p><h1>Sofia Font</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</body>
</html>

在这里插入图片描述

简写字体属性

字体属性
为了缩短代码，也可以在一个属性中指定所有单个字体属性。

font 属性是以下属性的简写属性：

使用简写声明设置一些字体属性：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia"><style>/* body {font-family: "Sofia";font-size: 22px;} */p.a {font: 20px Arial, sans-serif;}p.b {font: italic bold 12px/30px Georgia, serif;}</style>
</head>
<body><!-- <h1 style="font-size:0.5vw;">响应式文本</h1><p style="font-size:5vw;">请调整浏览器窗口的大小，以查看文本大小如何缩放。</p><p style="font-size:5vw;">调整文本大小时，请使用 "vw" 单位。 10vw 将尺寸设置为视口宽度的 10％。</p><p>视口是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。</p><h1>Sofia Font</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> --><h1>字体属性</h1><p class="a">这是一个段落 字体大小设置为20px, 字体为： Arial.</p><p class="b">这是一个段落. 字体设置为斜体并且粗, 大小为12px, 高度为30px, 字体为：Georgia.</p>
</body>
</html>

在这里插入图片描述
注意：font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/35862.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

2024通信工程师-中级-互联网技术备考经验

2024通信工程师-中级-互联网技术备考经验

考试简介 全国通信专业技术人员职业水平考试&#xff0c;是由国家人力资源和社会保障部、工业和信息化部领导下的国家级考试。根据原人事部、信息产业部文件&#xff08;国人部发[2006]10号&#xff09;&#xff0c;通信专业技术人员职业水平评价&#xff0c;纳入全国专业技术人…
阅读更多...
智能文档解析综述：结构化信息提取的技术、挑战与前景

智能文档解析综述：结构化信息提取的技术、挑战与前景

综述论文&#xff1a;https://arxiv.org/abs/2410.21169 摘要 文档解析对于将非结构化和半结构化文档&#xff08;如合同、学术论文和发票&#xff09;转换为结构化、机器可读的数据至关重要。通过从非结构化输入中提取可靠的结构化数据&#xff0c;文档解析为众多应用提供了极…
阅读更多...
【Web】AlpacaHack Round 7 (Web) 题解

【Web】AlpacaHack Round 7 (Web) 题解

Treasure Hunt flag在md5值拼接flagtxt的文件里&#xff0c;如 d/4/1/d/8/c/d/9/8/f/0/0/b/2/0/4/e/9/8/0/0/9/9/8/e/c/f/8/4/2/7/e/f/l/a/g/t/x/t 访问已经存在的目录状态码是301 访问不存在的目录状态码是404 基于此差异可以写爆破脚本 这段waf可以用url编码绕过 做个lab …
阅读更多...
操作系统——文件系统

操作系统——文件系统

笔记内容及图片整理自XJTUSE “操作系统” 课程ppt&#xff0c;仅供学习交流使用&#xff0c;谢谢。 文件系统是操作系统中以文件方式管理计算机软件资源的软件和被管理的文件和数据结构&#xff08;如目录和索引表等&#xff09;的集合。从系统角度来看&#xff0c;文件系统是…
阅读更多...
java面向对象实验——扫雷+24点

java面向对象实验——扫雷+24点

扫雷 窗口绘制&#xff1a; GameWin package com.sxt;import javax.swing.*;public class GameWin extends JFrame {void launch(){this.setVisible(true);this.setSize(500, 500);this.setLocationRelativeTo(null);this.setTitle("SWE23070扫雷游戏");this.setD…
阅读更多...
GPU 调度策略架构与CUDA运行机制（二）

GPU 调度策略架构与CUDA运行机制（二）

市面上有很多GPU厂家&#xff0c;他们产品的软硬件架构各不相同&#xff0c;但是核心往往差不多&#xff0c;整明白了一个基本上就可以触类旁通了。针对当前gpu底层的一些架构以及硬件层一些调度策略的话估计大部分人就很难说的上熟悉了&#xff0c;这个不是大家的错&#xff0…
阅读更多...
ddos攻击防御的方法有哪些

ddos攻击防御的方法有哪些

DDoS攻击&#xff0c;即分布式拒绝服务攻击(Distributed Denial of Service)&#xff0c;是一种恶意的网络攻击方式&#xff0c;旨在通过发送大量流量或请求到目标服务器、服务或网络&#xff0c;使其资源耗尽&#xff0c;无法处理合法用户的请求&#xff0c;从而导致服务中断或…
阅读更多...
Python + Playwright：集成 Applitools 进行视觉回归测试（快速入门）

Python + Playwright：集成 Applitools 进行视觉回归测试（快速入门）

集成 Applitools 进行视觉回归测试（快速入门） 简介Applitools 的核心特点Applitools 的应用场景1. 准备工作2. 获取示例项目2.1 下载示例代码2.2 安装依赖2.3 选择测试运行方式3. 代码解析3.1 测试用例示例4. 运行测试4.1 设置 Applitools API 变量4.2 设置 Applitools Eyes …
阅读更多...
RuoYi中数据分页功能实现的步骤（nvliz）

RuoYi中数据分页功能实现的步骤（nvliz）

目录 前言 数据分页的作用 RuoYi中的实现步骤 前端的显示界面(实例介绍) 源码分析&#xff08;前端&#xff09; Pagination&#xff08;分页组件&#xff09;介绍 前端&#xff1a;getList()(方法源码分析) 源码分析&#xff08;后端&#xff09; 后端&#xff1a;List()…
阅读更多...
HarmonyOS 5.0应用开发——全局广播的使用

HarmonyOS 5.0应用开发——全局广播的使用

【高心星出品】 文章目录 全局广播的使用公共事件接受系统公共事件原理 发布与订阅自定义公共事件订阅系统事件 全局广播的使用 全局广播可以用来做应用间通信&#xff0c;进程间通信&#xff0c;包含订阅、发布等功能。 公共事件 CES&#xff08;Common Event Service&…
阅读更多...
ceph存储池

ceph存储池

1、存储池 1、存储池的概念 存储池就是ceph的逻辑分区&#xff0c;专门用来存储对象的 特点 将文件切片成对象&#xff0c;通过hash算法&#xff0c;找到存储池中的pg&#xff0c;池中的pg根据crush算法找到osd节点 存储中的PG数量对性能有重要的影响&#xff0c;过多和过少…
阅读更多...
Ollama记录

Ollama记录

先在官网下载Ollama 模型下载 ollama run qwen2:0.5b 可以快速部署很多模型 方便 可以替换openai api key from openai import OpenAIclient OpenAI(base_url https://127.0.0.1:11434/v1,api_keyollama, # required, but unused )response client.chat.completions.…
阅读更多...
锻造船用发动机动力系统，铸强船舶“心脏”

锻造船用发动机动力系统，铸强船舶“心脏”

船舶是海洋、湖泊及河流中重要的水上交通工具&#xff0c;不仅能够促进海上经济的发展&#xff0c;还能够保卫国家的制海权。船舶动力装置&#xff0c;也就是船舶的核心动力源——船用发动机动力系统对船舶的重要作用不言自明&#xff0c;关系到船舶的性能质量&#xff0c;能够…
阅读更多...
LIN状态管理

LIN状态管理

文章目录 前言一、状态管理二、实现过程三、response_error信号的变化条件四、节点内部报告五、测试应用方式1&#xff1a;LIN ISC方式2&#xff1a;CAPL脚本方式 前言 在LIN专栏的文章中&#xff0c;我们介绍了 LIN的网络管理&#xff1a;LIN网络管理&#xff1a;休眠&唤…
阅读更多...
云帆在线学习考试系统对国产化数据库的支持情况说明

云帆在线学习考试系统对国产化数据库的支持情况说明

云帆在线学习考试系统对国产化数据库的支持情况说明 云帆学习考试系统是一款优秀的学习和考试系统&#xff01;多年以来一直深耕在线教育板块&#xff0c;积累了丰富的行业经验&#xff0c;多年来的产品和技术沉淀&#xff0c;服务了众多政府机构、知名高校、企事业单位。 今…
阅读更多...
反向传播算法中的误差项

反向传播算法中的误差项

背景 在反向传播算法中&#xff0c;我们需要计算每个神经元的误差项&#xff0c;以便更新网络中的权重。对于输出层的神经元&#xff0c;误差项的计算公式如下&#xff1a; 其中&#xff1a; E是损失函数&#xff08;例如均方误差&#xff09;。 zk 是输出层神经元的加权输入&a…
阅读更多...
如何高效整合金蝶云星辰采购入库单与聚水潭系统

如何高效整合金蝶云星辰采购入库单与聚水潭系统

星辰-采购入库单集成到聚水潭的技术实现 在企业信息化管理中&#xff0c;数据的高效流转和准确对接至关重要。本文将分享一个实际案例&#xff1a;如何通过轻易云数据集成平台&#xff0c;将金蝶云星辰V2系统中的采购入库单数据无缝集成到聚水潭系统中&#xff0c;实现业务流程…
阅读更多...
Uniapp的App环境下使用Map获取缩放比例

Uniapp的App环境下使用Map获取缩放比例

概述 目前我试过的就是你用vue后缀是拿不到比例的你可以用nvue当然uniapp的uvue应该是更加可以的我使用的是高德所以你得在高德的后台声请原生的Android的key才可以如果是vue3的开发模式的话不用使用this来获取当前对象使用scale对象来接受和改变缩放比例会比较友好然后直接走…
阅读更多...
C++入门项目：Linux下C++轻量级Web服务器 项目详解（小白篇）

C++入门项目：Linux下C++轻量级Web服务器 项目详解（小白篇）

拿到一个项目首先先跑通&#xff0c;然后再慢慢来看代码&#xff0c;关于怎么将这个项目跑通&#xff0c;上一篇已经讲过&#xff0c;感兴趣的小伙伴可以移步下面的链接&#xff0c;或者其他博主的教程。 C入门项目&#xff1a;Linux下C轻量级Web服务器 跑通|运行|测试&#xf…
阅读更多...
计网408考点讲解

计网408考点讲解

IPv4
阅读更多...
最新文章

Copyright @ 2022~2023