task0001 关于文字的常见属性

1. 文字缩进 text-indent

1 p {font-size: 12px;}
2 .show{text-indent: 24px;}

字体是12px,首行缩进2个汉子,则设置为缩进24px;

2. 文字大小写转换 text-transform

capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母,仅有小写字母。

3. 文字修饰 text-decoration

    

underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。无浏览器支持

4.文字位置 text-align

left 把文本排列到左边。默认值:由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。

5. 单词之间的间距 word-spacing

 word-spacing:14px; 可为正,可为负

6. 空白 white-space

normal 默认, 空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留文字之间的空白(有几个空白留几个),换行。
pre-line 合并文字之间的空白(只留一个空白符),换行。

7. 文字颜色 color

  red;#fff;rgb(0,0,255)

8. 行高 line-height

 

normal 默认,一般浏览器行行高为110%或120%
number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。

设置文字垂直居中:height:26px;line-height:26px;

缩写line-height,如{font: <font-size>/<line-height>;}

p{font:12px/20px;}

 

 

9. 字体 font-family

 serif和sans serif 比较:

10. 字体大小 font-size

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

把字体的尺寸设置为不同的尺寸,从 xx-small 到 xx-large。

默认值:medium。

smaller 把 font-size 设置为比父元素更小的尺寸。
larger 把 font-size 设置为比父元素更大的尺寸。
length 把 font-size 设置为一个固定的值。
% 把 font-size 设置为基于父元素的一个百分比值。

11. 字体粗细 font-weight

100~900; 400等同于normal,700等同于bold

12. 自定义字体 @font-face 

posted @ 2016-02-24 23:02  CassieLY  阅读(121)  评论(0编辑  收藏  举报