第十六天学习：CSS特性之文本格式化

关键字：文本格式化

学习计划：

  • 文本格式化
    • color特性
    • text-align特性
    • vertical-align特性
    • text-decoraton特性
    • text-indent特性
    • text-shadow特性
    • text-transform特性
    • letter-spacing特性
    • word-spacing特性
    • white-space特性
    • direction特性
    • unicode-bid特性
  • 文本伪类
    • first-letter伪类
    • first-line伪类

学习记录：

  • color特性
    • 用于指定文本的颜色，这个属性设置了一个元素的前景色（在HTML表现中，就是文本的颜色）；光栅图像不受color影响。这个颜色还会应用到元素的所有边框，除非被border-color或另外某个边框颜色属性覆盖。
    • 要设置一个元素的前景色，最容易的方法是使用color属性
    • 可能的值：
      • color_name 规定颜色值为颜色名称的颜色（比如red）
      • hex_number规定颜色值为十六进制值的颜色（比如#ff0000）
      • rgb_bumber规定颜色值为rgb代码的颜色（比如rgb（255,0,0））
      • inherit规定应该从父元素继承颜色
  • text-align特性
    • 属性规定元素中的文本的水平对齐方式
    • 该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。
    • 可能的值：
      • left  把文本排列到左边，默认值：由浏览器决定
      • right  把文本排列到右边
      • center  把文本排列到中间
      • justify  实现两端对齐文本效果
      • inherit 从父元素继承text-align属性的值
  • vertical-align特性
    • 当操作内联元素（特别是图像和文本的某些部分）时，vertical-align特性非常有用，可使用该属性控制内联元素在包含元素内联元素在包含元素内的垂直位置
    • 值：
      • baseline        所有内容都与父元素的基线对齐（默认设置）
      • sub     使元素成为下标。对于图像，它的顶部应当与基线对齐。对于文本、字体主体的顶部应当与基线对齐
      • super   使元素成为上标。对于图像，它的底部应当与字体的顶部平齐。对于文本，下行字母（位于文本行下方的g或p等字母的部分）的底部应该与字体主体的顶部对齐
      • top     文本的顶部和图像的顶部应当与该行中最高元素的顶部对齐
      • text-top   文本的顶部和图像的顶部应与该行中最高文本的顶部对齐
      • middle  元素的垂直中点应当与父元素的垂直中点对齐
      • bottom   文本的底部和图像的底部应当与该行中最低元素的底部对齐
      • text-bottom   文本的底部和图像的底部应当与该行中最低文本的底部对齐
  • text-decoraton特性
    • 规定添加到文本的修饰
    • 值：
      • underline      在内容下方添加一条线
      • overline    在内容顶部添加一条线
      • line-through  类似于删除文本，使用一条线穿越文本的中间。通常，该值仅使用于标识文本，以表明这些文本被删除
      • bink  创建闪烁的文本（这通常被认为是不赞成使用或令人讨厌的方式）
  • text-indent特性
    • 规定文本块中首行文本的缩进，允许使用负值，如果使用负值，那么首行会被缩进到左边
    • 值：
      • length  定义固定的缩进，默认值：0
      • %  定义基于父元素宽度的百分比缩进
  • text-shadow特性
    • 用于创建阴影，阴影是单词的黑色版本，它位于单词的下方，并且稍微有些偏移。阴影通常用于打印的媒体
    • 取值
      • none：无阴影
      • <length>①：第一个长度值用来设置对象阴影水平偏移量，可以为负值
      • <length>②：第一个长度值用来设置对象阴影垂直偏移量，可以为负值
      • <length>③：如果提供了第三个长度则用来设置对象的阴影模糊值，不允许为负值
      • <color>：设置对象的阴影的颜色
  • text-transform特性
    • 用于指定元素内容的大小写
    • 值：
      • none  不发生任何改变
      • capitalize  每个单词的第一个字母大写
      • uppercase 元素的整个内容都大写
      • lowercase  元素的整个内容都小写
  • letter-spacing特性
    • 用于增加或减少字符间的空白（字符间距）
    • 该属性定义了在文本字符框之间插入多少空间，由于字符字形通常比其他字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal就相当于值为0，可以使用负值，这会让字母之间挤得更紧
    • 值：
      • normal 规定字符之间没有额外的空间（默认）
      • length  定义字符间的固定空间（允许使用负值）
  • word-spacing特性
    • 用于设置单词间的距离，它的值应该是一种长度单位
  • white-space特性
    • 控制是否在块级元素内或者之间保留空白。默认情况下，浏览器将两个或多个相邻空格改为单个空格，并且将任何按下Enter键也改为单个空格
    • 值：
      • normal 采用普通的空白折叠规则
      • pre 空白被保留
      • nowrap 仅在显示的提供<br/>元素后，文本才会换行，否则不会换行
      • pre-wrap 保留空白符序列，但是正常地进行换行
      • pre-line 合并空白符序列，但是保留换行符
    • white-space 属性的行为：
    • 　　
  • direction特性
    • 类似于dir属性，它用于指定文本流动的方向
    • 值：
      • ltr  默认，文本方向从左到右
      • rtl 文本方向从右到左
  • unicode-bid特性
    • 为了国际化目的，名称中的bidi是bi-direction（双向）的缩写。该特性允许单词的显示方向参考unicode标准，并且作者能够将元素内容的方向改为与unicode标准相反
    • 值：
      • normal   不允许任何输入的嵌入
      • embed  元素启用额外的嵌入规则，并且将遵循计划的unicode方向
      • bidi-ovemide 重写内联元素的默认方向值
  • first-letter伪类
    • 用于向文本的首字母设置特殊样式，只能用于块级元素
    • 语法例：p.pageone：first-letter{font-size：42px}
    • 下面的属性可用于“first-letter”伪元素：
      • font
      • color
      • background
      • margin
      • padding
      • border
      • text-decoration
      • vertical-align（仅当float为none时）
      • text-transform
      • line-height
      • float
      • clear
  • first-line伪类
    • 用于向文本的首行设置特殊样式，只能用于块级元素
      • 下面的属性可用于“first-liner”伪元素：
      • font
      • color
      • background
      • padding
      • border
      • text-decoration
      • vertical-align（仅当float为none时）
      • text-transform
      • line-height
      • clear

