CSS---关于font文本属性设置样式总结

目录

1、color属性

2、font-size属性

3、font-weight属性

4、font-family属性

5、text-align属性

6、line-height属性

7、text-indent属性

8、letter-spacing属性

9、word-spacing属性

10、word-break属性

11、white-space属性

12、text-transform

12、writing-mode

13、text-decoration


1、color属性

// 颜色名,如【red】
// 十六进制值,如【#FFFFFF】
// RGB值,如【rgb(255, 0, 0)】
// rgba值,如【rgba(255, 0, 0, 0.9)】

color: red;
color: #fff;
color: rgb(255,0,0);

2、font-size属性

1. 用于设置文本字体大小,可以设置为绝对大小,单位为px,也可设置为相对大小,单位为rem、em等
2. 字体大小未设置时,如果无父组件则默认16px; 如果父组件有字体大小则复用父组件字体大小;

font-size: 16px;
font-size: 2em;
font-size: 2.5rem;

3、font-weight属性

- 用于设置文本的粗细,可设置的值有:

属性值说明
normal标准字符(默认)
bold粗体字符
bolder更粗的字符
lighter更细的字符
100、200、300、400、500、
600、700、800、900
400相当于normal
700相当于bold
数值越大字体越粗

4、font-family属性

- 用于规定文本使用的字体名或字体族名列表,字体名在列表越往前优先级越高。
如果浏览器不支持第一个字体,则会尝试下一个,以此类推

font-family:"Times New Roman", "Georgia", "Serif";

5、text-align属性

用于设置文本的水平对齐方式,可设置的值有:默认值为left

center(居中对齐) left(左对齐) right(右对齐)

6、line-height属性

用于设置行间距,可设置的值如下:

数字:行间距为当前字体大小乘此数字
固定值:设置固定的行间距,如20px
百分比:行间距为当前字体大小乘百分比

按默认字体16px:
line-height:1; // 16px
line-height:20px; // 20px
line-height:50%; // (16*0.5) 9px

7、text-indent属性

- 用于指定首行缩进值,可设置的值如下

固定值:设置固定首行缩进,如20px
百分比:首行缩进值为父元素宽度乘此百分比
text-indent:2em|20px;
text-indent:20%; // 0.2*100= 20px 100px为父盒子宽度

8、letter-spacing属性

用于设置字间距,设置固定值为字间距,如10px

normal默认字距,忽略任何其他字距属性
<length>指定字符间距,可以用px、em、cm等单位
inherit继承父元素的字符间距

9、word-spacing属性

用于指定文本中单词之间的间距,设置固定值为单词间距,如10px

normal;默认值。表示单词间距与字母间距相同。
word-spacing: length;用长度值表示单词间距。
word-spacing: initial;重置该属性为它的默认值。
word-spacing: inherit;从父元素继承该属性。

10、word-break属性

对英文单词处理

属性名描述
normal使用默认的换行规则。
break-all允许在单词内换行。
keep-all保持所有单词在同一行内,不允许换行。
break-word允许在单词内换行,但如果单词太长,仍会被强制换行。
initial设置属性为它的默认初始值。
inherit从父元素继承属性。
unset重置为自然状态。

注意:break-all 和 break-word 会破坏单词的完整性,可能会影响阅读体验,要谨慎使用。

11、white-space属性

用于设置文本的空白符处理方式,属性值如下

属性值描述
normal合并空格,换行符转化为一个空格,允许自动换行
nowrap合并空格,换行符转化为一个空格,不允许自动换行
pre保留空格,保留换行符,不允许自动换行
pre-line合并空格,保留换行符,允许自动换行
pre-wrap保留空格,保留换行符,允许自动换行
break-spaces保留空格,保留换行符,允许自动换行,行尾空格保留,空白符占用空间

12、text-transform

用于设置文本大小写字母,常用属性如下​​

属性值描述
uppercase全部文本均为大写字母。
lowercase全部文本均为小写字母。
capitalize首字母大写,其余字母小写,仅作用于单词首字母。
none没有转换,保留原有大小写。

12、writing-mode

设置文本在水平或垂直方向的排布方式

