CSS个人学习笔记（day 2）

loney_k

已于 2022-04-24 13:46:47 修改

阅读量673

点赞数 26

文章标签： css

于 2022-04-07 14:39:49 首次发布

本文链接：https://blog.csdn.net/loney_k/article/details/123943570

版权

三、字体样式

3.1.1 字体样式- 字体大小

属性名：font-size

取值：数字 + px

<title>Document</title>
      <style>
            p {
                font-size: 25px;
             }
      </style>
</head>

<body>
    <!-- 谷歌浏览器默认字号为16px -->
    <p>段落文字</p>
</body>

注意点：

谷歌浏览器默认文字大小是16px
单位需要设置，否则没效果

3.1.2 字体样式- 字体粗细

属性名：font-weight

取值：

1. 关键字：

正常 normal

加粗 bold

2. 纯数字：100-900的整百数

正常 400

加粗 700

<title>Document</title>
    <style>
        /* 加粗 */
        div {
            font-weight: 700;
        }

        /* 变细 */
        h1 {
            font-weight: 400;
        }
    </style>
</head>

<body>
    <div>这是div</div>
    <h1>一段标题</h1>
</body>

注意点：

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

3.1.3 字体样式- 字体倾斜

属性名：font-style

取值：

1. 正常(默认值)：normal

2. 倾斜：italic

<title>Document</title>
    <style>
        div {
            /* 倾斜效果 */
            font-style: italic;
        }

        em {
            /* 正常的，不倾斜 */
            font-style: normal;
        }
    </style>
</head>

<body>
    <div>div文字</div>
    <em>em</em>
</body>

3.1.4 字体样式- 字体系列

属性名： font-family

常见取值：具体字体1、具体字体2...字体系列

1. 具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等...

2. 字体系列：sans-self、serif、monospace等...

渲染规则：1. 从左往右按顺序查找，如果电脑中未安装字体，则显示下一个字体

2. 如果都不支持，此时会根据操作系统,显示最后字体系列的默认字体

   系统       默认字体
 windows     微软雅黑
  macOS        苹方

注意点：

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

3.1.5 字体样式- 常见字体系列（了解）

无衬线字体 (sans-serif)

1. 特点：文字笔画粗细均匀,并且首尾无装饰

2. 场景：网页中大多采用无衬线字体

3. 常见该系列字体：黑体、Arial

衬线字体 (serif)

1. 特点：文字笔画粗细不均，并且首尾有笔锋装饰

2. 场景： 报刊书籍中应用广泛

3. 常见该系列字体：宋体、Times New Roman

等宽实体 (monospace)

1. 特点： 每个字母或文字的宽度相等

2. 场景：一般用于程序代码缩写，有利于代码的阅读和缩写

3. 常见系列字体： Consolas、fira code

3.1.6 字体样式- 层叠性

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

CSS层叠样式表：所谓的层叠及叠加的意思，表示样式可以一层一层的层叠覆盖

<title>Document</title>
    <style>
        p {
            color: red;
            color: blue;
        }
    </style>
</head>
<body>
    <!-- 层叠性:后面的覆盖前面的属性 -->
    <!-- 覆盖 -->
    <p>ppppp</p>
</body>

3.1.7 字体样式- font连写

属性名：font(复合属性)

取值：font: style weight size family;

<style>
 p { 
     /* 一个属性冒号后面书写多个值的写法 -- 复合属性 */
     /* font: style  weight  size  字体 */
        font: italic 700 66px 宋体;
        font-style: normal;
  }
</style>

省略要求： 只能省略前两个属性，如果省略了相当于设置了默认值

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

要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面
font属性的书写必须按照顺序
font-size和font-family的值是必需的。

 p {
      /* 要么把单独的样式写在连写的下面 */
         font: italic 700 66px 宋体;
         font-style: normal;    
      /* 省略要求: 只能省略前两个属性，如果省略了相当于设置了默认值 */
         font: 100px 微软雅黑;
  }

font属性的书写顺序：1. 字体风格(font-style)

2. 字体变量(font-variant)

3. 字体浓淡(font-weight)

4. 字体大小与行高(font-size/line-height)

5. 字体名称(font-family)

6. 字体颜色(color)