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,一经查实,立即删除!

相关文章

qt 一个继承object且使用Q_OBJECT宏的类有什么要求

一个继承自QObject且使用Q_OBJECT宏的类在Qt中有以下要求&#xff1a; 继承自QObject&#xff1a; 该类必须直接或间接继承自QObject类。这是使用Qt的信号槽机制、国际化机制以及Qt提供的不基于C RTTI的反射能力的基础。使用Q_OBJECT宏&#xff1a; 在类的定义中&#xff0c;必…

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

IP地址与MAC地址 由于MAC地址已固化在网卡上的ROM 中&#xff0c;因此常常将 MAC地址称为硬件地址或物理地址&#xff1b;物理地址的反义词就是虚拟地址、软件地址或逻辑地址&#xff0c;IP地址就属于这类地址。 从层次的角度看&#xff0c;MAC地址是数据链路层使用的地址&…

内存对齐的定义以及它的重要性

内存对齐是指数据在内存中存储时&#xff0c;按照一定的规则让数据排列在规定的地址上&#xff0c;以提高数据访问的效率和速度。具体来说&#xff0c;内存对齐是计算机体系结构、操作系统和编译器设计等多个层面共同要求的一种数据存储方式。以下是对内存对齐的详细解释以及它…

Java 面试相关问题(上)——基础问题集合问题

这里只会写Java相关的问题&#xff0c;包括Java基础问题、JVM问题、线程问题等。全文所使用图片&#xff0c;部分是自己画的&#xff0c;部分是自己百度的。如果发现雷同图片&#xff0c;联系作者&#xff0c;侵权立删。 1. Java基础面试问题1.1 基本概念相关问题1.1.1 Java语言…

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

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

systemverilog对象的复制和拷贝

在 SystemVerilog 中&#xff0c;对象的复制分为浅复制&#xff08;shallow copy&#xff09;和深复制&#xff08;deep copy&#xff09;。 浅复制会将原始对象中的所有属性拷贝到新对象中&#xff0c;包括整数、字符串、句柄等。但是&#xff0c;对于句柄属性&#xff0c;浅复…

汇编程序调用 C 程序详解

文章目录 1. ATPCS 规则 2. 汇编和C程序传递参数 汇编程序向 C 程序的函数传递参数 C 程序返回结果给汇编程序 代码示例 3. C 函数使用栈 4. C 语言中读写寄存器 在嵌入式开发中&#xff0c;经常需要在 C 程序和 ARM 汇编程序之间进行相互调用。为了保证这些调用的正确性…

SpringBoot整合Java Mail实现发送邮件

SpringBoot整合Java Mail实现发送邮件 实现 引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-mail</artifactId></dependency>发送邮件配置 这里使用qq邮箱发送邮件&#xff0c;需要…

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

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

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

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

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

25、v-model详解 &#xff08;1&#xff09;v-model原理 1&#xff09;原理: v-model本质上是一个语法糖&#xff0c;比如&#xff1a;在应用于输入框时&#xff0c;就是value属性与input事件的合写。 2&#xff09;作用 ①数据变&#xff0c;视图变 ②视图变&#xff0c…

wordpress制作主题步骤

WordPress主题的制作是一个涉及多个步骤的过程&#xff0c;旨在控制网站的外观、布局和功能。以下是一个详细的WordPress主题制作指南&#xff1a; 一、准备工作 安装WordPress&#xff1a;首先&#xff0c;确保你已经在你的服务器上安装了WordPress。WordPress可以从其官方网…

短链接服务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 1、Compose介绍 将单机服务-通过Dockerfile 构建为镜像 -docker run 成为一个服务 user 8080 net 7000 pay 8181 admin 5000 监控 .... docker run 单机版、一个个容器启动和停止问题&#xff1a; 前面我们使用Docker的时候&#xff0c;定义 Dockerfil…

Lottery 分布式抽奖(个人向记录总结)

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

mysql笔记(表导出文件,文件导入表)

遇见权限问题1: cat /etc/my.cnf加入[mysqld] secure_file_priv ""遇见目录错误2:因为 MySQL 服务器没有权限在根目录下创建文件。你可以尝试将文件导出到一个 MySQL 服务器有权限写入的目录下&#xff0c;例如 MySQL 数据目录或 /tmp目录。sudo chmod 755 /path/to…

开源科学工程技术软件

目录 0 参考链接 1 Silx 2 Klampt 3 参数化三维3D软件Dune 3D 4 GPS日志文件查看器GPXSee 5 三维3D软件Chili3D 6 集成电路设计软件XicTools 7 天文学软件Cosmonium 8 计算流体力学软件FluidX3D 9 点云处理软件CloudCompare 10 野外火灾建模软件WindNinja 11 电子设…