属性值描述
horizontal-tb文本流在水平方向从上到下排列,文字方向为水平方向。
sideways-lr文本流在垂直方向,从下至上、从左至右排列。该属性值不兼容webkit内核浏览器。
sideways-rl文本流在垂直方向,从上至下、从右至左排列。该属性值不兼容webkit内核浏览器。
vertical-lr文本流在垂直方向,从上至下、从左至右排列,文字方向为水平方向。
vertical-rl文本流在垂直方向,从上至下、从右至左排列,文字方向为水平方向。跟古诗阅读顺序一致。

 

 13、text-decoration

用于设置文本的装饰线,是下表属性的简写

属性属性值描述
text-decoration-linenone无线条设置要使用哪种文本装饰的类型
(下划线、上划线、删除线)。
underline下划线
overline上划线
line-through删除线
text-decoration-color颜色名、十六进制颜色、rgb等设置装饰线颜色
text-decoration-stylesolid实线设置装饰线的样式
double双实线
dotted点划线
dashed虚线
wavy波浪线

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Git常用操作-MD

文章目录 1. 本地创建分支&#xff0c;编写代码&#xff0c;提交本地分支到远程仓库2. 提交本地代码到本地仓库3. 提交本地代码到本地dev分支4. 提交本地dev分支到远程仓库5. 本地dev分支拉取远程master分支&#xff0c;并将master分支内容合并到本地dev6. 同义命令7. 撤销上次…

No matching version found for zr-map-ol@1.1.19.

问题描述&#xff1a; 通常情况下直接安装可能还会报错&#xff0c;因为有的依赖包是在私库里的 解决方法&#xff1a; 1.查看模块的注册信息 2. 安装 如果上面这种方式安装之后npm i还是报错&#xff0c;试试下面这种方式(我没有试下面的方式 上面的已经解决掉了) 具体可以参…

人工智能基础_机器学习038_中国人寿保费预测(EDA数据探索)_导包_数据探索_---人工智能工作笔记0078

注意 EDA是Exploratory Data Analysis(探索性数据分析)的缩写,它是一种统计分析方法,旨在了解数据的基本特征,并发现数据中的规律和模式。EDA通常是数据分析流程的开始阶段,主要使用可视化工具和统计指标来描述数据的基本特征,如数据的分布、中位数、均值、方差等。通过…

【前沿学习】美国零信任架构发展现状与趋势研究

转自&#xff1a;美国零信任架构发展现状与趋势研究 摘要 为了应对日趋严峻的网络安全威胁&#xff0c;美国不断加大对零信任架构的研究和应用。自 2022 年以来&#xff0c;美国发布了多个零信任战略和体系架构文件&#xff0c;开展了多项零信任应用项目。在介绍美国零信任战略…

C++初阶(十一)STL简介及string类初讲

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、什么是STL二、STL的版本三、STL的六大组件四、STL的重要性五、如何学习STL六、STL的缺陷七…

802.11ax-2021协议学习__$27-HE-PHY__$27.5-Parameters-for-HE-MCSs

802.11ax-2021协议学习__$27-HE-PHY__$27.5-Parameters-for-HE-MCSs 27.3.7 Modulation and coding scheme (HE-MCSs)27.3.8 HE-SIG-B modulation and coding schemes (HE-SIG-B-MCSs)27.5 Parameters for HE-MCSs27.5.1 General27.5.2 HE-MCSs for 26-tone RU27.5.3 HE-MCSs f…

Git-团队协作工作流

前言 一、工作流概述二、Git flow1.主要流程2.优缺点3.适用场景 三、Github flow1.主要流程2.优缺点3.适用场景 四、Gitlab flow1.主要流程2.优缺点3.适用场景 总结参考 一、工作流概述 开发人员通过Git可以记录和追踪代码的变化&#xff0c;包括添加、删除和修改文件。如果是…

【自动化测试】Appium环境搭建与配置-详细步骤,一篇带你打通...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、Node.js环境搭…

【Python大数据笔记_day09_hive函数和调优】

hive函数 函数分类标准[重点] 原生分类标准: 内置函数 和 用户定义函数(UDF,UDAF,UDTF) ​ 分类标准扩大化: 本来&#xff0c;UDF 、UDAF、UDTF这3个标准是针对用户自定义函数分类的&#xff1b; 但是&#xff0c;现在可以将这个分类标准扩大到hive中所有的函数&#xff0c;…

