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

CSS 常用样式-文本属性

一、水平对齐 text-align

CSS中的text-align属性用于水平对齐文本。它可以应用于块级元素和表格单元格。

常见的属性值包括:

  • left:左对齐,文本在容器的左侧。
  • right:右对齐,文本在容器的右侧。
  • center:居中对齐,文本在容器的中间位置。
  • justify:两端对齐,文本在容器中填充,单词之间用空格填充。

示例代码:

<div style="text-align: left;">左对齐文本</div>
<div style="text-align: right;">右对齐文本</div>
<div style="text-align: center;">居中对齐文本</div>
<div style="text-align: justify;">两端对齐文本,文字会自动分布到整个容器宽度,单词之间用空格填充</div>

注意:text-align属性只对文本起作用,如果想要对块级元素内的其他内容(如图片、表格)进行对齐,需要使用其他的CSS属性。

二、文本修饰 text-decoration

CSS中的text-decoration属性用于控制文本的装饰效果,如下划线、删除线、上划线等。

常用的取值如下:

  1. none:默认值,文本不带任何修饰效果。

  2. underline:文本下方带下划线。

  3. overline:文本上方带上划线。

  4. line-through:文本中间带一条删除线。

  5. blink:文本闪烁。

除了以上常用的取值外,text-decoration还可以进一步设置颜色、样式、线宽等属性,例如:

text-decoration: underline double red;

此代码表示文本下方带双线下划线,线的颜色为红色。

text-decoration: line-through wavy #999;

此代码表示文本中间带波浪线删除线,线的颜色为#999。

三、缩进 text-indent

CSS中的text-indent属性用于设置文本的缩进。它可以用于段落或其他块级元素,使第一行或每行都缩进指定的像素值或百分比值。缩进的方向取决于文本的方向。例如,对于从左到右的文本,正值的text-indent将使文本向右缩进,而负值的text-indent将使文本向左缩进。

语法:

selector {text-indent: value;
}

示例:

p {text-indent: 25px; /* 段落第一行缩进 25px */
}h1 {text-indent: 2em; /* 标题第一行缩进 2个字母的宽度 */
}blockquote {text-indent: -50px; /* 引用块向左缩进 50px */
}

http://www.lryc.cn/news/184042.html

相关文章:

  • BootstrapBlazor企业级组件库:前端开发的革新之路
  • 力扣 -- 1745. 分割回文串 IV
  • C# 给某个方法设定执行超时时间
  • 安装NodeJS并使用yarn下载前端依赖
  • (Java高级教程)第三章Java网络编程-第八节:博客系统搭建(前后端分离)
  • 901. 股票价格跨度
  • JavaScript中的模块化编程,包括CommonJS和ES6模块的区别。
  • 从零开始 Spring Cloud 13:分布式事务
  • 2023Node.js零基础教程(小白友好型),nodejs新手到高手,(二)NodeJS入门——buffer模块、计算机基础、fs模块、path模块
  • lua如何调用C/C++
  • 简单聊一聊公平锁和非公平锁,parallel并行流
  • 【SpringCloud】微服务技术栈入门4 - RabbitMQ初探
  • cefsharp(117.2.20)cef117.2.2最新体验版
  • layui在上传图片在前端处理图片压缩
  • js 事件参考
  • 卷积网络的发展历史-LeNet
  • (2023,GPT-4V,LLM,LMM,功能和应用)大型多模态模型的黎明:GPT-4V(ision) 的初步探索
  • 【C++设计模式之装饰模式:结构型】分析及示例
  • 绘制散点图、曲线图、折线图和环形图失败, 设置迭代次数和进度无法保存图片
  • micro-ROS中对消息的内存管理
  • Springboot中使用拦截器、过滤器、监听器
  • 代码随想录二刷day45
  • 泊车功能专题介绍 ———— AVP系统基础数据交互内容
  • 蓝桥杯每日一题2023.10.6
  • 7、【Qlib】【主要组件】Data Layer:数据框架与使用
  • Kubernetes安装部署 1
  • 在VS Code中优雅地编辑csv文件
  • LCR 128.库存管理 I
  • eigen::Affine3d 转换
  • 【Python从入门到进阶】38、selenium关于Chrome handless的基本使用