【Web前端开发基础】CSS之字体文本属性

一、字体和文本样式

目标：能够使用字体和文本相关样式修改元素外观样式

1. 字体样式

1. 字体大小

   • 属性名：font-size

   • 取值：数字+px

   • 注意点：

     • 谷歌浏览器默认文字大小是16px
     • 单位需要设置，否则无效
     • px：像素

   

2. 字体粗细

   • 属性名：font-weight

   • 取值：

     • 关键字：正常：normal 加粗：bold
     • 纯数字：正常：400 加粗：700（100~900的整百数）

   • 注意点：

     • 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
     • 实际开发中以：正常、加粗两种取值使用最多

   

3. 字体样式

   • 属性名：font-style

   • 取值：正常：normal 倾斜：italic

     

4. 常见字体系列（了解）

   • 无衬线字体（sans-serif）

     1. 特点：文字笔画粗细均匀，并且首尾无装饰
     2. 场景：网页中大多采用无衬线字体
     3. 常见该系列字体：黑体、Arial

   

   • 衬线字体（serif）

     1. 特点：文字笔画粗细不均，并且首尾有笔锋装饰
     2. 场景：报刊书籍中应用广泛
     3. 常见该系列字体：宋体、Times New Roman

   

   • 等宽字体（monospace）

     1. 特点：每个字母或文字的宽度相等
     2. 场景：一般用于程序代码编写，有利于代码的阅读和编写
     3. 常见该系列字体：Consolas、fira code

   

5. 字体系列

   • 属性名：font-family

   • 常见取值：具体字体1，具体字体2，具体字体3，具体字体4，…,字体系列

     • 具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等……
     • 字体系列：sans-serif、serif、monospace等…

   • 渲染规则

     1. 从左往右按照顺序差找，如果电脑中未安装该字体，则显示下一个字体
     2. 如果都不支持，则显示最后设置的字体系列的默认字体

   • 注意点：

     1. 如果字体名称中存在多个单词，推荐使用引号包裹
     2. 最后一项字体序列不要引号包裹
     3. 网页开发时，尽量使用系统自带字体，保证不同用户浏览网页都可以正确显示

     

6. 样式的层叠问题

   • 问题：给同一个标签设置了相同的样式，此时浏览器会如何渲染呢？

   • 结果：如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效

     

   • TIP：

     • CSS （Cascading style sheets） 层叠样式表
     • 所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖

7. 字体font相关属性的连写

   • 属性名：font
   • 取值：
     • font:style weight size/line-height family;
     • 巧记：swsf （稍微舒服）
   • 省略问题：只能省略前两个，如果省略前两个相当于设置了默认值
   • 省略的覆盖问题：如果需要同时设置单独的属性和连写形式
     • 要么把单独的样式写在连写的下面
     • 要么把单独的样式写在里面

8. 字体相关属性总结

   • 字体大小： font-size
     • 数字+px
   • 字体粗细：font-weight
     • 正常：normal 或 400
     • 加粗：bold 或 700
   • 字体样式：font-style
     • 正常：normal
     • 倾斜：italic
   • 字体系列：font-family
     • 具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列
   • 字体连写：font
     • font : style weight size family;

2 文本样式

1. 文本缩进

   • 属性名：text-indent

   • 取值：

     • 数字+px
     • 数字+em（推荐：1em = 当前标签的font-size的大小）

     

   • 注意点：

     • 不是独占一行的元素设置text-indent无效

2. 文本水平对齐方式

   • 属性名：text-align

   • 取值：

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

     

   • 注意点：

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

3. 文本修饰

   • 属性名：text-deconration

   • 取值：

     属性值	效果
     none	无装饰线（常用）
     underline	底部下划线（常用）
     line-through	删除线（不常用）
     overline	顶部上划线（几乎不用）

     

   • 注意点：

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

4. 文本样式总结

   • 文本样式

     样式	属性名	常见属性值
     文本缩进	text-indent	数字+px / 数字+em
     文本对齐方式	text-align	left / center / right /justify
     文本修饰	text-decoration	none / underline

