CSS教程(四)- 字体
1、尺寸单位
- px 像素单位
- % 百分比,参照父元素对应属性的值进行计算
- em 字体尺寸单位,参照父元素的字体大小计算,1em=16px
- rem字体尺寸单位,参照根元素的字体大小计算,1rem=16px
2、字体属性
-
介绍
- CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。
-
语法
选择器{font-family: "字体" }选择器{font-family: "字体1", "字体2", "..."; } -
说明
- 字体之间必须使用 英文状态下的逗号隔开,字体加引号
- 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
- 最常见的几个字体:body {font-family: ‘Microsoft YaHei’, ‘tahoma,arial’, ‘Hiragino Sans GB’; }
3、字体大小
-
语法
选择器{font-size: xx px; } -
说明
- 谷歌浏览器默认的文字大小为16px(网页的最常用的单位 )
- 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
- 可以给 body 指定整个页面文字的大小
4、字体粗细
-
语法
选择器{font-weight: bold; /* 取值: normal(默认值)、bold(加粗)、100-900*/ } -
说明
- 400等同于normal,700等同于bold,注意数值后不跟单位
- 400等同于normal,700等同于bold,注意数值后不跟单位
5、字体样式
-
语法
选择器{font-style: normal; /* 取值: normal(默认值)、italic(倾斜)*/ } -
说明
- 很少给文字加斜体,反而要给斜体标签(em,i)改为不倾斜字体。
- 很少给文字加斜体,反而要给斜体标签(em,i)改为不倾斜字体。
6、字体复合属性
-
语法
选择器{font: font-style font-weight font-size/line-height font-family; } -
说明
- 使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
- 不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用
7、示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>字体设置</title><style>/* 在body标签中统一设置字体大小 */body {font-size: 18px;}span {font-style: italic;font-size: 30px;font-weight: 700;font-family: "华文琥珀";}.sp1 {/* 针对font的综合写法 *//* font: normal 600 20px/1.5 "华文行楷"; */font: 30px/1.5 "华文行楷"; /* 字体大小、字体不能省略*/}</style></head><body><span>国庆假期后,再无假期,wuwu</span><br /><span class="sp1">国庆假期后,一定要好好学习</span></body>
</html>

