前端笔记之CSS基础 - 字体和文本样式

目录

1、字体样式

1.1、字体大小

1.2、字体粗细

1.3、文字样式(是否倾斜)

1.4、字体

1.5、层叠性

1.6、字体font相关属性的连写

2、文本样式

2.1、文本缩进

2.2、文本水平对齐方式

2.3、文本修饰

3、行高

1、字体样式

字体大小	font-size
字体粗细	font-weight
字体样式	font-style
字体类型	font-family
字体类型	font属性连写

1.1、字体大小

• 属性名：font-size
• 取值：数字+px
• 注意点：
  • 谷歌浏览器默认字体大小是16px
  • 单位需要设置，否则无效

1.2、字体粗细

• 属性名：font-weight
• 取值：
  • 关键字

    正常	normal
    加粗	bold

  • 纯数字：100~900的整百数：

    正常	400
    加粗	700

• 注意点：

  • 不是所有字体都提供了九种粗细，因此部分取值页面中无变化

  • 实际开发中以：正常、加粗两种取值使用最多

1.3、文字样式(是否倾斜)

• 属性名：font-style
• 取值：

  正常	normal
  倾斜	italic

1.4、字体

• 属性名：font-family
• 常见字体系列(了解)：
  • 无衬线字体(sans-serif)
    1. 特点：文字壁画粗细均匀，并且首位无装饰
    2. 场景：网页中大多采用无衬线字体
    3. 常见该系列字体：黑体、Arial
  • 等宽字体(monospace)
  1. 特点：每个字母或文字的宽度相等
  2. 场景：一般用于程序代码编写，有利于代码的阅读和编写
  3. 常见该系列字体：Consolas、fira code
  • 衬线字体(serif)
  1. 特点：文字笔画粗细不均，并且首尾有笔锋装饰
  2. 场景：报刊书籍中应用广泛
  3. 常见该系列字体：宋体、Times New Roman

    <style>
        div {
            /* font-family: 宋体; */
            /* 如果用户电脑没有安装微软雅黑，就按黑体显示文字 */
            /* 如果电脑没有安装黑体，就按任意一种非衬线字体系列显示 */
            font-family: 微软雅黑,黑体,sans-serif;
        }
    </style>

1.5、层叠性

• 问题：
  • 给同一个标签设置了相同的样式，此时浏览器会如何渲染？
• 结果：
  • 如果给同一个标签设置了相同的属性，此时样式会叠层(覆盖)，写在最下面的会生效
• TIP：
  • CSS(Cascading style sheets)层叠样式表
  • 所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖

1.6、字体font相关属性的连写

• 属性名：font(复合属性)
• 取值：
  • font : style weight size family;
• 省略要求：
  • 只能省略前两个，如果省略了相当于设置了默认值
• 注意点：如果需要同时设置单独和连写形式
  • 要么把单独的样式写在连写的下面
  • 要么把单独的样式写在连写的里面

2、文本样式

2.1、文本缩进

• 属性名：text-index
• 取值：
  • 数字 + px
  • 数字 + em (推荐：1em = 当前标签的font-size大小)

2.2、文本水平对齐方式

• 属性名：text-align
• 取值：

  属性值	效果
  left	左对齐
  center	居中对齐
  right	右对齐

• 注意点：

  • 如果需要让文本水平居中，text-align属性给文本所在标签(文本的父元素)设置

• 水平居中方法总结：

  • text-align : center  可以让文本、span标签、a标签、input标签、img标签水平居中

  • 注意点：如果需要让以上元素水平居中，text-align : center 需要给以上元素的父元素设置

2.3、文本修饰

• 属性名：text-decoration
• 取值：

  属性值	效果
  underline	下划线(常见)
  line-through	删除线(不常用)
  overline	上划线(几乎不用)
  none	无装饰线(常用)

• 注意点：

  • 开发中会使用text-decoration : none ; 清除a标签默认的下划线

3、行高

• 作用：控制一行的上下行间距
• 属性名：line-height
• 取值：
  • 数字+px
  • 倍数（当前标签font-size的倍数）
• 应用：
  • 让单行文字垂直居中可以设置line-height：文字父元素高度
  • 网页精准布局时，会设置line-height：1 可以取消上下间距
• 行高与font连写的注意点：
  • 如果同时设置了行高与font连写，注意覆盖问题
  • font : style weight size/line-height family ;