首页笔记列表CSS学习笔记——文本样式

CSS学习笔记——文本样式

浅浅青丘浅浅青丘 2018-10-12 阅读 (697)

font-family

  • 用来指定元素的字体

font-size

  • 用来设置字体的大小

font-style

  • 通常用于指定斜体文本,属性值有:italic,oblique和normal
  • oblique是倾斜,支持较少,与italic斜体非常相似

font-weight

  • 控制文本的粗细,默认值为normal
  • 取值从100到900,其中400与normal相同,700与bold相同
  • 标签也会使文本变粗

font-variant

  • 通过设置这个属性的值可以将字体转换为所有小型大写字母
  • 属性值有:normal和small-caps

color

  • 指定文本颜色

text-align

  • 指定元素中文本的水平对齐方式
  • 属性值有:left,right,center和justify
  • 当文本对齐设置为"justify"时,每行都被拉伸,使得每一行具有相同的宽度,并且左右边距是直的(如在杂志和报纸中)。

vertical-align

  • 设置元素的垂直对齐方式
  • 属性值有:top,middle和bottom,baseline,sub,super,%和px(或pt,cm)

text-decoration

  • 指定文本将如何装饰
  • none:默认值,定义一个正常的文本
  • inherit:从其父元素继承此属性
  • overline:在文本上方绘制水平线
  • underline:在文本下方绘制水平线
  • line-through:在文本中绘制水平线(替换HTML中的标记)
  • blink:可以使文本闪烁,这个值是有效的,但是被弃用,大多数浏览器忽略它

text-indent

  • 指定文本的第一行开始之前应该留下多少水平控件
  • 属性值是长度(px,pt,cm,em),%和inherit
  • 负值是允许的,如果值为负,则第一行向左缩进

text-shadow

  • 为文本添加阴影
  • 第一个值:定义阴影在x(水平)方向的距离
  • 第二个值:定义阴影在y(垂直)方向的距离
  • 第三个值:定义阴影的模糊半径
  • 第四个值:设置阴影的颜色
  • 要向文本添加多个阴影,请添加逗号分隔的阴影列表
  • Internet Explorer 9和更早版本不支持text-shadow属性

text-transform

  • 实现文本的首字母大写,使用属性值:capitalize
  • 实现文本显示为全部大写,使用属性值:uppercase
  • 实现文本显示全部为小写,使用属性值:lowercase
  • none值不会产生任何效果

letter-spacing

  • 指定文本中字符之间的空格
  • normal:定义了默认样式,字符之间没有额外的空间
  • length:用px,pt,cm,mm等测量单位定义字符之间的额外空间
  • inherit:继承自父元素的属性
  • 使用负值可以减少字符之间的间距

world-spacing

  • 指定文本中单词之间的空格
  • normal:定义了默认样式,字符之间没有额外的空间
  • length:用px,pt,cm,mm等测量单位定义字符之间的额外空间
  • inherit:继承自父元素的属性
  • 使用负值可以减少字符之间的间距

white-space

  • 处理元素内的换行符
  • nowrap:会屏蔽该元素中的所有换行符,文本将显示在同一行,直到遇到一个
    标记
  • pre:文本支持所有的换行和空格
  • pre-line:文本支持换行,忽略额外的空格
  • pre-wrap:文本将在必要的时候或者行的结尾进行换行
  • 属性值还有normal和inherit