1. CSS 常用属性

属性名称 属性作用
width 宽度 px / 百分数 / em 等
height 高度 px / 百分数 / em 等
background-color 背景色 red / #fff / rgb(255,255,255)
.box{
      width: 100px;                      /* 宽度 */
      height: 100px;                     /* 高度 */
      background-color: red;             /* 设置颜色: 英文单词 */
      background-color: #ff0000;         /* 设置颜色: 十六进制 */
      background-color: rgb(255,0,0);    /* 设置颜色: rgb形式(0~255的数字) */
    }

2. 字体系列属性

属性名称 属性作用
color 字体颜色 red / #fff / rgb(255,255,255)
font-size 字体大小 px em 等
font-family 字体 微软雅黑 Microsoft YaHei、黑体 SimHei、Arial 等
font-weight 字体加粗 100-900.加粗 700-900/ bolder lighter normal
font-style 字体样式 Italic 斜体 / normal 正常
font 字体缩写 `font:italic bolder 20px/1.2 ‘Arial’,’Microsoft YaHei’
.box{
      color:red;                         /* 设置字体颜色 */
      font-size: 12px;                   /* 设置字体大小 */
      font-weight: bold;                 /* 设置字体加粗 */
      font-family: "仿宋";                /* 设置字体样式 */
      font-style: oblique;                /* 设置字体倾斜 */
      font: oblique bold 12px "仿宋";     /* 字体的简写形式: 字体大小和字体样式不可省略 */
     }

font-family

可以同时指定多个字体

例如: p{font-family:Helvetica, Arial, Microsoft Yahei, sans-serif}

如上我实际上指定了四种字体,那么到底使用的是哪个呢?浏览器会优先使用第一个,如果没有找到则使用第二个,以此类推。这里面 sans-serif 并不是指的具体某一个字体。而是一类字体。

字体分类

  • serif(衬线字体)
  • sans-serif(非衬线字体)
  • 以上这些分类都是一些大的分类,并没有涉及具体的类型,如果将字体指定为这些格式,浏览器会自己选择指定类型的字体。

常见字体

  • Helvetica 苹果系统默认的英文字体
  • Aria windows系统默认的英文字体
  • PingFang SC 苹果系统默认的中文字体
  • Microsoft YaHei windows系统默认的中文字体
  • Hiragino Sans GB 冬青黑体

font-family:Helvetica, Arial, PingFang SC, Microsoft Yahei, sans-serif;

文档更新时间: 2023-03-16 17:29   作者:孙老师