当前位置: 首页 > ai >正文

【前端基础】6、CSS的文本属性(text相关)

目录内容

  • text-decoration:设置文本装饰线
  • text-transform:文本中文字的大小写转换
  • text-indent:首行缩进
  • text-align:设置文本对齐方式

一、text-decoration:设置文本装饰线

常见值:

  • None:没有任何装饰线。(可以去除a元素默认的下划线。)
  • underline:下划线
  • overline:上划线
  • line-through:中划线(删除线)

none:去除a元素默认的下划线
在这里插入图片描述
在这里插入图片描述

underline在这里插入图片描述

overline在这里插入图片描述

line-through
在这里插入图片描述

二、text-transform:文本中文字的大小写转换

常见值:

  • None:没有任何影响
  • capitalize:将每个单词的首字母大写。
  • uppercase:所有字母大写
  • lowercase:所有字母小写

None
在这里插入图片描述

capitalize
在这里插入图片描述

uppercase
在这里插入图片描述

lowercase
在这里插入图片描述

三、text-indent:首行缩进

例: text-indent: 8em;
在这里插入图片描述

四、 text-align:设置行内的内容(例如文字)的对齐方式

定义行内的内容(例如文字)相对于它的父块元素对齐方式。
常见值:

  • left:左对齐
  • right:右对齐
  • center:正中间显示
  • justify:两端对齐 (flex布局会替代掉这个,所以这个用不到。)

left
在这里插入图片描述

right
在这里插入图片描述

center
在这里插入图片描述

justify
我们对比一下,看的更清晰。
①这是left
在这里插入图片描述
②这是justify
在这里插入图片描述

(内容源自网络,效果更明显)
在这里插入图片描述
在这里插入图片描述
实际上最后一行的内容可以看到,并没有实现两端对齐。
这时候就要结合: text-align-last
在这里插入图片描述
在这里插入图片描述

注意:
text-align不单单指的是文字。只要是行内级别的元素
,都可以控制它的所在位置。

  1. HTML中的块元素与行内元素(来自CSDN别人的博客)

  2. 来自百度AI:
    在这里插入图片描述

http://www.xdnf.cn/news/4342.html

相关文章:

  • 嵌入式通信协议总览篇:万物互联的基石
  • 记一次SSE数据被缓存导致实时性失效问题
  • 链表——C语言
  • 常见的卷积神经网络列举
  • 用go从零构建写一个RPC(仿gRPC,tRPC)--- 版本1(Client端)
  • Umi+React+Xrender+Hsf项目开发总结
  • 基于Django汽车数据分析大屏可视化系统项目
  • SSHv2 密钥交换(Key Exchange)详解
  • 体育培训的实验室管理痛点 质检LIMS如何重构体育检测价值链
  • TikTok 矩阵运营新手实操保姆级教程 2.0 版本
  • 从一次被抄袭经历谈起:iOS App 安全保护实战
  • 【AWS+Wordpress-准备阶段】AWS注册+创建EC2实例
  • Scrapy框架之Scrapyd部署及Gerapy分布式爬虫管理框架的使用
  • 记录学习《手动学习深度学习》这本书的笔记(十)
  • 协方差与皮尔逊相关系数:从定义到应用的全面解析
  • isNotBlank和isNotEmpty有什么区别?
  • Python学习笔记--FastAPI入门常规操作
  • penEuler操作系统结合豆包测试github仓库8086-Emulator项目
  • react中的用法——setDisabled dva dispatch effects
  • leetcode 160. 相交链表
  • os梳理5——第五章:存储器管理
  • 汽车免拆诊断案例|车辆行驶中急加速车身抖动故障排除 2 例
  • C# NX二次开发:投影曲线和偏置曲线UFUN函数详解
  • Redis--哈希类型
  • 深度学习中的autograd与jacobian
  • C++ 日志系统实战第四步:设计与代码实现详解
  • 从0开始学习大模型--Day03--Agent规划与记忆
  • “胖都来”商标申请可以通过注册不!
  • 如何应对客户在验收后提出新需求?
  • ESP32蓝牙开发笔记(十四)