【前段基础入门之】=>CSS 常用的字体文本属性

news/2024/3/5 6:14:30/文章来源:https://blog.csdn.net/qq_60961397/article/details/131949884

在这里插入图片描述

导读

这一章,主要分享一些 CSS 中的一些,常用的 字体文本方面的属性。

文章目录

  • 字体属性
    • 字体大小
    • 字体族
    • 字体风格
    • 字体粗细
    • 字体复合写法
  • 文本属性
    • 文本间距
    • 文本修饰
    • 文本缩进
    • 文本水平对齐
    • 行高
    • vertical-align

在这里插入图片描述

字体属性

字体大小

  • 属性名:font-size
  • 作用:控制字体的大小。
  • 语法:
div {font-size: 40px;
}
  • 值得注意
    在这里插入图片描述

扩展

  1. 由于字体设计原因,文字最终呈现的大小,并不一定与 font-size 的值一致,可能大,也可能小。
  2. 通常情况下,文字相对字体设计框,并不是垂直居中的,通常都靠下 一些。

字体族

  • 属性名:font-family
  • 作用:控制字体类型。
  • 语法:
div {font-family: "STCaiyun", "Microsoft YaHei", sans-serif
}
  • 值得注意

在这里插入图片描述


字体风格

  • 属性名:font-style
  • 作用:控制字体是否为斜体
  • 常用值:
    • normal 正常(默认值)
    • italic 斜体(使用字体自带的斜体效果))
    • oblique 斜体(强制倾斜产生的斜体效果)

在这里插入图片描述


字体粗细

  • 属性名: font-weight
  • 作用:控制字体的粗细
  • 常用值:
    • 关键词:
      在这里插入图片描述
    • 数值:
      在这里插入图片描述

字体复合写法

  • 属性名: font

  • 作用:将上述所有字体相关的属性复合在一起编写

  • 编写规则:

    • 字体大小、字体族必须都写上
    • 字体族必须是最后一位、字体大小必须是倒数第二位
    • 各个属性间用空格隔开
  • 实际开发中更推荐复合写法,但这也不是绝对的,比如只想设置字体大小,那就直接用 fontsize 属性。

  • 语法:

span{font: bold italic 100px "微软雅黑";
}

文本属性

文本间距

  • 字母间距:letter-spacing
  • 单词间距: word-spacing (通过空格识别词)
  • 属性值为像素(px),正值让间距增大,负值让间距缩小。

文本修饰

  • 属性名: text-decoration

  • 作用:控制文本的各种装饰线

  • 可选值:

    • none 无装饰线(常用)
    • underline :下划线(常用)
    • overline :上划线
    • line-through : 删除线
  • 可搭配如下值使用:

    • dotted点虚线
    • dashed杠虚线
    • double双下划线
    • wavy:波浪线
    • 也可以指定颜色
  • 语法:

p {text-decoration: underline dotted red;
}

文本缩进

  • 属性名:text-indent
  • 作用:控制文本 首字母的缩进
  • 属性值: css 中的长度单位,例如: px ; rem % …

文本水平对齐

  • 属性名: text-align

  • 作用:控制文本的 水平 对齐方式。

  • 常用值:

    • left 左对齐(默认值)
    • right :右对齐
    • center :居中对齐

行高

  • 属性名: line-height

  • 作用: 控制一行文字的高度。

  • 可选值:

    • normal :由浏览器根据文字大小决定的一个默认值。
  1. 像素( px )。
  2. 数字:参考自身 font-size倍数(很常用)。
  3. 百分比:参考自身 font-size 的百分比
  • 应用场景:

    • 对于多行文字:控制行与行之间的距离
    • 对于单行文字:让 height 等于 line-height ,可以实现文字垂直居中
  • 值得注意

在这里插入图片描述


