初见CSS

原创已于 2022-08-02 23:16:30 修改 · 210 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css

于 2022-08-02 23:07:39 首次发布

JavaWeb 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了CSS的功能，包括内联样式、选择器的应用，文本布局、背景设置，以及弹性盒子布局的详细步骤。通过实例演示了如何使用CSS控制元素样式和布局。

CSS的功能

引入方式

内联样式

内联写法：由于就是作为元素的属性出现的，所以没有选择元素的步骤，直接指定规则即可。

普通写法：先选择元素，再指定规则。
<body>
    <div style="height: 100px; background-color: blue;"></div>
</body>

选择器

文字

属性

文本布局

背景

边界半径

盒模型

弹性布局

<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>弹性布局演示</title>
    <style>
        div {
            border: 1px solid green;
        }

        .parent {
            height: 400px;
            background-color: blue;
            display: flex;  /* parent 元素称为弹性元素，影响 parent 的孩子们 */

            /* 垂直方向 */
            /* align-items: start; */
            /* align-items: stretch; */
            /* align-items: end; */
            align-items: center;

            /* 水平方向 */
            /* justify-content: start; */
            /* justify-content: end; */
            /* justify-content: center; */

            /* 均匀分布 */
            justify-content: space-between;
            justify-content: space-around;
            justify-content: space-evenly;

            flex-direction: column;     /* 方向交叉了 */
        }

        .child {
            width: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">第一个孩子</div>
        <div class="child">第二个孩子</div>
        <div class="child">第三个孩子</div>
    </div>
</body>
</html>