5. 水平居中方法总结 text-align: center;

   • text-align: center; 能让那些元素水平居中？

     ① 文本 ② span标签、a标签 ③ input标签、img标签

     

   • 注意点：

     • 如果需要让以上元素水平居中，此时直接给以上元素的父元素设置即可

6. 水平居中方法总结 margin: 0 auto;

   • 如果需要让div、p、h（大盒子）水平居中？
     • 可以通过设置margin: 0 auto; 实现
   • 注意点：
     • 如果需要让div、p、h（大盒子）水平居中，直接给当前元素本身设置即可
     • margin: 0 auto; 一般针对于固定宽度的盒子，如果大盒子没有宽度，此时会默认占满父元素的宽度

3. 行高

• 作用：控制一行的上下间距

• 属性名：line-height

• 取值：

  • 数字+px
  • 倍数（当前文字大小font-size的倍数）

  

• 常见应用：

  • 让单行文本垂直居中可以设置 line-height: 文字父元素的高度
  • 网页精准布局时，会设置 line-height: 1; 取消上下间距

• 行高与font连写时的注意点：

  • 如果同时设置了行高和font连写，要注意覆盖问题
  • font: style weight size/line-height family;

4. 单位

• CSS中常见的取值单位如下表：

  名称	性质	说明
  px	相对单位	像素，屏幕上的一个点，相对于屏幕分辨率
  pt	绝对单位	磅，点
  em	相对单位	1em：一个字符，相当于当前字符大小（font-size）， 当前字符大小默认会从父元素继承
  rem	相对单位	1rem:一个字符，相对于html元素的字符大小，例如： html {font-size: 16px;} h1 {font-size: 1rem;} 则h1为32px
  %	相对单位	相对于当前字符大小

5. 颜色

• CSS中常见的颜色值如下表：

  颜色	说明
  颜色名称	red, green, blue, pink等
  rgb(x,x,x)	red, green, blue 三个基本颜色分量的值混合而成， 每个颜色分量取值为0~255，例如： 红色：rgb(255,0,0) 灰色：rgb(66,66,66)
  rgb(x%,x%,x%)	red, green, blue 三个基本颜色分量的值混合而成， 每个颜色分量取值为0~255,例如： 红色：rgb(100%,0%,0%)
  rgba(x,x,x,a)	RGB值，a值：0.0（完全透明）与 1.0（完全不透明） 红色半透明：rgba(255,0,0,0.5)
  transparent	透明
  #rrggbb	十六进制数颜色值，每两位表示一个颜色分量， 每两位均相同则可以简写为3位，例如： #ff0000 和 #f00 均表示红色

二、Chrome调试工具

1. 打开方式

​ 右击–检查
​ elements：显示当前网页的html结构
​ styles：显示当前标签的样式

2. 选择元素

​ 方法一：在左侧的elements中点击需要调试的元素
​ 方法二：点击左上角按钮后直接在网页中点击需要调试的元素

3. 功能

​ 控制样式
​ ① 修改属性值 直接点击属性值，直接更改
​ ② 添加属性 在上一个分号后点击一下，直接添加
​ ③ 控制样式生效 点击属性前的小框即可
​ ④ 注意点 调试工具仅仅只是当前的调试效果，需要在代码中修改才能永久保留
​ 特殊情况
​ ① 样式上有横线
​ 含义：样式失效
​ 可能原因：a.样式被注释了 b.样式被覆盖了
​ ② 样式前有小三角形
​ 含义：报错
​ 原因：a.属性值后面没有分号 b.出现中文标点 c.属性名或者属性值单词拼错

4. Chrome调试工具总结

三、总结

1. 能够使用font属性设置文字大小和文字粗细

   （1）文字大小 font-size取值：数字+px
   （2）文字粗细 font-weight

   • 取值：

     • ① 关键词：正常：normal 加粗：bold

     • ② 纯数字：正常：400 加粗：700

2. 能够设置文本首行缩进的效果 text-indent:2em 首行缩进2个字符位置

3. 能够设置文本水平居中 text-align:center

4. 能够去除a标签默认的下划线 text-decoration:none

5. 能够使用行高让文本在标签中垂直居中 line-height:当前标签的高度

6. 能够使用Chrome调试工具查看html和css代码