把以前学习的和搭建博客了解的CSS样式内容做一个整理，方便自己需要的时候查询，顺便过一遍。本来没想放博客站点上，以前一直是用印象笔记，但一打开电脑那风扇就呼啦啦开始暴躁，想了想，还是多份记录吧，哪里方便用哪里。

CSS概念

其实就是层叠样式表

  • 作用：给html标签设置样式（给人穿衣服、化妆、美化）
  • 注意：1、符号必须是英文状态下的，2、每一句样式键值对写完之后必须加一个分号

字体相关属性

  • font-size：设置字体大小

  • font-weight：设置字体的粗细
    取值：

    单纯的数字（没有单位），正常粗细(400) 加粗(700)

    关键字：正常粗细（normal）、加粗（bold）

  • font-style：设置字体的样式
    取值:

    normal：显示标准的字体样式（默认）

    italic：字体倾斜

  • font-family：设置字体的类型
    取值:
    “微软雅黑”（默认值）
    注意：
    一些冷门字体很多电脑默认没有安装，此时不会显示出来。实际工作中默认都是使用主流字体，如宋体、微软雅黑等等；字体类型可以写多组，中间用逗号隔开（第一个不兼容会使用第二个，第二个不行会使用第三个），可以同时设置几个字体类型隶书，楷体（UI给什么就写什么）；写字体的时候，都要加上引号

层叠性问题：给同一个标签设置相同的属性，写在下面的说了算

1
2
3
4
5
6
7
8
9
10
p {
  /* 样式：斜体    默认：正常 斜体 */
  font-style: italic;
  /* 粗细   默认：正常  粗体 */
  font-weight: bold;
  /* 字体大小   默认16px */
  font-size: 116px;
  /* 类型   默认：微软雅黑 */
  font-family: '苹方';
}

  • font属性的连写形式
    注意：

    注意书写的顺序：style weigth size famliy

    省略问题：前两个可以省略（style，weight）

    1. 写在下面的生效

    2. 如果连写的形式省略了，并不是没有设置，而是设置了默认值

      1
      font: normal normal 50px '楷体';

    3. font的完整连写中有 line-height 这样的属性

      1
      2
      3
      4
      5
      完整的连写：font：style  weight  size/line-height  family；
      注意：
      1、要么把line-height写在font连写的后面
      2、要么把line-height写在font连写的里面
      示例：font：italic 700 30px/300px "楷体";