HTML5、CSS3学习笔记(四)文字控制属性

100 阅读1分钟

移动端工程师学习javascrip的笔记和归纳,内容非常基础。

image.png

文字大小 font-size

  • font-size属性必须有单位,否则不生效,PC端网页常用单位 px
  • 谷歌浏览器文字默认大小:16px

字体粗细 font-weight

  • font-weight:400 不加粗
  • font-weight:700 加粗

字体倾斜 font-style

  • 清除文字默认的倾斜效果
  • normal:不倾斜
  • italic:倾斜

行高 line-height

image.png

  • 数字 + px
  • 数字(当前标签font-height的倍数)

行高-垂直居中技巧:行高属性值 = 盒子高度属性值

字体 font-family

  • font-family: 楷体

复合属性 font

  • 属性的简写方式,一个属性对应多个值的写法,各个属性之间空格隔开
  • 是否倾斜 字体粗细 字号/行高 字体(必须按顺序书写)
  • 字号和字体值必须书写,否则font属性不生效
  • 使用场景:设置网页公共样式
div {
   /* 文字倾斜 字体加粗 字体大小30px 行高2倍 楷体*/
  font: italic 700 30px/2 楷体
}

文本锁紧 text-indent

  • 数字 + px
  • 数字 + em(推荐:1em = 当前标签的字号大小,推荐)

文本对齐方式 text-align

  • left:左对齐 默认
  • center:居中
  • right:右对齐

text-align本质是控制内容的对齐方式,不是标签样式,属性要设置给内容的父级

图片居中,给父级标签设置居中

image.png

装饰线 text-decoration

属性值效果
none
underline下划线
line-through删除线
overline上划线

参考资料