vertical-align

  • 属性名: vertical-align

  • 作用:用于指定同一行元素之间,或 表格单元格 内文字的 垂直对齐方式

  • 常用值:

    • baseline (默认值):使元素的基线与父元素的基线对齐。
    • top :使元素的顶部与其所在行的顶部对齐。
    • middle :使元素的中部父元素的基线加上父元素字母 x一半对齐。
    • bottom :使元素的底部与其所在行的底部对齐。

注明vertical-align 不能控制元素。


🚵‍♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼‍♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————

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

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

相关文章

inndy_echo

inndy_echo Arch: i386-32-little RELRO: Partial RELRO Stack: No canary found NX: NX enabled PIE: No PIE (0x8048000)32位,只开了NX int __cdecl __noreturn main(int argc, const char **argv, const char **envp) {char s; // [espCh…

麒麟信安服务器操作系统V3.5.2重磅发布!

9月25日,麒麟信安基于openEuler 22.03 LTS SP1版本的商业发行版——麒麟信安服务器操作系统V3.5.2正式发布。 麒麟信安服务器操作系统V3定位于电力、金融、政务、能源、国防、工业等领域信息系统建设,以安全、稳定、高效为突破点,满足重要行…

深度学习——模型选择、欠拟合和过拟合

深度学习——模型选择、欠拟合和过拟合 文章目录 前言一、训练误差和泛化误差1.1. 统计学习理论1.2. 模型复杂性 二、模型选择2.1. 验证集2.2. K折交叉验证 三、欠拟合 or 过拟合3.1. 模型复杂性3.2. 数据集大小 四、多项式回归4.1. 生成数据集4.2. 对模型进行训练和测试4.3. 三…

Elastic SQL 输入:数据库指标可观测性的通用解决方案

作者:Lalit Satapathy, Ishleen Kaur, Muthukumar Paramasivam Elastic SQL 输入(metricbeat 模块和输入包)允许用户以灵活的方式对许多支持的数据库执行 SQL 查询,并将结果指标提取到 Elasticsearch。 本博客深入探讨了通用 SQL …

数据链路层 MTU 对 IP 协议的影响

在介绍主要内容之前,我们先来了解一下数据链路层中的"以太网" 。 “以太网”不是一种具体的网络,而是一种技术标准;既包含了数据链路层的内容,也包含了一些物理层的内容。 下面我们再来了解一下以太网数据帧&#xff…

Transformers.js v2.6 现已发布

🤯 新增了 14 种架构 在这次发布中,我们添加了大量的新架构:BLOOM、MPT、BeiT、CamemBERT、CodeLlama、GPT NeoX、GPT-J、HerBERT、mBART、mBART-50、OPT、ResNet、WavLM 和 XLM。这将支持架构的总数提升到了 46 个!以下是一些示例…

ubuntu20安装nvidia驱动

1. 查看显卡型号 lspci | grep -i nvidia 我的输出: 01:00.0 VGA compatible controller: NVIDIA Corporation GP104 [GeForce GTX 1080] (rev a1) 01:00.1 Audio device: NVIDIA Corporation GP104 High Definition Audio Controller (rev a1) 07:00.0 VGA comp…

stable diffusion模型评价框架

GhostReview:全球第一套AI绘画ckpt评测框架代码 - 知乎大家好,我是_GhostInShell_,是全球AI绘画模型网站Civitai的All Time Highest Rated (全球历史最高评价) 第二名的GhostMix的作者。在上一篇文章,我主要探讨自己关于ckpt的发展方向的观点…

测试用例的编写(面试常问)

作者:爱塔居 专栏:软件测试 作者简介:不断总结,才能变得更好~踩过的坑,不能再踩~ 文章简介:常见的几个测试用例。 一、淘宝购物车 二、登录页面 三、三角形测试用例 abc结果346普通三角形333等边三角形334…

Scala第一章节

Scala第一章节 scala总目录 章节目标 理解Scala的相关概述掌握Scala的环境搭建掌握Scala小案例: 做最好的自己 1. Scala简介 1.1 概述 ​ Scala(斯嘎拉)这个名字来源于"Scalable Language(可伸缩的语言)", 它是一门基于JVM的多范式编程语言, 通俗的说: Scala是一…

【从入门到起飞】JavaSE—Stream流

🎊专栏【JavaSE】 🍔喜欢的诗句:更喜岷山千里雪 三军过后尽开颜。 🎆音乐分享【如愿】 🥰欢迎并且感谢大家指出我的问题 文章目录 🍔Stream流的作用🍔Stream流的使用步骤🎄获取Strea…

Android Shape设置背景

设置背景时&#xff0c;经常这样 android:background“drawable/xxx” 。如果是纯色图片&#xff0c;可以考虑用 shape 替代。 shape 相比图片&#xff0c;减少资源占用&#xff0c;缩减APK体积。 开始使用。 <?xml version"1.0" encoding"utf-8"?…

100行 python实现Android与windows局域网文件夹同步

编程解决一切烦恼 Obsidian搭建个人笔记 最近在使用Obsidian搭建个人云笔记 尽管我使用腾讯云COS图床gitee实现了云备份&#xff0c;但是在Android上使的Obsidian备份有点麻烦。还好我主要是在电脑端做笔记&#xff0c;手机只是作为阅读工具。 所以&#xff0c;我写一个局域…

Spring Boot 技术架构图(InsCode AI 创作助手辅助)

Spring Boot 技术架构是一种用于构建现代应用程序的框架&#xff0c;它可以与各种前端、代理、网关、业务服务、中间件、存储、持续集成和容器服务集成在一起&#xff0c;以创建功能强大的应用程序。 源文件下载链接&#xff01;&#xff01;&#xff01;&#xff01;&#xff…

02-Zookeeper实战

上一篇&#xff1a;01-Zookeeper特性与节点数据类型详解 1. zookeeper安装 Step1&#xff1a; 配置JAVA环境&#xff0c;检验环境&#xff1a; java -versionStep2: 下载解压 zookeeper wget https://mirror.bit.edu.cn/apache/zookeeper/zookeeper-3.5.8/apache-zookeepe…

Android Studio 的aapt2.exe在哪个目录下

一般在&#xff1a;C:\Users\admin\AppData\Local\Android\Sdk\build-tools\30.0.2&#xff08;不一定是30.0.2&#xff0c;这个得看你的版本&#xff09; 怎么找&#xff1a; 1.打开Android studio

unity lua开发体系搭建

在前面的文章里面我们已经介绍了怎么样在unity里面配置lua的开发环境&#xff0c;我们可以通过C#代码装载lua的脚本并执行相应的处理&#xff0c;这次我们一步步搭建下lua的开发体系。 1.基于c#体系所有的类都继承MonoBehaviour在这里lua环境下我们也需要创建一个类似于这个类的…

9月的一些琐碎,但值得记录的事情!

明显感觉时间过得好快&#xff0c;上个月还在写8月的小结&#xff0c;马上就是9月的了。 9月份比较忙&#xff0c;但是很充实&#xff0c;可能自己创业做事情&#xff0c;多少更有动力一些。 1. 要说&#xff19;月份最大的事情&#xff0c;就是女儿开始上幼儿园了&#xff0c;…

功率放大器有哪些要求和标准参数

功率放大器是一种常见的电子设备&#xff0c;用于将输入信号增强到更高的功率级别。为了满足不同应用需求&#xff0c;功率放大器需要符合一些特定的要求和标准参数。 在现代电子设备中&#xff0c;功率放大器广泛应用于各种领域&#xff0c;如通信、音频放大、射频放大等。它们…

APP自动化之weditor工具

由于最近事情颇多&#xff0c;许久未更新文章。大家在做APP自动化测试过程中&#xff0c;可能使用的是Appium官方提供的inspect进行元素定位&#xff0c;但此工具调试不方便&#xff0c;于是今天给大家分享一款更好用的APP定位元素工具&#xff1a;weditor weditor基于web网页…