段落样式

mac2025-10-19  5

段落样式 设置段落的相关属性、 text-decoration 定义文本装饰 text-transform 定义文本大小写 text-indent 定义文本缩进 text-align 定义文本对齐方式 line-height 定义行高 letter-spacing 定义字间距 word-spacing 定义词间距 text-decoration语法: 文本装饰

<p style="text-decoration: none;">这是一段文本内容</p> 无装饰线 <p style="text-decoration: underline;">这是一段文本内容</p> 下画线 <p style="text-decoration: line-through;">这是一段文本内容</p> 删除线 <p style="text-decoration: overline;">这是一段文本内容</p> 顶画线 <p style="text-decoration: blink;">这是一段文本内容</p> 文本闪烁(闪烁效果目前浏览器都不支持)

文本大小写 Text-decoration none 无转换发生(默认) uppercase 转换成大写 lowercase 转换成小写 capitalize 将每个英文单词的首字母转换成大写,其余无转换发生

<p style="text-transform: none;">This is a lhj</p> 无转换发生 <p style="text-transform: uppercase;">This is a lhj</p> 转换成大写 <p style="text-transform: lowercase;">This is a lhj</p> 转换成小写 <p style="text-transform: capitalize;">This is a lhj</p> 首字母转换大写

文本缩进 text-indent 这没啥说的直接上代码吧

文本对齐方式 text-align 属性 Left----左对齐 right-----右对齐 center-----居中对齐 justify----左右对齐

p style="width: 300px; text-align: left;">文本内容</p> <p style="width: 300px; text-align: right;">文本内容</p> <p style="width: 300px; text-align: center;">文本内容</p> <p style="width: 300px; text-align: justify;">文本内容</p>

定义行高 Line-height

<p style="width: 300px;">百度——全球最大的中文搜索引擎及最大的中文网站, 全球领先的人工智能公司</p> <p style="width: 300px; line-height: 0px;">百度——全球最大的中文搜索引擎及最大的中文网站, 全球领先的人工智能公司</p> <p style="line-height: 30px;">百度——全球最大的中文搜索引擎及最大的中文网站, 全球领先的人工智能公司</p>

字间距 Leeter-spacing

<p style=”width:300px: leeter-spacing:10px”>This is lhj 这是一段文字</p> 宽度为300像素 字间距为10像素 词间距 Word-spacing <p style=:width:200px; word-spacing:10px;>This is lhj 这是一段文字</p>
最新回复(0)