8、总结
| 属性 | 表示 | 注意点 |
|---|---|---|
| font-size | 字号 | 通常用 px像素为单位,必须要写单位 |
| font-family | 字体 | 按照项目设计来选择字体 |
| font-weight | 字体粗细 | 加粗为700或bold、不加粗是normal或400,数字不能跟单位 |
| font-style | 字体样式 | 倾斜式 italic,不倾斜为 normal(常用) |
| font | 字体连写 | 1、字体连写必须按照顺序 2、字号 与 字体 必须同时出现 |
相关文章:
CSS教程(四)- 字体
1、尺寸单位 px 像素单位% 百分比,参照父元素对应属性的值进行计算em 字体尺寸单位,参照父元素的字体大小计算,1em16pxrem字体尺寸单位,参照根元素的字体大小计算,1rem16px 2、字体属性 介绍 CSS Fonts (字体)属性用于定义字体…...
深入理解Java中的Lambda表达式
在Java 8中,Lambda表达式的引入无疑是一个重大的里程碑。 Lambda表达式以其简洁的语法和强大的功能,极大地改变了Java开发者编写代码的方式。本文将深入探讨Lambda表达式的概念、语法、使用场景以及其在函数式编程中的意义。 一、Lambda表达式的基本概…...
C#里怎么样判断一个数是偶数还是奇数
一般是采用取余的做法。 程序如下: /** C# Program to Check whether the Entered Number is Even or Odd*/ using System; using System.Collections.Generic; using System.Linq; using System.Text;namespace check1 {class Program{static void Main(string[]…...
【论文笔记】Prefix-Tuning: Optimizing Continuous Prompts for Generation
🍎个人主页:小嗷犬的个人主页 🍊个人网站:小嗷犬的技术小站 🥭个人信条:为天地立心,为生民立命,为往圣继绝学,为万世开太平。 基本信息 标题: Prefix-Tuning: Optimizin…...
GNN系统学习:消息传递图神经网络
引言 在开篇中我们介绍了,为节点生成节点表征(Node Representation)是图计算任务成功的关键,我们要利用神经网络来学习节点表征。 消息传递范式是一种聚合邻接节点信息来更新中心节点信息的范式,它将卷积算子推广到了…...
基于gewe制作第一个微信聊天机器人
现在我们制作一个微信智能聊天机器人。发送文字它可以回复一段话,或一张图片,是不是有点小酷! 当然,这种智能回复的算法和数据库我们自己肯定是没有的,所以我们借助于gewe框架的开放API接口来完成我们的功能。 请求参…...
【Python】python使用Moviepy库对mp3文件进行剪切,并设置输出文件的码率
【Python】python使用Moviepy库对mp3文件进行剪切,设置输出文件的码率 一、安装Moviepy库二、代码 一、安装Moviepy库 pip install -i https://mirrors.aliyun.com/pypi/simple/ moviepy二、代码 #!/usr/bin/python # -*- coding: UTF-8 -*- from moviepy.editor …...
海外云手机在出海业务中的优势有哪些?
随着互联网技术的快速发展,海外云手机已在出海电商、海外媒体推广和游戏行业都拥有广泛的应用。对于国内的出海电商企业来说,短视频引流和社交平台推广是带来有效流量的重要手段。借助云手机,企业能够更高效地在新兴社交平台上推广产品和品牌…...
这10款PDF转Word在线转换工具的个人使用经历!!
身为现代办公室中的一位经常需要处理各种文件格式的牛马,在PDF和Word之间转换文件是我时常要处理的事。我试过不少PDF转Word的在线工具,前前后后尝试了10款左右的PDF转word转换工具,其中有四大霸主,深深占据了我对这方面的印象。下…...
认识QT以及QT的环境搭建
认识QT 什么是QT? Qt 是⼀个 跨平台的 C 图形⽤⼾界⾯应⽤程序框架 。 认识客户端 现在我们所说的客户端开发其实大致分为三种: 1.网页前端开发。 2.桌面应用开发(电脑的应用层序) 3.移动应用开发。 而我们的QT的主战场就是在…...
Rollup failed to resolve import “destr“ from ***/node_modules/pinia-plugin-pers
在使用uni-appvuu3piniapinia-plugin-persistedstate开发中, 使用pinia-plugin-persistedstate 一直在报错,其实代码也是比较简单的, import { createPinia } from pinia // 创建 pinia 实例 const pinia createPinia(); import piniaPlugi…...
Python小白学习教程从入门到入坑------第三十课 文件定位操作(语法进阶)
一、文件指针 python中严格来说没有指针这个说法,但有指针这个用法的体现。指针概念常用于c语言、c语言中 在Python的文件操作中,文件指针(也称为文件游标或文件句柄的位置)是一个内部标记,它指示了当前文件操作的读…...
人工智能、机器学习与深度学习:层层递进的技术解读
引言 在当今科技快速发展的时代,人工智能(AI)已经成为一个热门话题,几乎渗透到了我们生活的方方面面。从智能手机的语音助手,到自动驾驶汽车,再到医疗诊断中的图像识别,人工智能的应用正在改变我…...
Code Inspector——页面开发提效的神器
写在前面 优点: 开发提效:点击页面上的 DOM 元素,它能自动打开 IDE 并将光标定位至 DOM 的源代码位置,大幅提升开发体验和效率简单易用:对源代码无任何侵入,只需要在打包工具中引入就能够生效,…...
如何定制RockyLinux ISO
目标 基于Rocky9官方ISO做定制,构建自己的ISO 可以添加非官方预装的RPM包实现Kickstart自动化安装, 完成分区等操作ISO安装后,可以执行自定义脚本,比如安装你手动添加的RPM包 Rocky9 官方ISO内容分析 挂载Rocky9 ISO,得到如下…...
python基于深度学习的音乐推荐方法研究系统
需求设计 一款好的音乐推荐系统其目的是为用户进行合理的音乐推荐,普通的用户在登录到系统之后,能够通过搜索的方式获取与输入内容相关的音乐推荐,而以管理员登录到系统之后,则可以进行徐昂管的数据管理等内容操作。此次的需求主…...
机器学习系列----介绍前馈神经网络和卷积神经网络 (CNN)
前言 在深度学习领域,神经网络是一种模拟人脑神经元结构和功能的数学模型。它通过大量的层次结构和参数调整来实现模式识别、分类、回归等任务。常见的神经网络结构有前馈神经网络(Feedforward Neural Networks,简称 FNN)和卷积神…...
vue.js组件和传值以及微信小程序组件和传值
微信小程序组件以及vue.js组件 一.微信小程序组件引用1.创建组件Component2.页面组件引用3.组件传值3.1 父视图传值到子组件 (父---->子)3.2 子组件传值给父组件 (子---->父)3.3 父组件方法传递到子组件 4. 界面之间的传值4.1 正向传值4.2 反向传值…...
c语言编程题(函数)
1编写函数将一个仅包含整数(可能为负)的字符串转换为对应的整数 方法一使用标准库函数 atoi atoi 函数是C语言标准库中的一个函数,用于将字符串转换为整数。 代码: #include <stdio.h> #include <stdlib.h> // 包含…...
华为eNSP:QinQ
一、什么是QinQ? QinQ是一种网络技术,全称为"Quantum Insertion",也被称为"Q-in-Q"、"Double Tagging"或"VLAN stacking"。它是一种在现有的VLAN(Virtual Local Area Network࿰…...
观成科技:隐蔽隧道工具Ligolo-ng加密流量分析
1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具,该工具基于TUN接口实现其功能,利用反向TCP/TLS连接建立一条隐蔽的通信信道,支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式,适应复杂网…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中,接口是一种抽象类型,它定义了一组方法的集合: // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的: // 矩形结构体…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文? 多租户隔离:自动为接入设备追加租户前缀,后端按 ClientID 拆分队列。零代码鉴权:将入站用户名替换为 OAuth Access-Token,后端 Broker 统一校验。灰度发布:根据 IP/地理位写…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
uniapp中使用aixos 报错
问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
C/C++ 中附加包含目录、附加库目录与附加依赖项详解
在 C/C 编程的编译和链接过程中,附加包含目录、附加库目录和附加依赖项是三个至关重要的设置,它们相互配合,确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中,这些概念容易让人混淆,但深入理解它们的作用和联…...
Linux 中如何提取压缩文件 ?
Linux 是一种流行的开源操作系统,它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间,使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的,要在 …...
