CSS 字体和文本详解

steamuse.akamaihd

CSS 字体和文本详解

字体设置

  • 如果字体名有空格,使用引号包裹。
  • 建议使用常见字体, 否则兼容性不好。
  • 字体名称可以用英文,也可以用中文, 推荐使用英文。

示例代码:

image-20240223103510233

运行结果:

image-20240223103533115


字体大小

  • 不同的浏览器默认字号不一样,最好给一个明确值(chrome 默认是 16px)
  • 可以给 body 标签使用 font-size ,标题标签需要单独指定大小
  • 代码中单位 px 忘记写了或者写错了,浏览器会对其进行容错,此时会展示成默认字体大小

注意: 实际上它设置的是字体中字符框的高度,实际的字符字形可能比这些框高或矮

示例代码:
image-20240223104420325

运行效果:
image-20240223104534733


文本颜色

color 属性值的写法:

  • 预定义的颜色值(直接是单词) ,例子:color: red;
  • 十六进制形式(最常用) ,例子:color: #ff00000;
  • RGB 方式,例子:rgb(255, 0, 0);

十六进制形式表示颜色, 如果两两相同,就可以用一个来表示,比如 #ff00ff => #f0f

RGB 是什么
R (red: 红色), G (green: 绿色), B (blue: 蓝色) 的方式表示颜色(色光三原色),三种颜色按照不同的比例搭配就能搭配出各种不同颜色。以#ff00000为例,前2位代表红色像素点,这个数字越大,红色越深,其它像素点同理,中间2位代表绿色像素点,最后2位代表蓝色像素点。

示例代码:

image-20240223111234733

运行效果:

image-20240223111340854


字体粗细

font-weight 属性设置文本的粗细

font-weight 属性值描述
normal默认值,定义标准的字符
bold定义粗体字符
bolder定义更粗的字符
lighter定义更细的字符
100 200 300 400 500 600 700 800 900定义由粗到细的字符,400 等同于 normal,而 700 等同于 bold

示例代码:
image-20240223113414628

运行效果:

image-20240223113534721


字体风格

font-style 属性定义字体的风格

font-style 属性值描述
normal默认值,浏览器显示一个标准的字体样式
italic浏览器会显示一个斜体的字体样式
oblique浏览器会显示一个倾斜的字体样式

示例代码:

image-20240223114142976

运行效果:
image-20240223114227896


文本对齐&&文本缩进

文本对齐: 控制文字水平方向的对齐
注:不光能控制文本对齐, 也能控制图片等元素居中或者靠右

语法:text-align: [值];

  • center: 居中对齐
  • left: 左对齐
  • right: 右对齐

文本缩进: 控制段落的首行缩进
注:文本的其他行不影响,只有首行缩进

语法:text-indent: [值];

  • 单位可以使用px或者em,推荐使用em作为单位,1 个 em就是当前元素的文字大小
  • 缩进可以是负的,表示往左缩进

示例代码:
image-20240223120831282

运行效果:
image-20240223120946377

文本装饰

语法:text-decoration: [值];

常用取值:

  • underline 下划线(常用)
  • none 什么都没有,不过可以给a标签/超链接标签去掉下划线
  • overline 上划线(不常用)
  • line-through 删除线(不常用)

示例代码:
image-20240223122108548

运行结果:

image-20240223121821293


行高

行高指的是上下文本行之间的基线距离

语法: line-height: [值];

示例代码:

image-20240223122427090

运行结果:

image-20240223122451620

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

云HIS系统源码,基于云计算技术的B/S架构的云HIS系统,二甲医院信息管理系统

云HIS系统源码,采用云端SaaS服务的方式提供 基于云计算技术的B/S架构的云HIS系统,采用云端SaaS服务的方式提供,使用用户通过浏览器即能访问,无需关注系统的部署、维护、升级等问题,系统充分考虑了模板化、配置化、智能…

Windows环境下使用SSH的开源图形化SFTP工具客户端 简介和基本使用

在Windows环境下,有许多开源的图形化SFTP工具客户端可以使用,其中比较受欢迎的是WinSCP和FileZilla。下面我将分别介绍这两个工具的基本信息和使用方法。 WinSCP WinSCP是一个Windows环境下使用的开源图形化SFTP客户端,它也支…

多维时序 | Matlab实现CPO-BiTCN-BiGRU冠豪猪优化时间卷积神经网络双向门控循环单元多变量时间序列预测模型

多维时序 | Matlab实现CPO-BiTCN-BiGRU冠豪猪优化时间卷积神经网络双向门控循环单元多变量时间序列预测模型 目录 多维时序 | Matlab实现CPO-BiTCN-BiGRU冠豪猪优化时间卷积神经网络双向门控循环单元多变量时间序列预测模型预测效果基本介绍程序设计参考资料 预测效果 基本介绍…

Vue监听器(上)之组合式watch

1. 定义监听器 //要监视的属性被改变时触发 watch(要监视的属性, (更改后的心值, 更改前的旧值) > {具体操作}, );//监视对象为getter的时候 //表达式内任意响应式属性被改变时触发 watch(() > return表达式, (表达式的新值, 表达式的旧值) > {具体操作} );//数组中任…

贪心/树形dp