MyBatis CURD操作深度解析

文章目录 简单查询操作插入、更新和删除操作selectKey元素的作用结语 &#x1f388;个人主页&#xff1a;程序员 小侯 &#x1f390;CSDN新晋作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 ✨收录专栏&#xff1a;MyBatis ✨文章内容&#xff1a; CURD操作 &#x1f9…

Alibaba微服务组件Nacos注册中心

1. 什么是 Nacos 官方&#xff1a;一个更易于构建云原生应用的动态 服务发现( Nacos Discovery ) 、 服务配置( Nacos Config ) 和服务管理平台。 集 注册中心配置中心服务管理 平台 Nacos 的关键特性包括: 服务发现和服务健康监测 动态配置服务 动态 DNS 服务 服务及其…

ps5计时计费软件安装教程,佳易王电玩店计时收费系统

ps5计时计费软件安装教程&#xff0c;佳易王电玩店计时收费系统 一、佳易王电玩PS5游戏厅计时计费软件部分功能简介&#xff1a; 1、计时计费功能 &#xff1a;开台时间和所用的时长直观显示&#xff0c;每3秒即可刷新一次时间。 2、销售商品功能 &#xff1a;商品可以绑定桌…

2023双十一爆冷收场,订单后暗藏这些电商痛点问题需要注意

打开某软件的瞬间&#xff0c;手不小心抖一下就进入了淘宝&#xff0c;而且无法第一时间准确找到关闭按钮。相信不少人都在这个双十一通过开屏广告为淘宝“贡献”至“超8亿”的访问量&#xff0c;更有网友辣评&#xff1a;“现在打开别的软件跳转淘宝的速度都比直接打开淘宝要快…

MySQL怎样处理排序⭐️如何优化需要排序的查询?

前言 在MySQL的查询中常常会用到 order by 和 group by 这两个关键字 它们的相同点是都会对字段进行排序&#xff0c;那查询语句中的排序是如何实现的呢&#xff1f; 当使用的查询语句需要进行排序时有两种处理情况&#xff1a; 当前记录本来就是有序的&#xff0c;不需要进…

折爱心教程(简单版本)

文章目录 1.折出双三角形2.向中心折叠3.形成正方形4.对折正反面相同5.向中心折6.外侧角向中心折7.顶部三角形向下折叠注意参考资料 我怎么也没有想到&#xff0c;身为混迹职场多年的老油子&#xff0c;竟然还能遇到折纸这种硬性task。 可是给的教程步骤省略太多了&#xff0c;看…

uni-app:如何配置uni.request请求的超时响应时间(全局+局部)

方法一&#xff1a;全局配置响应时间 一、进入项目的manifest.json的代码视图模块 二、写入代码 "networkTimeout": {"request": 5000 }, 表示现在request请求响应时间最多位5秒 方法二&#xff1a;局部设置响应时间 一、直接在uni.request中写入属性…

深度学习YOLOv5车辆颜色识别检测 - python opencv 计算机竞赛

文章目录 1 前言2 实现效果3 CNN卷积神经网络4 Yolov56 数据集处理及模型训练5 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习YOLOv5车辆颜色识别检测 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0…

最新AI创作系统ChatGPT系统运营源码/支持最新GPT-4-Turbo模型/支持DALL-E3文生图

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如…

高级数据结构——树状数组

树状数组&#xff08;Binary Index Tree, BIT&#xff09;&#xff0c;是一种一般用来处理单点修改和区间求和操作类型的题目的数据结构&#xff0c;时间复杂度为O(log n)。 对于普通数组来说&#xff0c;单点修改的时间复杂度是 O(1)&#xff0c;但区间求和的时间复杂度是 O(n…

【创作活动】作为程序员的那些愚蠢瞬间

作为一名程序员&#xff0c;我相信你一定遇到过这种情况&#xff1a;在写代码的时候&#xff0c;遇到了一些bug&#xff0c;在当下怎么检查都查不出问题出现在哪&#xff0c;等过几天后突然发现困扰自己的问题原来这么简单&#xff0c;突然觉得自己很蠢。这种情况在我身上也发生…