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属性

用于设置文本的水平对齐方式,可设置的值有:默认值为leftcenter(居中对齐) 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波浪线

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

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

相关文章

SchedulingConfigurer教程,怎么使用Spring自带的可扩展定时任务调度接口

简介&#xff1a; SchedulingConfigurer 是 Spring 框架中的一个接口&#xff0c;用于配置任务调度&#xff08;scheduling&#xff09;的相关设置。在 Spring 中&#xff0c;任务调度通常通过 Spring 的任务调度模块&#xff08;Task Scheduling&#xff09;来实现&#xff0c…

px、em、rem、百分比的区别

文章目录 1. 单位类型与相对基准2. 相对长度1.em2.rem3.%百分比4.vw 和 vh5.vmin 和 vmax6.vm7.ch8. ex 3. 总结 1. 单位类型与相对基准 单位名称单位类型 &#xff08;相对/绝对&#xff09;相对基准px相对屏幕像素缩放后的尺寸百分比相对font-size相对于继承&#xff0c;wid…

Vue3 源码解读系列(十三)——双向数据绑定 v-model

v-model 本质是 prop 和 事件监听 的语法糖。 通过 prop 实现 数据 -> 视图 的单向数据流&#xff1b;通过监听 change 或 input 事件实现 视图 -> 数据 的单向数据流。 /*** v-model 的实现* 注册了 created 和 beforeUpdate 两个钩子函数*/ const VModelText {/*** cr…

刷题记录第三十天-两数之和and四数之和II

