• 技术文章 >web前端 >css教程

    文本css样式有哪些

    青灯夜游青灯夜游2021-12-09 11:13:52原创2075

    文本css样式有:文本颜色“color”、文本方向“direction”、字符间距“letter-spacing”、文本水平对齐方式“text-align”、文本修饰“text-decoration”、首行缩进“text-indent”等。

    大前端零基础入门到就业:进入学习

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    文本css样式

    属性描述
    color设置文本颜色
    direction设置文本方向。
    letter-spacing设置字符间距
    line-height设置行高
    text-align文本水平对齐方式
    text-decoration向文本添加修饰
    text-indent缩进元素中文本的首行
    text-shadow设置文本阴影
    text-transform控制元素中的字母
    unicode-bidi设置或返回文本是否被重写
    vertical-align文本垂直对齐方式
    white-space设置元素中空白的处理方式
    word-spacing设置字间距

    下面给大家介绍一些css文本样式。

    text-indent首行缩进

    首行缩进是将段落的第一行缩进,这是常用的文本格式化效果。一般地,中文写作时开头空两格,类似于此。

    该属性的值是允许为负值的。

    语法:

    text-indent:<length> | <percentage> | inherit

    tip:初始值为0;

    应用于: 块级元素(包括block和inline-block)

    继承性: 有

    百分数: 相对于包含块的宽度

    案例:首字符下沉

    div {
        width: 200px;
        border: 1px solid black;
        text - indent: 0.5em;
    }
    div: first - letter {
        font - size: 30px;
        float: left;
    }

    text-align水平对齐

    水平对齐是影响一个元素中的文本的水平对齐方式。

    语法:

    text-align: left | center | right | justify | inherit

    初始值: left

    应用于: 块级元素(包括block和inline-block)

    继承性: 有

    对于IE7-浏览器来说,使用text-align不仅会改变文本的水平对齐方式,也会改变后代块级元素的水平对齐方式

    word-spacing字间隔

    字间隔是指单词间距,用来设置文字或单词之间的间距。实际上,"字"表示的是任何非空白符字符组成的串,并由某种空白符包围。

    注意:单词之间用空格分开,单词之间的间距 = word-spacing + 空格大小

    注意:字间隔可为负值

    语法:

    word-spacing: <length> | normal | inherit

    初始值: normal(默认为0)

    应用于: 所有元素

    继承性: 有

    letter-spacing字母间隔

    字母间隔是指字符间距

    注意:字母间隔可为负值

    letter-spacing:<length> | normal | inherit

    初始值: normal(默认为0)

    应用于: 所有元素

    继承性: 有

    text-transform文本转换

    文本转换用于处理英文的大小写转换。

    语法:

    text-transform:uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit

    初始值: none

    应用于: 所有元素

    继承性: 有

    text-decoration文本修饰

    文本修饰用于为文本提供修饰线。

    注意:文本修饰线的颜色与文本颜色相同。

    语法:

    text-decoration:none | [underline(下划线) || overline(上划线) || line-through(中划线)] | inherit

    初始值: none

    应用于: 所有元素

    继承性: 无

    (学习视频分享:css视频教程

    以上就是文本css样式有哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:css 文本样式
    上一篇:css怎样让元素左边没有圆角 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• jquery怎样去掉元素的css属性• css中圆角属性值能用百分比吗• css3颜色透明度怎么写• css怎样设置背景向两个方向渐变• css怎样去除浏览器边框间距• css怎样消除表格间的空格
    1/1

    PHP中文网