首页 > 软件开发 > HTML >

css文本的相关属性

来源:互联网 2023-03-16 19:16:26 418

css如何控制文本的相关属性,如颜色。NuU办公区 - 实用经验教程分享!

工具/原料

  • phpstorm
  • html文件

方法/步骤

  • 1

    下面的案例都以p标签为例,下图为没有添加文本样式的p标签和运行后的效果。下面为演示方便,css使用的是内联样式表,建议大家使用外部样式表,方便后期的维护。NuU办公区 - 实用经验教程分享!

    css文本的相关属性NuU办公区 - 实用经验教程分享!

    css文本的相关属性NuU办公区 - 实用经验教程分享!

  • 2

    一、text-indentNuU办公区 - 实用经验教程分享!

    该属性可以方便地实现文本缩进。NuU办公区 - 实用经验教程分享!

    通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。NuU办公区 - 实用经验教程分享!

    这个属性最常见的用途是将段落的首行缩进,下面的规则的值使用了em、百分比、负值、和像素(如果设置为负值,则往左边缩进该数值):NuU办公区 - 实用经验教程分享!

    css文本的相关属性NuU办公区 - 实用经验教程分享!

    css文本的相关属性NuU办公区 - 实用经验教程分享!

  • 3

    二、text-alignNuU办公区 - 实用经验教程分享!

    text-align是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式,如图所示:NuU办公区 - 实用经验教程分享!

    css文本的相关属性NuU办公区 - 实用经验教程分享!

    css文本的相关属性NuU办公区 - 实用经验教程分享!

  • 4

    三、word-spacingNuU办公区 - 实用经验教程分享!

    word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。NuU办公区 - 实用经验教程分享!

    word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近:NuU办公区 - 实用经验教程分享!

    css文本的相关属性NuU办公区 - 实用经验教程分享!

    css文本的相关属性NuU办公区 - 实用经验教程分享!

  • 4本页面未经授权抓取自百度经验
  • 5

    四、letter-spacingNuU办公区 - 实用经验教程分享!

    NuU办公区 - 实用经验教程分享!

    letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。NuU办公区 - 实用经验教程分享!

    与 word-spacing 属性一样,letter-spacing 属性的可取值包括所有长度。默认关键字是 normal(这与 letter-spacing:0 相同)。输入的长度值会使字母之间的间隔增加或减少指定的量:NuU办公区 - 实用经验教程分享!

    css文本的相关属性NuU办公区 - 实用经验教程分享!

    css文本的相关属性NuU办公区 - 实用经验教程分享!

  • 6

    五、text-transformNuU办公区 - 实用经验教程分享!

    该属性用来改变文本的格式:NuU办公区 - 实用经验教程分享!

    css文本的相关属性NuU办公区 - 实用经验教程分享!

    css文本的相关属性NuU办公区 - 实用经验教程分享!

  • 7

    六、text-decorationNuU办公区 - 实用经验教程分享!

    NuU办公区 - 实用经验教程分享!

    text-decoration 有 5 个值:NuU办公区 - 实用经验教程分享!

    noneNuU办公区 - 实用经验教程分享!

    underlineNuU办公区 - 实用经验教程分享!

    overlineNuU办公区 - 实用经验教程分享!

    line-throughNuU办公区 - 实用经验教程分享!

    blinkNuU办公区 - 实用经验教程分享!

    这是一个很有意思的属性,它提供了很多非常有趣的行为

    NuU办公区 - 实用经验教程分享!

    NuU办公区 - 实用经验教程分享!

    NuU办公区 - 实用经验教程分享!

    css文本的相关属性NuU办公区 - 实用经验教程分享!

    css文本的相关属性NuU办公区 - 实用经验教程分享!

  • 注意事项

    • 1em并不是固定等于多少像素的,而是根据元素的字体大小而定,如果是等宽字体(即每个字符的宽度都是一样的),1em就是1个字符的宽度,如果是比例字体(通常只有英文字体才有)则1em等于英文大写字母“M”的宽度。 通常我们可以这样来理解:如果把某个元素的font-size设为16px,那么1em就等于16px,2em就是32px,等等。但是要注意的是,这个转换关系只有在这个元素中才成立哦,如果换一个字体大小不是16px的元素,那么1em就不是16px了哦。

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!NuU办公区 - 实用经验教程分享!


    标签: CSSHTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码