CSS 常用样式-文本属性

一、水平对齐 text-align

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

常见的属性值包括:

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

示例代码:

html 复制代码
<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还可以进一步设置颜色、样式、线宽等属性,例如:

css 复制代码
text-decoration: underline double red;

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

css 复制代码
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 */
}
相关推荐
YBN娜3 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=4 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck8 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!29 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。34 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼40 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093344 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架