CSS的文本属性

text-align属性

指定文本的水平对齐方式

left: 文本居左对齐(默认值)

right: 居右对齐

center:居中对齐

css 复制代码
   .p1{
            text-align: left;
        }
        .p2{
            text-align: right;
        }
        .p3{
            text-align: center;
        }

text-decorration属性

规定添加到文本的修饰,下划线,上划线,删除线等。

underline:下划线

overline: 上划线

line-through: 删除线

css 复制代码
 .p1{
            text-align: left;
            text-decoration: underline;
        }
        .p2{
            text-decoration: overline;
            text-align: right;
        }
        .p3{
            text-decoration: line-through;
            text-align: center;
        }

text-transtorm属性

规定文本的下小写。

captialize: 定义每个单词开头大写

uppercase: 定义全部大写

lowercase: 定义全部小写

html 复制代码
​
  <p class="p1">define how each word starts with a capital case</p>
    <p class="p2">define all caps</p>
    <p class="p3">DEFINE ALL LOOWERCASE</p>
​
css 复制代码
  .p1{
        text-transform: capitalize;
        }
        .p2{
            text-transform: uppercase;
        }
        .p3{
            text-transform: lowercase;
        }
    </styl
css 复制代码
  .p1{
        text-transform: capitalize;
        }
        .p2{
            text-transform: uppercase;
        }
        .p3{
            text-transform: lowercase;
        }
   

text-indent属性

规定文本块中首航文本的缩进(单位px)

css 复制代码
 p{
            text-indent: 30px;
        }
相关推荐
失忆爆表症3 小时前
05_UI 组件库集成指南:Shadcn/ui + Tailwind CSS v4
前端·css·ui
会一丢丢蝶泳的咻狗9 小时前
Sass实现,蛇形流动布局
前端·css
EchoEcho13 小时前
记录overflow:hidden和scrollIntoView导致的页面问题
前端·css
im_AMBER14 小时前
告别“玄学”UI:从“删代码碰运气”到“控制 BFC 结界”
前端·css
芳草萋萋鹦鹉洲哦15 小时前
【Tailwind】动画解读:Tailwind CSS Animation Examples
前端·css
Mr Xu_1 天前
前端开发中CSS代码的优化与复用:从公共样式提取到CSS变量的最佳实践
前端·css
Lee川1 天前
CSS盒模型实战:用代码透视 `border-box`与 `content-box`的天壤之别
css
哈里谢顿2 天前
CSS 入门完全指南:从零构建你的第一个样式表
css
. . . . .2 天前
CSS 编写与管理范式 - Tailwind和CSS-in-JS
css
RFCEO2 天前
前端编程 课程十六、:CSS 盒子模型
css·前端基础课程·css盒子模型·css盒子模型的组成·精准控制元素的大小和位置·css布局的基石·内边距(padding)