前端(五)——CSS之美化页面

1. 美化页面原因

• 有效的传递页面信息
• 美化网页，页面漂亮，才能吸引用户
• 凸显页面的主题
• 提高用户的体验

2. span标签

• 作用：对于重点要突出的字，使用 span 套起来
• font—size的取值
  xx-small:最小
  x-small:较小
  small:小
  medium:正常(默认值)，根据字体进行调整
  large:大
  x-large:较大
  xx-large:最大
  也可取具体长度单位值
• 实例：
  

3. 字体样式

• 字体属性

（1）font-family：设置字体类型

（2）font-size：设置字体大小

• font-size 的值可以是绝对值或相对值；
• font-size:12px; 设置对象具体字体大小为12px
• font-size:xx-small; 设置文字大小为最小
• font-size:small; 设置文字字体大小为小
• font-size:x-large;设置对象字体大小为较大
• font-size:larger;设置对象字体大小为大
• font-size:smaller;相对于父容器中字体尺寸进行相对减小
• font-size:50%;相对于父容器中字体尺寸进行相应调整为50%大小
• font-size:150%;相对于父容器中字体尺寸进行相应调整为150%大小

（3）font-style：设置字体风格

• normal ： 文本正常显示
• italic： 文本斜体显示
• oblique ： 文本倾斜显示

（4）font-weight：设置字体的粗细

• 关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形(lighter)，900 对应最粗的字体变形（bolder)。 400 等价于