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

news2024/9/27 21:30:21

文本风格 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.coloradmin.cn/o/1914356.html

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

相关文章

华为HCIP Datacom H12-821 卷33

华为HCIP Datacom H12-821 卷33

1.判断题 缺省情况下&#xff0c;华为AR路由器的VRRP运行在抢占模式下 A、对 B、错 正确答案&#xff1a; A 解析&#xff1a; 无 2.判断题 一个Route-Policy下可以有多个节点&#xff0c;不同的节点号用节点号标识&#xff0c;不同节点之间的关系是"或"的关…
阅读更多...
什么是 C 语言中的宏定义？

什么是 C 语言中的宏定义？

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01; &#x1f4d9;C 语言百万年薪修炼课程 通俗易懂&#xff0c;深入浅出&#xff0c;匠心打磨&#xff0c;死磕细节&#xff0c;6年迭代&#xff0c;看过的人都说好。 文章目…
阅读更多...
告别缓慢下载，Cloudflare带你体验极速Docker镜像加速

告别缓慢下载，Cloudflare带你体验极速Docker镜像加速

背景 国内的Docker镜像服务似乎突然进入了寒冬&#xff0c;不仅Docker镜像服务受到了影响&#xff0c;连NPM镜像也可能面临下架的风险。这对依赖这些服务的开发者们来说&#xff0c;无疑是一个不小的困扰。 近日&#xff0c;SJTUG&#xff08;上海交通大学Linux用户组&#x…
阅读更多...
Apache Hadoop之历史服务器日志聚集配置

Apache Hadoop之历史服务器日志聚集配置

上篇介绍了Apache Hadoop的分布式集群环境搭建&#xff0c;并测试了MapReduce分布式计算案例。但集群历史做了哪些任务&#xff0c;任务执行日志等信息还需要配置历史服务器和日志聚集才能更好的查看。 配置历史服务器 在Yarn中运行的任务产生的日志数据不能查看&#xff0c;…
阅读更多...
30. 01背包问题 二维，01背包问题 一维，416.分割等和子集

30. 01背包问题 二维，01背包问题 一维，416.分割等和子集

背包问题分类&#xff1a; 1、确定dp数组以及下标的含义对于背包问题&#xff0c;有一种写法&#xff0c; 是使用二维数组&#xff0c;即dp[i][j] 表示从下标为[0-i]的物品里任意取&#xff0c;放进容量为j的背包&#xff0c;价值总和最大是多少。2、确定递推公式&#xff0c;…
阅读更多...
硅谷甄选二（登录）

硅谷甄选二（登录）

一、登录路由静态组件 src\views\login\index.vue <template><div class"login_container"><!-- Layout 布局 --><el-row><el-col :span"12" :xs"0"></el-col><el-col :span"12" :xs"2…
阅读更多...
Qt基础控件总结—多页面切换(QStackWidget类、QTabBar类和QTabWidget类)

Qt基础控件总结—多页面切换(QStackWidget类、QTabBar类和QTabWidget类)

QStackedWidget 类 QStackedWidget 类是在 QStackedLayout 之上构造的一个便利的部件，其使用方法与步骤和 QStackedLayout 是一样的。QStackedWidget 类的成员函数与 QStackedLayout 类也基本上是一致的，使用该类就和使用 QStackedLayout 一样。 使用该类可以参考QStackedL…
阅读更多...
施罗德数列SQL实现

施罗德数列SQL实现

在组合数学中,施罗德数用来描述从(0,0)到(n,n)的格路中,只能使用(1,0)、(0,1)、(1,1)三种移动方式,始终位于对角线下方且不越过对角线的路径数 DECLARE n INT 10 DECLARE i INT DECLARE rst INT DECLARE old INT1CREATE TABLE #rst (i INT ,rst int )INSERT INTO #rst values(…
阅读更多...
Python 中创建当前日期和时间的文件名技巧详解

Python 中创建当前日期和时间的文件名技巧详解

概要 在日常开发中，经常需要创建带有当前日期和时间的文件名，以便进行日志记录、数据备份或版本控制等操作。Python 提供了丰富的库和函数，可以方便地获取当前日期和时间，并将其格式化为字符串，用于生成文件名。本文将详细介绍如何使用 Python 创建带有当前日期和时间的文…
阅读更多...
springboot大学生竞赛管理系统-计算机毕业设计源码37276

springboot大学生竞赛管理系统-计算机毕业设计源码37276

摘 要 随着教育信息化的不断发展&#xff0c;大学生竞赛已成为高校教育的重要组成部分。传统的竞赛组织和管理方式存在着诸多问题&#xff0c;如信息不透明、效率低下、管理不便等。为了解决这些问题&#xff0c;提高竞赛组织和管理效率&#xff0c;本文设计并实现了一个基于Sp…
阅读更多...
STM32（二）：STM32工作原理