思路: 因为如果红色节点的子树中如果有红色节点的话,那么该子树对其不会造成影响,不用考虑,因此我们在考虑每个红色节点时,不考虑其红色子树。那么如图,对每个红色节点答案有贡献的就是其所有非红色子节点…

Linux——简单的Shell程序

📘北尘_:个人主页 🌎个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上,不忘来时的初心 文章目录 一、Shell程序思路二、Shell代码展示 一、Shell程序思路 用下图的时间轴来表示事件的发生次序…

activeMq将mqtt发布订阅转成消息队列

1、activemq.xml置文件新增如下内容 2、mqttx测试发送: 主题(配置的模糊匹配,为了并发):VirtualTopic/device/sendData/12312 3、mqtt接收的结果 4、程序处理 package comimport cn.hutool.core.date.DateUtil; imp…

(九)springmvc+mybatis+dubbo+zookeeper分布式架构 整合 - maven构建ant-framework核心代码Base封装

今天重点讲解的是ant-framework核心代码Base封装过程。 因为涉及到springmvc、mybatis的集成,为了使项目编码更简洁易用,这边将基础的BASE进行封装,其中包括:BaseBean、BaseDao、BaseService、CRUD的基础封装、分页组件的封装、m…

Spring6学习技术|Junit

学习材料 尚硅谷Spring零基础入门到进阶,一套搞定spring6全套视频教程(源码级讲解) Junit 背景 背景就是每次Test都要重复创建容器,获取对象。就是ApplicationContext和getBean两个语句。通过Spring整合Junit,可以…

开源分子对接程序rDock的安装及使用流程

欢迎浏览我的CSND博客! Blockbuater_drug …点击进入 前言 本文介绍开源分子对接程序rDock在Linux Ubuntu 22.04系统上的conda安装、编译安装过程及程序使用流程。 一、rDock是什么? rDock来源 rDock是一个快速、多功能的开源对接程序,可用…

springmvc+mybatis+springboot航空飞机订票售票系统_f48cp

互联网发展的越来越快了,在当下社会节点,人们也开始越来越依赖互联网。通过互联网信息和数据,极大地满足用户要求[5]。飞机订票系统使用了B/S模式,并且不需要安装第三方插件,他们甚至能直接在电脑上随机随地实现飞机订…

【分享】关于MAX232一点心得

MAX232 DIP16封装现主要有这些型号:MAX232CPE、MAX232EPE。 下面对MAX232的型号标识进行解析: ①、MAX232后缀第一个字母,表示应用级别。带“C”:商业级;带“E”:工业级。 例:MAX232CPE&…

函数栈帧的创建及销毁(超详解)

目录 1.预备知识 1.1内存区的划分 1.2认识相关寄存器和汇编指令 1.2.1寄存器 1.2.2相关汇编指令 2.测试前 2.1测试代码及环境 2.2 main函数也是被其他函数调用的 3.函数栈帧的创建 4.进入函数内部 5.形参与实参 6.call/jump add函数 7.函数栈帧的销毁 7.1保存…

书生·浦语大模型实战营第二节课作业

使用 InternLM-Chat-7B 模型生成 300 字的小故事(基础作业1)。 熟悉 hugging face 下载功能,使用 huggingface_hub python 包,下载 InternLM-20B 的 config.json 文件到本地(基础作业2)。 下载过程 进阶…

linux下执行文件包含^M,将window文件格式内容转为linux格式

查看文件内容 cat -v jvm_options 报错信息 ./bin/install-plugin.sh: /bigdata/opt/s/seatunnelsgg/apache-seatunnel-2.3.4/mvnw: /bin/sh^M: bad interpreter: No such file or directory install connector : connector-selectdb-cloud安装工具 yum install -y dos2uni…

西门子S7-1500作为智能设备共享功能

本章节介绍了共享设备的功能,优势,使用要求,使用规则,如何将智能设备作为共享设备,实现一个智能设备同时与2个IO控制器进行通信的示例,以及常见问题。 一、共享设备功能概述 信号模块可以被不同的IO控制器…

「Kafka」监控、集成篇

Kafka-Eagle 监控 Kafka-Eagle 框架可以监控 Kafka 集群的整体运行情况,在生产环境中经常使用。 MySQL环境准备 Kafka-Eagle 的安装依赖于 MySQL,MySQL 主要用来存储可视化展示的数据。 安装步骤参考:P61 尚硅谷 kafka监控_MySQL环境准备 …

如何在同一个module里面集成多个数据库的多张表数据

确保本公司数据安全,通常对数据的管理采取很多措施进行隔离访问。 但是,Mendix应怎样访问散布于异地的多个数据库呢? 前几期我们介绍过出海跨境的大企业对于Mendix的技术、人才的诉求后,陆陆续续有其他客户希望更聚焦具体的实际场…

数据结构链表力扣例题AC(4)——代码以及思路记录

21. 合并两个有序链表 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 AC struct ListNode* mergeTwoLists(struct ListNode* list1, struct ListNode* list2) {if(list1 NULL){return list2;}if(list2 NULL){return l…

alibabacloud学习笔记06(小滴课堂)

讲Sentinel流量控制详细操作 基于并发线程进行限流配置实操 在浏览器打开快速刷新会报错 基于并发线程进行限流配置实操 讲解 微服务高可用利器Sentinel熔断降级规则 讲解服务调用常见的熔断状态和恢复 讲解服务调用熔断例子 我们写一个带异常的接口: