CSS【详解】文本相关样式（含 font 系列样式，文本颜色 color，三种颜色表示法，文本排版-含最佳实战范例，文本装饰，分散对齐，渐变色文本等）

文本风格 font-style

font-style:italic
值描述
normal默认值。浏览器显示一个标准的字体样式。
italic加载对应字体的斜体字体文件，若找不到斜体字体文件，则进行物理上的倾斜。 标签默认font-style:italic
oblique浏览器会显示一个倾斜的字体样式。

文本粗细 font-weight

font-weight: bold;

属性值

  • 关键字：normal bold

  • 具体数值：100 200 300 400（等同于normal） 500 600 700（等同于bold） 800 900

  • 相对值（相对于父级元素）：lighter bolder

有时候看不到粗细变化，是因为所使用的字体不支持。比如“微软雅黑”，只支持 400 和 700 这两种粗细， 而 Mac 上的 “苹方” 字体，支持从100到900之间的各种粗细。

文本大小 font-size

font-size:20px;
  • 默认值为16px
  • 设置为 0，可用于隐藏文本，如隐藏网站左上角的logo中的文字

行高 line-height

行高：两行文字“基线”之间的垂直距离
在这里插入图片描述
在这里插入图片描述
属性值：

  • normal【默认值】—— 和字体font-family有关，不同系统不同浏览器不一样，所以，通常都要对line-height的默认值进行重置。
  • 数值 —— 行高 = 数字* font-size ，所有的子元素继承的都是这个值，比如1表示1倍行距，2表示2倍行距
    • 重图文内容展示的网站，如博客、公众号等，一定要使用数值作为单位，设置在1.6～1.8。
  • 百分比值 —— 行高 = 百分比* font-size ，所有的子元素继承的是最终的计算值
  • 长度值 —— 所有的子元素继承的是最终的计算值，推荐使用line-height:20px，排版时方便计算
父元素内多个内联元素排列在一行时，line-height 最大的内联元素决定了父元素的高度。父元素内内联元素和替换元素排列在一行时，line-height 决定了父元素的最小高度。

字体 font-family

font-family: "Times New Roman","微软雅黑","宋体";

  • 英文采用 Times New Roman 字体，中文采用微软雅黑字体（要给英文设置另一个字体，则英文字体需写在中文字体前面！）

  • 若用户电脑里没有安装微软雅黑字体，那么就会采用宋体。

  • 所有的中文字体，都有英语别名。

    • 微软雅黑的英语别名：font-family: “Microsoft YaHei”;
    • 宋体的英语别名：font-family: “SimSun”;

【最佳实践】无衬线字体

笔划粗细基本一致，只剩下主干，造型简明有力，起源也很晚。适用于标题、广告等，识别性高，更符合现代审美

@font-face {font-family: Emoji;src: local("Apple Color Emoji"),local("Segoe UI Emoji"), local("Segoe UI Symbol"),local("Noto Color Emoji");unicode-range: U+1F000-1F644, U+203C-3299;
}
body {font-family: system-ui, -apple-system, Segoe UI, Roboto, Emoji, Helvetica, Arial, sans-serif;
}

【最佳实践】衬线字体

在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同，如宋体、楷体

.font-serif {font-family: Georgia, Cambria, "Times New Roman", Times, serif;
}

【最佳实践】等宽字体

每个字符在同等font-size下占据的宽度相同。一般是针对英文字体而言的，因为东亚字体都是等宽的。常用于呈现代码，IDE代码编辑器也推荐使用等宽字体。

