文本属性

217 阅读2分钟

字体——font-family

font-family="a,b,c……"
为多重保障,可同时写多个字体,每个字体用逗号隔开,依次解析。

大小——font-size

px 物理像素
em 为父元素的大小,一般用于适配移动端机型
rem 根据根元素HTML的大小
浏览器默认大小16px;设计图常用字号12px.

风格——font-style

  • italic 倾斜
  • oblique 更倾斜
  • normal 正常 (行内元素em,i也有设置斜体作用,尽量使用块元素包裹)

粗细——font-weight

  • 100:lighter:细 用数字描述最小到100,300与100的区别不大,不会有视觉上的变化;
  • 400:normal:正常 数值在400至500之间;
  • 700:bold:粗 600至900都是加粗,且区别不大,不会有视觉上的变化;
  • 900:bolder:更粗 用数字描述最大到900,与bold区别不大,只是在语意上更强调。

颜色——color

  • 英文描述
    eg:color:red;
  • 十六进制颜色
    eg:color:#ffffff;
    由#+六个字符或数字组成,范围在0至9,a至f之间
  • rgb(red,green,blue)
    eg:color:rgb(42,58,61);
    数值范围在0至255
  • 透明度rgba
    eg:color:rgb(42,58,61,0.3);
    数值范围在0~1,0表示全透明,1表示不透明。

对齐方式——text-align

  • center 居中(适用于图片)
  • lift 左对齐(适用于图片)
  • right 右对齐(适用于图片)
  • justify 两端对齐(只适用于多行文本)

首行缩进——text-indent

单位为px或em

行间距——line-heght

数值单位为px,一般选择比字体大一点,这样不会挤到一起也不会过大。

字符间距——letter-spacing

字母与字母之间的距离。

单词间距——word-spacing

单词与单词之间的距离。

文字上的线条——text-decoration

  • underline 下划线
  • line-through 删除线
  • overline 上划线
  • none 可取消自带的下划线(例如a元素超链接默认有下划线) 可以同时存在:text-decoration:underline line-through overline;

大小写——text-transform

  • capitalize 将文字中每个单词的首字母变成大写
  • lowercase 将文字全部变成小写
  • uppercase 将文字全部变成大写
  • none