zoukankan      html  css  js  c++  java
  • CSS 文本样式

    字体类 (font)

    font 设置或检索对象中的文本特性。该属性是复合属性。

    • font:[ [ <’ font-style ‘> || <’ font-variant ‘> || <’ font-weight ‘> ]? <’ font-size ‘> [ / <’ line-height ‘> ]? <’ font-family ‘> ]

    font-style : 指定文本字体样式

    • normal:指定文本字体样式为正常的字体 
      • italic: 指定文本字体样式为斜体。对于没有设计斜体的特殊字体,如果要使用斜体外观将应用oblique
      • oblique: 指定文本字体样式为倾斜的字体。人为的使文字倾斜,而不是去选取字体中的斜体字

    font-variant:指定文本是否为小型的大写字母

    • normal: 正常的字体
    • small-caps:小型的大写字母字体

    font-weight:指定文本字体的粗细

    • normal: 正常的字体。相当于数字值400
    • bold: 粗体。相当于数字值700。
    • bolder: 定义比继承值更重的值
    • lighter: 定义比继承值更轻的值
    • integer: 用数字表示文本字体粗细。取值范围:100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

    font-size: 指定文本字体尺寸

    line-height: 指定文本字体的行高,即字体最底端与字体内部顶端之间的距离

    • normal: 允许内容顶开或溢出指定的容器边界。
    • length: 用长度值指定行高。不允许负值。
    • percentage: 用百分比指定行高,其百分比取值是基于字体的高度尺寸。不允许负值。
    • number: 用乘积因子指定行高。不允许负值。

    font-family : 指定文本使用某个字体或字体序列

    • family-name = arial | georgia | verdana | helvetica | simsun and etc(字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文,则应使用引号括起)
    • generic-family = cursive | fantasy | monospace | serif | sans-serif(字体序列名称)
    • body { font-family: helvetica, verdana, sans-serif; }

    14. 文本类(text)

    text-transform 检索或设置对象中的文本的大小写

    • none: 无转换
    • capitalize: 将每个单词的第一个字母转换成大写
    • uppercase: 将每个单词转换成大写
    • lowercase: 将每个单词转换成小写

    white-space设置或检索对象内空格的处理方式

    • normal: 默认处理方式。
    • pre: 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅pre对象
    • nowrap: 强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br对象。
    • pre-wrap: 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。
    • pre-line: 保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。

    word-break 设置或检索对象内文本的字内换行行为

    • normal: 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行。
    • keep-all: 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本。
    • break-all: 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本,比如使连续的英文字母间断行。 
      对于解决防止页面中出现连续无意义的长字符打破布局,应该使用break-all属性值;

    word-wrap 设置或检索当内容超过指定容器的边界时是否断行

    • normal: 允许内容顶开或溢出指定的容器边界。
    • break-word: 内容将在边界内换行。如果需要,单词内部允许断行。

    overflow-wrap 设置或检索当内容超过指定容器的边界时是否断行

    • normal: 允许内容顶开或溢出指定的容器边界。
    • break-word: 内容将在边界内换行。如果需要,单词内部允许断行。 
      CSS3中将 <' word-wrap '> 改名为 <' overflow-wrap '>

    text-align 设置或检索对象中内容的水平对齐方式

    • left: 内容左对齐。
    • center: 内容居中对齐。
    • right: 内容右对齐

    word-spacing 检索或设置对象中的单词之间的最小,最大和最佳间隙

    • normal: 默认间隔
    • length: 用长度值指定间隔。可以为负值。
    • percentage: 用百分比指定间隔。可以为负值。(CSS3)

    letter-spacing 检索或设置对象中的字符之间的最小,最大和最佳间隙

    • normal: 默认间隔
    • <length>: 用长度值指定间隔。可以为负值。
    • <percentage>: 用百分比指定间隔。可以为负值。(CSS3)

    text-indent 检索或设置对象中的文本的缩进

    • <length>: 用长度值指定文本的缩进。可以为负值。
    • <percentage>: 用百分比指定文本的缩进。可以为负值。

    vertical-align 设置或检索内联元素在行框内的垂直对其方式

    • baseline: 将支持valign特性的对象的内容与基线对齐
    • sub: 垂直对齐文本的下标
    • super: 垂直对齐文本的上标
    • top: 将支持valign特性的对象的内容与对象顶端对齐
    • text-top: 将支持valign特性的对象的文本与对象顶端对齐
    • middle: 将支持valign特性的对象的内容与对象中部对齐
    • bottom: 将支持valign特性的对象的文本与对象底端对齐
    • text-bottom: 将支持valign特性的对象的文本与对象顶端对齐
    • percentage: 用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。
    • length: 用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。(CSS2)

    line-height 检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离

    • normal: 允许内容顶开或溢出指定的容器边界。
    • <length>: 用长度值指定行高。不允许负值。
    • <percentage>: 用百分比指定行高,其百分比取值是基于字体的高度尺寸。不允许负值。
    • <number>: 用乘积因子指定行高。不允许负值。

     

  • 相关阅读:
    C# 使用NPOI 实现Excel的简单导入导出
    C# 根据Excel模版导出文件
    移动通信第九组网络抓包作业
    武金龙老师的教导(第9小组)
    【Python核心编程笔记】一、Python中一切皆对象
    自己喜欢的几个前端框架
    2018-1-6-个人博客、博客园、微信公众号、Github、本地同步写博客
    2018-1-6-IDEA快速代码生成
    CodeMirror动态修改代码(关键: editor.getDoc().setValue(data); editor.refresh();)
    FaceId枚举表(用于VBA的加载项)
  • 原文地址:https://www.cnblogs.com/zhangyongxi/p/9549296.html
Copyright © 2011-2022 走看看