.font-mono {font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

【最佳实践】数学公式

math {font-family: Cambria Math, Latin Modern Math;
}
  • Cambria Math 是 Windows 操作系统中的数学字体
  • Latin Modern Math 是 macOS 中的数学字体

文本样式 font

是以上几种文本样式的综合简写形式，语法为：

font:文本风格 文本粗细 文字大小/行高 字体
  • 文字大小和字体必须要有！

范例：

font:italic bold 12px/20px arial,sans-serif;

文本颜色 color

color:red

属性值：

  • transparent 透明

  • red、green、blue、orange、gray等，不区分大小写。

    • 暗灰色 darkgray 比灰色 gray 更浅，因此，并不是有 “dark” 前缀的颜色就更深。

  • 10进制表示：rgb(255,0,0)

  • 16进制表示：#FF0000、#0000FF、#00FF00等，#aabbcc 的形式可简写位 #abc。

颜色有多种表示方式：

RGB表示法

color:rgb(255,0,0)

rgb 函数内是三个参数依次是 红、绿、蓝，每个参数值的取值范围都是 0-255，通过这三种颜色的混合，便能表示各种颜色。

RGBA 表示法

在RGB的基础上，增加了A（Alpha通道，即透明度，取值为0-1）

color: rgba(0, 0, 255, 0.3);

HSLA 表示法

https://blog.csdn.net/weixin_41192489/article/details/102549564

文字填充颜色 text-fill-color

  • 默认值：transparent
  • 其功能与 color 基本相同，但当 text-fill-color 和 color 同时存在时，text-fill-color 会覆盖 color

文本排版

首行缩进 text-indent

在这里插入图片描述

<p style="text-indent: 2em">很久很久以前，门口有座山，山上有座庙，庙里有一老一少两个和尚。有一天，老和尚给小和尚讲了一个故事。
</p>

1em是一个中文，2em即2个中文宽度，实现每个段落空两个字开头的效果！

  • text-indent 的百分比值相对于当前元素的“包含块”计算

  • display计算值为 inline 的内联元素设置 text-indent 无效，如果计算值是inline-block/inline-table 则会生效。

文本换行 word-break

值描述
normal使用浏览器默认的换行规则。
break-word尽量不断开单词
break-all允许在单词内换行。
keep-all只在半角空格或连字符处换行，还可以保护中文词组不被断开，非常有利于优化中文排版。

浏览器默认的换行规则

  • Space普通空格、Enter（回车）空格和Tab（制表符）空格这3种空格无论怎样组合都会合并为单个普通空格。
  • 文字可以在中文/日文/韩文文本、普通空格和短横线连字符处换行，连续英文单词和数字不换行。

动态内容换行

p {/* 支持破折号换行 */word-break: break-all;/* 兼容IE浏览器和Edge浏览器的破折号换行 */word-wrap: break-word;/* 中文标点也能换行 */line-break: anywhere; 
}

静态内容换行

  • 如果是英文单词，则使用&shy;软连字符优化排版；

    &shy;软连字符在换行的位置会显示为“-”, 在非换行的位置不可见。

  • 如果是非英文单词，则使用<wbr>标签优化排版。

    • wbr元素标签，可以实现连续英文和数字的精准换行，具体效果如下：如果宽度足够，不换行；如果宽度不足，则在wbr元素所在的位置进行换行。
    /* IE浏览器并不支持wbr标签，使用以下css代码实现兼容 */
wbr:after { content: '\00200B'; }

在这里插入图片描述

  <p>大家好，今天是星期天，天气真的好，很高兴再次见到大家，我叫zhang&shy;san&shy;feng，感谢大家记得我！</p><p>大家好，今天是星期天，天气真的好，很高兴再次见到大家，我叫zhang<wbr />san<wbr />feng,感谢大家记得我！</p>

文本溢出 text-overflow

值描述
clip修剪文本
ellipsis显示省略号来代表被修剪的文本
string使用给定的字符串来代表被修剪的文本。
 <div class="textBox">文字超出容器的宽度，溢出啦!</div>

.textBox{width: 100px;white-space: nowrap;border: 1px solid black;margin: 30px;overflow:hidden;text-overflow: ellipsis;/*超出部分显示为省略号*/
}

在这里插入图片描述

文本溢出换行 overflow-wrap word-wrap

CSS3 中将 word-wrap 改名为 overflow-wrap，所以使用 overflow-wrap 时，最好同时使用 word-wrap 作为备选，来增强兼容性。

  • normal：允许内容顶开或溢出指定的容器边界。
  • break-word：内容将在边界内换行。如果需要，单词内部允许断行。

字母间距 letter-spacing

<p style="letter-spacing: 1cm">Hello World 你好，世界!</p>

在这里插入图片描述

单词间距 word-spacing

仅作用于空格字符

<p style="word-spacing: 1cm">Hello World 你好，世界!</p>

在这里插入图片描述

缩进大小 tab-size

控制Tab键输入的空格（U+0009）的长度大小。

tab-size: 2;

表示每个Tab键输入的空格的宽度等同于2个Space键输入的空格的宽度。

tab-size: 2em;

表示每个Tab键输入的空格的宽度等同于2个常规汉字的宽度。

使用场景：设置源代码展示时使用Tab键输入的空格的缩进距离

pre {-moz-tab-size: 4;tab-size: 4;
}

效果见 https://demo.cssworld.cn/new/9/3-2.php

文本大小调整 text-size-adjust

PC端无效，仅移动端有效

使用场景——禁止iphone横屏时字号自动调整的行为

body {-webkit-text-size-adjust: none;
}

文本装饰

含文本装饰线 text-decoration ，文字描边 stroke，文本外描边 paint-order，文本强调字符装饰，文本阴影 text-shadow 等。
https://blog.csdn.net/weixin_41192489/article/details/140270966

单词大小写 text-transform

  • uppercase（单词大写）
  • lowercase（单词小写）
  • capitalize（每个单词的首字母大写）
<p style="text-transform: lowercase">Hello World!</p>

Hello World!

实战范例：身份证的输入框自动大写

input {text-transform: uppercase;
}

【实战】分散对齐（两端对齐）

满足以下两点时，才能呈现出预期效果：

  1. 有分隔点，如空格；
  2. 要超过一行，此时非最后一行内容会两端对齐。

在这里插入图片描述

<template><p>很久很久以前，门口有座山，山上有座庙，庙里有一老一少两个和尚。有一天，老和尚给小和尚讲了一个故事。</p><h4>两端对齐后</h4><p class="demo">很久很久以前，门口有座山，山上有座庙，庙里有一老一少两个和尚。有一天，老和尚给小和尚讲了一个故事。</p>
</template><style scoped>
.demo {/* 最后一行左对齐 */text-align-last: left;text-align: justify;/* 兼容所有浏览器，inter-ideograph的字面意思是“国际象形文字” */text-justify: inter-ideograph;
}
</style>

【实战】渐变色的文本

在这里插入图片描述

<template><p class="demo">很久很久以前，门口有座山，山上有座庙，庙里有一老一少两个和尚。有一天，老和尚给小和尚讲了一个故事。</p>
</template><style scoped>
.demo {/* 设置背景图片为线性渐变色 */background-image: linear-gradient(135deg, red, blue);/* 规定背景的绘制区域。(-webkit-用于解决兼容问题) */-webkit-background-clip: text;/* 前景色设置为透明，才能显示背景色（相当于镂空文本） */color: transparent;
}
</style>

【实战】一篇优雅的文章（中英文） vs 聊天框的特别排版

https://blog.csdn.net/weixin_41192489/article/details/134273061

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

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

相关文章

计算机网络——网络层（IP地址与MAC地址、地址解析协议ARP、IP数据报格式以及转发分组、ICMP、IPV6）

计算机网络——网络层（IP地址与MAC地址、地址解析协议ARP、IP数据报格式以及转发分组、ICMP、IPV6）

IP地址与MAC地址 由于MAC地址已固化在网卡上的ROM 中&#xff0c;因此常常将 MAC地址称为硬件地址或物理地址&#xff1b;物理地址的反义词就是虚拟地址、软件地址或逻辑地址&#xff0c;IP地址就属于这类地址。 从层次的角度看&#xff0c;MAC地址是数据链路层使用的地址&…
阅读更多...
Java 面试相关问题（上）——基础问题集合问题

Java 面试相关问题（上）——基础问题集合问题

这里只会写Java相关的问题&#xff0c;包括Java基础问题、JVM问题、线程问题等。全文所使用图片&#xff0c;部分是自己画的&#xff0c;部分是自己百度的。如果发现雷同图片&#xff0c;联系作者&#xff0c;侵权立删。 1. Java基础面试问题1.1 基本概念相关问题1.1.1 Java语言…
阅读更多...
配置Maven并使用IDEA新建一个简单的Springboot项目

配置Maven并使用IDEA新建一个简单的Springboot项目

一.maven的配置 1.查看电脑上是否配置了maven ①使用快捷键“WinR”打开运行窗口&#xff0c;在窗口中输入cmd&#xff0c;点击确定进入黑色命令窗口 ②在命令行窗口中输入如下命令 mvn -version 如果出现下面的提示则表示该电脑已配置maven&#xff0c;否则需要进行maven配…
阅读更多...
SpringBoot整合Java Mail实现发送邮件

SpringBoot整合Java Mail实现发送邮件

SpringBoot整合Java Mail实现发送邮件 实现 引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-mail</artifactId></dependency>发送邮件配置 这里使用qq邮箱发送邮件&#xff0c;需要…
阅读更多...
Leetcode3200. 三角形的最大高度

Leetcode3200. 三角形的最大高度

Every day a Leetcode 题目来源&#xff1a;3200. 三角形的最大高度 解法1&#xff1a;模拟 枚举第一行是红色还是蓝色&#xff0c;再按题意模拟即可。 代码&#xff1a; /** lc appleetcode.cn id3200 langcpp** [3200] 三角形的最大高度*/// lc codestart class Solutio…
阅读更多...
java.sql.SQLException: Before start of result set

java.sql.SQLException: Before start of result set

情况描述&#xff0c;在通过JDBC连接数据库时&#xff0c;想直接判断获取的值是否存在&#xff0c;运行时报错。 翻译&#xff1a; 在开始结果集之前 报错截图 解决问题的方法&#xff1a;对结果集ResultSet进行操作之前&#xff0c;一定要先用ResultSet.next()将指针移动至…
阅读更多...
RAG 效果提升的最后一步—— 微调LLM

RAG 效果提升的最后一步—— 微调LLM

如果说&#xff0c;rerank能够让RAG的效果实现百尺竿头更进一步&#xff0c;那么LLM微调应该是RAG效果提升的最后一步。 把召回的数据&#xff0c;经过粗排&#xff0c;重排序后&#xff0c;送给模型&#xff0c;由模型最后总结答案。LLM的确已经是RAG的最后一步了。 这里还是会…
阅读更多...
C#可空类型与数组

C#可空类型与数组

文章目录 可空类型NULL合并运算符&#xff08;??&#xff09;数组数组声明数组初始化数组赋值数组访问多维数组交错数组数组类数组类的常用属性数组类的常用方法 可空类型 C#提供了一种特殊的数据类型&#xff0c;nullable类型&#xff08;可空类型&#xff09;&#xff0c;可…
阅读更多...
＜数据集＞夜间车辆识别数据集＜目标检测＞

＜数据集＞夜间车辆识别数据集＜目标检测＞

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;5000张 标注数量(xml文件个数)&#xff1a;5000 标注数量(txt文件个数)&#xff1a;5000 标注类别数&#xff1a;8 标注类别名称&#xff1a;[car, pedestrian, traffic light, traffic sign, bicycle, bus, truck…
阅读更多...
vue学习day08-v-model详解、sync修饰符、ref和$refs获取dom组件、Vue异步更新和$nextTick

vue学习day08-v-model详解、sync修饰符、ref和$refs获取dom组件、Vue异步更新和$nextTick

25、v-model详解 &#xff08;1&#xff09;v-model原理 1&#xff09;原理: v-model本质上是一个语法糖&#xff0c;比如&#xff1a;在应用于输入框时&#xff0c;就是value属性与input事件的合写。 2&#xff09;作用 ①数据变&#xff0c;视图变 ②视图变&#xff0c…
阅读更多...
短链接服务Octopus-搭建实战

短链接服务Octopus-搭建实战

[WARNING] The POM for cn.throwx:octopus-contract:jar:1.0-SNAPSHOT is missing, no dependency information available 解决方案&#xff1a; cd octopus-contract/ mvn install -------------- ➜ octopus-server git:(master) ✗ mkdir -p /data/log-center/octopus/s…
阅读更多...
DockerCompose介绍，安装，使用

DockerCompose介绍，安装，使用

DockerCompose 1、Compose介绍 将单机服务-通过Dockerfile 构建为镜像 -docker run 成为一个服务 user 8080 net 7000 pay 8181 admin 5000 监控 .... docker run 单机版、一个个容器启动和停止问题&#xff1a; 前面我们使用Docker的时候&#xff0c;定义 Dockerfil…
阅读更多...
Lottery 分布式抽奖（个人向记录总结）

Lottery 分布式抽奖（个人向记录总结）

1.搭建&#xff08;DDDRPC&#xff09;架构 DDD——微服务架构&#xff08;微服务是对系统拆分的方式&#xff09; &#xff08;Domain-Driven Design 领域驱动设计&#xff09; DDD与MVC同属微服务架构 是由Eric Evans最先提出&#xff0c;目的是对软件所涉及到的领域进行建…
阅读更多...
.NET MAUI开源架构_2.什么是 .NET MAUI？

.NET MAUI开源架构_2.什么是 .NET MAUI？

1.什么是.NET MAUI&#xff1f; .NET 多平台应用 UI (.NET MAUI) 是一个跨平台框架&#xff0c;用于使用 C# 和 XAML 创建本机移动和桌面应用。使用 .NET MAUI&#xff0c;可从单个共享代码库开发可在 Android、iOS、macOS 和 Windows 上运行的应用。 .NET MAUI 是一款…
阅读更多...
pytorch中一些最基本函数和类

pytorch中一些最基本函数和类

1.Tensor操作 Tensor是PyTorch中最基本的数据结构&#xff0c;类似于NumPy的数组&#xff0c;但可以在GPU上运行加速计算。 示例&#xff1a;创建和操作Tensor import torch# 创建一个零填充的Tensor x torch.zeros(3, 3) print(x)# 加法操作 y torch.ones(3, 3) z x y pr…
阅读更多...
【学习笔记】无人机（UAV）在3GPP系统中的增强支持(三)-机上无线电接入节点无人机

【学习笔记】无人机（UAV）在3GPP系统中的增强支持(三)-机上无线电接入节点无人机

引言 本文是3GPP TR 22.829 V17.1.0技术报告&#xff0c;专注于无人机&#xff08;UAV&#xff09;在3GPP系统中的增强支持。文章提出了多个无人机应用场景&#xff0c;分析了相应的能力要求&#xff0c;并建议了新的服务级别要求和关键性能指标&#xff08;KPIs&#xff09;。…
阅读更多...
【JavaEE】AOP实现原理

【JavaEE】AOP实现原理

概述 Spring AOP 是基于动态代理来实现AOP的, 此处主要介绍代理模式和Spring AOP的源码剖析 一.代理模式 代理模式是一种常用的设计模式&#xff0c;它允许为其他对象提供代理&#xff0c;以控制对这个对象的访问。这种结构在不改变原始类的基础上&#xff0c;通过引入代理类…
阅读更多...
MongoDB教程（一）：Linux系统安装mongoDB详细教程

MongoDB教程（一）：Linux系统安装mongoDB详细教程

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; 文章目录 引言一、Ubuntu…
阅读更多...
应急响应总结

应急响应总结

应急响应 日志 windows IIS 6.0 及更早版本&#xff1a; C:\WINDOWS\system32\LogFiles\W3SVC[SiteID]\ IIS 7.0 及更高版本&#xff1a; C:\inetpub\logs\LogFiles\W3SVC[SiteID]\ Apache HTTP Server C:\Program Files (x86)\Apache Group\Apache2\logs\ 或者 C:\Prog…
阅读更多...
STFT:解决音频-视频零样本学习 (ZSL) 中的挑战

STFT:解决音频-视频零样本学习 (ZSL) 中的挑战

传统的监督学习方法需要大量的标记训练实例来进行训练,视听零样本学习的任务是利用音频和视频模态对对象或场景进行分类&#xff0c;即使在没有可用标记数据的情况下。为了解决传统监督方法的限制&#xff0c;提出了广义零样本学习&#xff08;Generalized Zero-Shot Learning,…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023