css常用属性

CSS 常用属性

常见属性

font 复合属性

  • font 可以把多个字体相关属性写在一起。
  • 常见内容包括字重、字体大小、字体家族等。
1
font: bolder 50px "kaiTi";

line-height

  • line-height 用来设置行高。
  • 常用于调整文本上下间距和阅读舒适度。
1
line-height: 30px;

background-color

  • background-color 用于设置背景颜色。
1
background-color: aquamarine;

width 和 height

  • width 用于设置宽度。
  • height 用于设置高度。
  • 通常对块元素和行内块元素有效，对普通行内元素直接设置宽高通常无效。
1
2
width: 150px;
height: 100px;

display

  • display 用于改变元素显示类型。
  • 常见值有：
  • block：块级元素
  • inline：行内元素
  • inline-block：行内块元素
1
2
display: inline;
display: inline-block;

课堂完整示例代码

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 常用属性</title>
    <style>
        .block{
            background-color: aquamarine;
            width: 150px;
            height: 100px;
        }
        .inline{
            background-color: lightgray;
            /* width: 100px; 无效
            height: 100px; */
        }
        .inline-block{
            width: 100px;
        }
        .div-inline{
            /* display: inline; */
            background-color: antiquewhite;
        }
        .span-inline-block{
            display: inline-block;
            background-color: rgb(130, 17, 105);
            width: 300px;
            height: 50px;
        }
    </style>
</head>
<body>
    <h1 style="font: bolder 50px 'kaiTi';">这是一个font复合属性示例</h1>
    <p style="line-height: 30px;">
        这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本
        这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本
        这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本
    </p>

    <div class="block">这是一个块级元素</div>
    <div class="block">这是一个块级元素</div>

    <span class="inline">这是一个行内元素</span>
    <span class="inline">这是一个行内元素</span>

    <img src="头像.png" alt="我的头像" class="inline-block">
    <img src="头像.png" alt="我的头像" class="inline-block">

    <h2>display</h2>
    <div style="display: inline; background-color: antiquewhite;">这是一个转换成行内元素的div标签</div>
    <div class="div-inline">这是一个转换成行内元素的div标签</div>
    <span class="span-inline-block">这是一个转换成行内块元素的span标签</span>
</body>
</html>

知识点总结

  • font 是常见的复合属性。
  • line-height 会直接影响文本的阅读体验。
  • width 和 height 不是所有元素都天然生效，普通行内元素一般不能直接设置宽高。
  • display 是前端中非常高频的属性，经常用来切换块、行内、行内块。

复习表达

CSS 常用属性包括字体、行高、背景色、宽高以及显示类型等。比如 font 可以设置字体相关样式，line-height 用于设置行高，background-color 用于设置背景色，width 和 height 用于设置元素尺寸，display 则可以控制元素是块级、行内还是行内块显示。