STM32（二）：STM32工作原理

0、参考1、寄存器和存储器基本概念&#xff08;1&#xff09;基本概念&#xff08;2&#xff09;主要区别&#xff08;3&#xff09;联系&#xff08;4&#xff09;实际应用中的案例&#xff08;5&#xff09;总结&#xff08;6&#xff09;一些名词解释 2、STM32指南者板子-存…
阅读更多...
免费GPU——Google Colab使用

免费GPU——Google Colab使用

免费GPU——Google Colab使用 1、创建新的Notebook 网址&#xff1a;https://colab.research.google.com/ 点击“新建笔记本”进行创建 2、设置免费GPU 点击“更改运行时类型”&#xff0c;打开界面如下所示&#xff1a; 选择“T4 GPU”&#xff0c;然后“保存”即可使用…
阅读更多...
秒速将油管视频转换为博客文章！

秒速将油管视频转换为博客文章！

摘要&#xff1a; 本文提供了一个免费试用的分步指南&#xff0c;介绍如何在短时间内将YouTube视频内容转换为博客文章&#xff0c;以扩展网络营销效果。通过使用特定的模板和自动化工具&#xff0c;可以显著提高内容转换的效率。 关键词&#xff1a; YouTube视频&#xff0c;…
阅读更多...
会员运营体系设计及SOP梳理

会员运营体系设计及SOP梳理

一些做会员的经验和方法分享给大家&#xff0c;包括顶层思考、流程的梳理、组织的建立&#xff0c;后续会做成系列&#xff0c;最近几期主要围绕顶层策略方面&#xff0c;以下是核心内容的整理&#xff1a; 1、会员运营体系设计 顶层设计与关键业务定位&#xff1a;建立客户运营…
阅读更多...
中霖教育：考完一建后二建证书还有用吗?

中霖教育：考完一建后二建证书还有用吗?

通过一级建造师考试后&#xff0c;二建证书依然有效。如果一建和二建证书是不同专业&#xff0c;通过一级建造师考试&#xff0c;二级建造师资格同样保持有效。对于相同专业的情况&#xff0c;两种证书亦也在相同单位同时注册&#xff0c;不会注销。 一级与二级建造师的区别&a…
阅读更多...
python入门综合篇—资源爬取与exe打包(图形界面)

python入门综合篇—资源爬取与exe打包(图形界面)

了解我的人都知道&#xff0c;我是一个谨言慎行且兴趣爱好广泛的IT&#xff0c;作为一个合格的前端&#xff0c;没事捣鼓一下python很合理吧&#xff0c;再没事搞搞java和php也很合乎逻辑吧&#xff0c;实在没事&#xff0c;玩玩linux服务器也是合乎常理的吧。所以&#xff0c;…
阅读更多...
7个外贸网站模板

7个外贸网站模板

Nebula独立站wordpress主题 Nebula奈卜尤拉wordpress主题模板&#xff0c;适合搭建外贸独立站使用的wordpress主题。 https://www.jianzhanpress.com/?p7084 Starling师大林WordPress独立站模板 蓝色橙色风格的WordPress独立站模板&#xff0c;适合做对外贸易的外贸公司搭建…
阅读更多...
鲁班猫系统镜像烧录

鲁班猫系统镜像烧录

http://t.csdnimg.cn/0FQ0w2. 系统镜像烧录 — 快速使用手册—基于LubanCat-RK3588系列板卡 文档 烧录鲁班猫系统镜像&#xff0c;配置鲁班猫环境&#xff0c;将整个环境打包用于其他鲁班猫。 先将一个空镜像烧到SD卡中&#xff0c;使用SD卡将鲁班猫开机&#xff0c;使用dd备…
阅读更多...
深入理解Python密码学：使用PyCrypto库进行加密和解密

深入理解Python密码学：使用PyCrypto库进行加密和解密

深入理解Python密码学&#xff1a;使用PyCrypto库进行加密和解密 引言 在现代计算领域&#xff0c;信息安全逐渐成为焦点话题。密码学&#xff0c;作为信息保护的关键技术之一&#xff0c;允许我们加密&#xff08;保密&#xff09;和解密&#xff08;解密&#xff09;数据。P…
阅读更多...
window下载安装clang

window下载安装clang

执行clang报错&#xff1a; c:/>clang test.cclang: warning: unable to find a Visual Studio installation; try running Clang from a developer command prompt [-Wmsvc-not-found] clang: error: unable to execute command: program not executable clang: error: li…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023