【前端】-014-页面制作-CSS-文本样式

2017-01-10  本文已影响14人  9756a8680596

字体样式

  1. 字体大小:font-size: 2em
  2. 字体型号:font-famliy: [ <family-name> | <generic-family> ] #
  3. 字体粗细:font-weight: normal | bold | 100 | 200 | 300 | ……900
  4. 倾斜:font-style: normal | italic | oblique
  1. 行高:line-height: normal | <number> | <length> | <percentage>
  1. 组合包(常用值)font: style | weight | size/line-height | family

    If these conditions are not met, the property is invalid and is entirely ignored.

  1. 字体颜色:color: #ff00ff| color:rgba(0, 0, 0, 0~1)

对齐方式

  1. text-align: left | right | center | justify
  2. vertical-align <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align" >[src]</a> : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>

inline-level and table-cell elements. It also applies to ::first-letter
and ::first-line
.
Percentages refer to the line-height
of the element itself

  1. text-indent<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent">[src]</a>: <lenght> | <percentage>

Applies block containers
Percentages refer to the width of the containing block

其中,如果将text-indent设置一个负的极大值,则里面的文字将跑出容器,达到隐藏文字的作用。

格式处理

  1. 设置是否保留文本的换行和空格等格式,white-space: normal | nowrap | pre | pre-wrap | pre-line
  1. 设置在页面便于让文本支持自动换行,word-wrap: normal | break-word
  1. 设置英文可支持换行自动分割单词,word-break: normal | keep-all | break-all

文本修饰

  1. 设置文本的阴影效果:text-shadow: none | [ <length>{2,3} && <color> ? ]#
  1. 给文本设置下划线上划线和贯穿线的样式:text-decoration: none | [ underline || overline || line-through ]

其他设置

  1. 设置过长文本缩略显示"..."效果
  1. 设置鼠标的指针样式:cursor: [<uri>, ]* [auto | default | none | help | pointer | zoom-in | zoom-out | move]

  2. 强制继承,某一个子元素可设置为父元素的属性值,color: inherit

上一篇 下一篇

猜你喜欢

热点阅读