扩展阅读：

  • CSS颜色
    • 十六进制色
      • 十六进制颜色是这样规定的：#RRGGBB，其中RR(红色)、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有的值必须介于0与FF之间
    • RGB颜色值
      • rgb颜色值是这样规定：rgb（red，green，blue）。每个参数（red、green以及blue）定义颜色的强度，可以是介于0与255之间的整数，或者百分比值（从0%到100%）
    • 17种标准色：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow。
  • 对CSS vertical-align的一些理解和认识
  • 了解CSS text-decoration新特性新表现
    • 新的text-decoration-style类型
      • 值：
        • solid    默认值，线条显示为单线
        • double  线条显示为双线
        • dotted  线条显示为点状线
        • dashed   线条显示为虚线
        • wavy   线条显示为波浪线
    • text-decoration-skip
      • 文字和线的覆盖关系
      • 值：
        • objects      装饰线跳过内联对象（默认值）
        • none   装饰线穿过一切，包括本应跳过的内联对象
        • spaces   装饰线跳过空格或字符间分隔，以及letter-spacing或word-spacing形成的间距
        • edges   装饰性起始于内容其实边缘后面，结束语内容结束边缘的前面，这个属性值的目的是为了让两个搞在一起的下划线元素看上去公用一条下划线。这对于中文字体很有用，因为会使用下划线作为标点符号
        • box-decoration   装饰线跳过继承的margin，border以及padding
        • trailing-spaces  装饰线跳过pre或white-space：pre-wrap里面前后空格

问题的记录与解决：

  • 关于值justify
  • 为什么text-decoration-style的特性样式显示不了
  • letter-spacing和word-spacing之间的区别
    • letter-spacing和word-spacing这两个属性都用来添加他们对应的元素中的空白。letter-spacing添加字母之间的空白，而word-spacing添加每个单词之间的空白。注意：word-spacing对中文无效。
  • CSS伪元素中的伪是什么意思？
posted @ 2016-07-23 16:01  桂  Views(174)  Comments(0)    收藏  举报