CSS之常用属性、元素的显示模式、盒模型(上)

2023-04-25 84

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： CSS之常用属性、元素的显示模式、盒模型(上)

一、字体属性

字体名称可以用中文, 但是不建议.

多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )

如果字体名有空格, 使用引号包裹.

建议使用常见字体, 否则兼容性不好.

设置字体

设置大小和粗细

二、文本属性

文本颜色

认识 RGB

我们的显示器是由很多很多的 "像素" 构成的. 每个像素视为一个点, 这个点就能反映出一个具体的颜色.

我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.

计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).

数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色

文本对齐

不光能控制文本，还能控制图片的对齐

文本缩进

行高

三、背景属性

二、元素的显示模式

🍑块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 块级元素可以修改高度和宽度 -->
    <style>
        .test {
            width: 100px;
            height: 50px;
            background-color: brown;
        }
        .parent {
            width: 200px;
            height: 100px;
            background-color: aqua;
        }
        .child {
            height: 20px;/* 不写 width, 默认和父元素一样宽 不写 height, 默认为 0 (看不到了) */
            background-color: bisque;
        }
        span {
            width: 100px;
            height: 100px;
            background-color: darkcyan;
        }
    </style>
    <!-- 行级元素无法修改高度和宽度，及时你在选择器了设置了，也不会生效,但背景可以设置 -->
</head>
<body>
    <div class="test">
        这是一个块级元素
    </div>
    <div class="parent">
        这是一个块父元素
        <div class="child">
            这是一个子级元素块
        </div>
    </div>
    <span>
        这是一个行级元素
    </span>
</body>
</html>