首页 CSS

# CSS 文字基本样式

# 字体大小

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

# 字体粗细

  • 属性名 : font-weight

  • 取值 :

    • 关键字 :

      正常normal
      加粗bold

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

      正常400
      加粗700

  • 注意点 :

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

# 字体样式 (是否倾斜)

  • 属性名 : font-style
  • 取值 :
    • 正常 (默认值) : normal
    • 倾斜 : italic

# 字体系列

  • 属性名 : font-family
  • 常见取值：具体字体 1, 具体字体 2, 具体字体 3 … 字体系列
  • 渲染规则
    1. 从左往右按顺序查找，如果电脑中未安装该字体，则显示下一个字体
    2. 如果都不支持，此时归根据操作系统，显示最后字体系列的默认字体
  • 注意点 :
    1. 如果字体名称中存在多个单词，推荐使用引号包裹
    2. 最后一项字体系列不需要引号包裹
    3. 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览页面都可以正确显示

# 样式的层叠问题

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

结果：如果给同一个标签设置了相同的属性，此时样式会层叠 (覆盖), 显示蓝色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04文字基本样式</title>
    <style>
        div {
            font-size: 70px ;
            font-weight: bold;
            font-style: italic;
            font-family: 等线;
            color: red;
            color: blue;        /*实际采用了蓝色*/
        }
    </style>
</head>
<body>
    <div>我是div标签</div>
    <div>我是另一个div标签</div>
    <h1>我是h1标签</h1>
    <h1>我是另一个h1标签</h1>
    <p>我是p标签</p>
    <p>我是另一个p标签</p>
    <span>我是span标签</span>
    <span>我是另一个span标签</span>
</body>
</html>

# 字体 font 相关属性的连写

  • 属性名 : font (复合属性)

  • 取值 :

    font : style weight size family;

  • 省略要求 :

    只能省略前两个，如果省略了相当于设置了默认值

  • 注意点：如果需要同时设置单独和连写形式

    • 要么把单独的样式写在连写的下面
    • 要么把单独的样式写在连写的里面