CSS文本属性

掌握

  • color 设置文本颜色
  • text-align 规定元素中的文本的水平对齐方式。
    • left 默认值/right/center/justify两端对齐
    • CSS3中新增了start和end属性值,在通常情况下,start相当于left,end相当于right
  • line-height 设置行高。
    • normal/数字/百分比/px/em
  • text-indent 设置文本的首行缩进
    • 常用单位像素/百分比/em
  • text-decoration 向文本添加修饰。
    • none 默认值。显示标准的文本。
    • underline 定义文本下划线。
    • overline 定义文本上划线。
    • line-through 定义穿过文本下的一条线。
    • blink 定义闪烁的文本。
    • CSS3中还有一些新增加的属性值但是目前浏览器多不支持,不再介绍
  • letter-spacing 设置字符间距。
    • 定义字符间的固定空间
    • normal 默认。/像素:(允许使用负值)
  • word-spacing 设置字/单词间距。
    • 增加或减少单词间的空白
    • normal 就等同于设置为 0。/如果指定为长度值,会调整字之间的通常间隔;(允许使用负值)。
  • text-transform 设置对象中的文本的大小写
    • none默认。标准的文本。/capitalize每个单词以大写字母开头。/uppercase 转换为大写字母。/lowercase转换为小写字母
  • text-shadow 向文本添加阴影。

熟悉

  • white-space 设置元素中空白的处理方式。
    • normal 默认。空白会被浏览器忽略
    • pre 空白会被浏览器保留。其行为方式类似 HTML 中的pre标签。
    • nowrap 文本不会换行,文本会在在同一行上继续,直到遇到br标签为止。
    • pre-wrap 保留空白符,但是正常地进行换行。
    • pre-line 合并空白符,但是正常地进行换行。
  • direction 设置文本方向
    • ltr默认。文本方向从左到右。/rtl 文本方向从右到左。
  • text-wrap 规定文本的换行规则。
  • word-break 规定非中日韩文本的换行规则。
  • word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。
  • text-fill-color 文本填充颜色,指定文字填充部分的颜色
  • text-stroke 文本边框颜色,指定文字描边部分的颜色
    • text-stroke-width文字的描边宽度
    • text-stroke-color文字的描边颜色
    • 备注:使用该属性需要使用浏览器私有前缀
  • text-overflow 规定当文本溢出包含元素时发生的事情。
  • text-overflow 设置是否使用一个省略标记(...)标示对象内文本的溢出
    • clip: 默认值当对象内文本溢出时不显示省略标记(...),而是将 溢出的部分裁切掉。
    • ellipsis:当对象内文本溢出时显示省略标记(...)。
    • 温馨提示:该属性需要和over-flow:hidden属性、white-space:nowrap配合使用,放到后边章节再讲解

了解

  • text-outline 规定文本的轮廓
  • text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。
  • text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
  • text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
  • unicode-bidi 用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用
    • normal/embed/bidi-override
    • 不常用,了解即可
  • hanging-punctuation 规定标点字符是否位于线框之外。
  • punctuation-trim 规定是否对标点字符进行修剪。
  • tab-size:设定一个tab在页面中的显示长度
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注