两数之和 class Solution { public:vector<int> twoSum(vector<int>& nums, int target) {unordered_map<int,int> map;for(int i0;i<nums.size();i){if(map.count(target-nums[i])!0){return vector<int>{i,map[target-nums[i]]};}else{map[nu…

C++中使用构造函数进行类型转换

C中使用构造函数进行类型转换 可给类提供重载的构造函数&#xff0c;即接受一个或多个参数的构造函数。这种构造函数常用于进行类型转换。请看下面的 Human 类&#xff0c;它包含一个将整数作为参数的重构构造函数&#xff1a; class Human {int age;public:Human(int humans…

VSCode使用MinGW中的go并支持CGO

在Windows中&#xff0c;如果想使用Linux下的一些命令或者开发工具&#xff0c;可以安装Cygwin或者MinGW&#xff0c;MinGW相比Cygwin要轻量得多&#xff0c;笔者就安装的MinGW&#xff0c;但是安装MinGW后&#xff0c;如果把它加到Windows系统的PATH环境变量中&#xff0c;则可…

【Flask使用】全知识md文档,4大部分60页第3篇:状态cookie和session保持

本文的主要内容&#xff1a;flask视图&路由、虚拟环境安装、路由各种定义、状态保持、cookie、session、模板基本使用、过滤器&自定义过滤器、模板代码复用&#xff1a;宏、继承/包含、模板中特有变量和函数、Flask-WTF 表单、CSRF、数据库操作、ORM、Flask-SQLAlchemy…

CMS与FullGC

JVM中的CMS&#xff08;Concurrent Mark Sweep&#xff09;GC和Full GC&#xff08;Full Garbage Collection&#xff09;是两种不同的垃圾回收算法。 CMS GC&#xff1a;CMS GC是一种并发的垃圾回收算法&#xff0c;它在运行期间与应用程序线程并发工作&#xff0c;尽可能减少…

【mac 解决eclipse意外退出】

打开eclipse时提示报错信息应用程序"Eclipse.app"无法打开&#xff08;这里忘了截图就不上图了&#xff09;。 点击 “好” 的按钮后会弹出发送报告的弹窗 终端输入&#xff1a;sudo codesign --force --deep --sign - /Applications/Eclipse.app/ 就可以解决了

互联网上门洗衣洗鞋小程序搭建

“闪站侠互联网洗护软件开发”围绕健康洗护、智能操作做出不断升级&#xff0c; 满足用户多样化的洗护需求&#xff0c;打造轻松洗衣洗鞋体验。 洗衣洗鞋专用软件&#xff0c;可以帮助洗衣店洗鞋店店主们省心高效的管理店铺&#xff0c;一次付款长期使用&#xff0e;功能基本涵…

趣学python编程 (四、数据结构和算法介绍)

数据结构和算法在编程中非常重要。数据结构是组织和存储数据的方式&#xff0c;而算法是解决问题的方法和步骤。你要挑战的蓝桥杯&#xff0c;实际也是在设计算法解决问题。其实各种编程语言都只是工具&#xff0c;而程序的核心数据结构算法。犹如练武&#xff0c;数据结构和算…

深度学习乳腺癌分类 计算机竞赛

文章目录 1 前言2 前言3 数据集3.1 良性样本3.2 病变样本 4 开发环境5 代码实现5.1 实现流程5.2 部分代码实现5.2.1 导入库5.2.2 图像加载5.2.3 标记5.2.4 分组5.2.5 构建模型训练 6 分析指标6.1 精度&#xff0c;召回率和F1度量6.2 混淆矩阵 7 结果和结论8 最后 1 前言 &…

【iOS】——知乎日报第五周总结

文章目录 一、评论区展开与收缩二、FMDB库实现本地持久化FMDB常用类&#xff1a;FMDB的简单使用&#xff1a; 三、点赞和收藏的持久化 一、评论区展开与收缩 有的评论没有被回复评论或者被回复评论过短&#xff0c;这时就不需要展开全文的按钮&#xff0c;所以首先计算被回复评…

1.1二分查找

二分查找&#xff0c;主要是针对基本有序的数据来进行查找target。 二分法的思想很简单&#xff0c;因为整个数组是有序的&#xff0c;数组默认是递增的。 1.1 使用条件 用于查找的内容逻辑上来说是需要有序的查找的数量只能是一个&#xff0c;而不是多个 1.2 简介 首先选…

Positive Technologies 利用 PT Cloud Application Firewall 保护中小型企业的网络资源

云产品按月订购&#xff0c;无需购买硬件资源 PT Cloud Application Firewall 是 Positive Technologies 推出的首个用于保护网络应用程序的商用云产品。Web 应用层防火墙 (web application firewall, WAF) 现在可以通过 技术合作伙伴——授权服务商和云提供商以订购方式提供1…

C#编程题分享(1)

求四个整数中的最大值和最小值问题 编写⼀个程序&#xff0c;对输⼊的4个整数&#xff0c;求出其中的最⼤值和最⼩值&#xff0c;并显⽰出来。 Console.WriteLine("请分别输入四个整数&#xff1a;"); int a Convert.ToInt32(Console.ReadLine()); int b Convert…

Modbus转Profinet网关在污水处理系统中连接PLC和变频器Modbus通信案例

污水处理系统中使用Modbus转Profinet网关可以连接PLC和变频器&#xff0c;实现二者之间的通信。该网关的作用是将PLC与变频器之间的Modbus协议转换为Profinet协议&#xff0c;使两者可以相互沟通。在污水处理系统中&#xff0c;PLC控制污水处理的各个过程&#xff0c;而变频器则…

测试用例的设计方法(全):正交实验设计方法|功能图分析方法|场景设计方发

正交实验设计方法 一.方法简介 利用因果图来设计测试用例时, 作为输入条件的原因与输出结果之间的因果关系,有时很难从软件需求规格说明中得到。往往因果关系非常庞大,以至于据此因果图而得到的测试用例数目多的惊人&#xff0c;给软件测试带来沉重的负担&#xff0c;为了有效…

vue过渡,vue3组合式API详细介绍

7.过渡效果 vue提供了两个内置组件,可以帮助你制作基于状态变化的过渡和动画 Transition会在一个元素或组件进入和离开DOM时应用动画TransitionGroup会在一个v-for列表中的元素或组件被插入,移动,或移除时应用动画 7-1过渡效果 过渡模式 <Transition mode"out-in&q…

Linux文件目录以及文件类型

文章目录 Home根目录 //bin/sbin/etc/root/lib/dev/proc/sys/tmp/boot/mnt/media/usr 文件类型 Home 当尝试使用gedit等编辑器保存文件时&#xff0c;系统默认通常会先打开个人用户的“家”&#xff08;home&#xff09;目录&#xff0c; 建议在通常情况下个人相关的内容也是保…