字体和文本相关属性

字体相关的属性

1.字体大小
  属性:font-size
  取值:像素值或em 1em = 16px

2.字体粗细程度
  属性:font-weight
  取值:1.关键字 light (超细)/ normal(正常) / bold(加粗)
     2.整百取值100-900,数值越大,字体越粗
      100(lighter) 400(normal) 700(bold)

3.字体名称
  属性:font-family
  取值:字体名称
  注意:1.如果字体名称是中文或者是由多个英文单词组成,书写时需要加引号。
     2.可以同时指定多个字体名称,中间以,隔开,当浏览器不支持第一种字体是,会按照顺序依次以后面的字体名称显示。

4.字体的样式
  属性:font-style
  取值:1.normal 正常显示
     2.italic 斜体显示
     3.oblique 字体倾斜显示,出现倾斜效果,默认(45°)
  注意:oblique可以将字体倾斜一定角度,默认倾斜效果与italic倾斜没有差别

5.字体属性简写
  1.属性:font
  2.取值:style weight size family
    注意:1.同时设置四个属性值时,参照给定顺序书写
       2.font-size和font-family是必填项,不能省略

文本相关的属性

1.文本颜色
  属性 :color
  取值 :颜色值

2.文本装饰线
  属性 :text-decoration
  取值 :1. underline :下划线
     2. overline :上划线
     3. line-through :删除线
     4. none : 针对超链接,取消默认下划线

3.文本的水平对齐方式
  属性:text-align
  取值:1. left(默认值) / center / right
     2. justify 两端对齐

4.设置行高
  行高指的是一行文本所占的高度
  1.属性:line-height
  2.取值;像素值或em
  3.用法:1.设置行高与元素高度相同,实现一行文本的垂直居中。
      2.line-height > height,文本会下移,反之上移。
  注意:文本内容在当前行中始终是垂直居中的。
  特殊取值:取无单位的数值,表示当前字体大小的倍数,由此计算行高
  例子:p{
        font-size:20px;
        line-height:2;(当前行高为字体大小的2倍,40px)
      }

posted on 2018-10-15 19:48  zengsf  阅读(216)  评论(0编辑  收藏  举报

导航