CSS学习笔记(二)CSS编写

原创于 2025-11-05 19:52:47 发布 · 550 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css #学习 #笔记

CSS编写

从零开始

首先建立HTML框架。

    <h1>一张AI生成的图</h1>
    <p>这组插画由六幅作品组成，均以极光为核心元素，场景各具特色。画面中，极光呈现绿、紫、粉等斑斓色彩，或与荒漠红岩地貌交融，或与未来都市建筑群辉映，或点缀山林溪流之景，色彩丰富且富有层次感，整体风格奇幻明快，展现出自然与科幻交织的想象世界。
    </p>

这时的页面只有标题和正文内容，而没加任何效果，在浏览器中的显示效果如上图，虽然看上去十分单调，但页面的核心框架已经初现。

考虑到单纯的文字显得贫乏，因此加入一张图片作为简单的插图，以增强页面的可读性。使用HTML的<img>标签插入图片。

alt text

此时的显示效果如上图，可以看到图片和文字的排列比较混乱，此时就可以使用CSS来改进样式。

设置标题

为了使标题更加突出，我们可以使用CSS来设置标题的样式。使用蓝色背景的白色文字可以使标题更加醒目。另外，这里将标题设为居中，并且与正文有一定的距离.

<style>
    h1 {
        color: white;               /*文字颜色*/
        background-color: aqua;     /*背景色*/
        text-align: center;         /*居中*/
        padding: 15px;              /*内边距*/
    }
</style>

alt text

控制图片

在对标题和正文都进行了CSS控制后，整个页面的焦点便集中到插图上，这时可以发现文字与图片的排列有些不够协调，我们可以让图文混排。

img {
    float: left;
    border: 1px #9999cc dashed;
    margin: 5px;
}

alt text

设置正文

由于文字少不好看~~所以我就不设置了~~所以我又加了一段😅

下面设置正文部分，可以控制文字的大小、缩进、排列的疏密等属性。

p {
    font-size: 16px;        /*字体大小*/
    text-indent: 2em;       /*缩进*/
    line-height: 1.5;        /*行高*/
    padding: 5px;           /*内边距*/
}

alt text

设置整体页面

接下来对页面整体进行设置，对<body>标签进行设置，设置背景颜色为其他颜色

body {
    background-color: #f1908c;
}

对段落进行分别设置

之前的CSS都是用的标记选择器，这回我们可以使用ID选择器来对两个段落进行设置。

#p1 {
    border-right: 3px red double;
}
#p2 {
    border-right: 3px blue double;
}

可以看到，在两个段落的右侧分别出现了两条竖线，上面的是红色，下面的是蓝色。

alt text

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            margin: 0px auto;
            padding: 25px;
            border: 2px solid black;
        }

        h1 {
            color: white;               /*文字颜色*/
            background-color: aqua;     /*背景色*/
            text-align: center;           /*居中*/
            padding: 15px;                 /*内边距*/
        }

        img {
            float: left;
            border: 1px #9999cc dashed;
            margin: 5px;
        }

        p {
            font-size: 16px;        /*字体大小*/
            text-indent: 2em;       /*缩进*/
            line-height: 1.5;       /*行高*/
            padding: 5px;           /*内边距*/
        }

        body {
            background-color: #f1908c;
        }

        #p1 {
            border-right: 3px red double;
        }

        #p2 {
            border-right: 3px blue double;
        }
    </style>
</head>
<body>
    <h1>一张AI生成的图</h1>

    <img src="AI_图片生成 (1).png" alt="图片" width="30%">

    <p id="p1">这组插画由六幅作品组成，均以极光为核心元素，场景各具特色。
        画面中，极光呈现绿、紫、粉等斑斓色彩，或与荒漠红岩地貌交融，
        或与未来都市建筑群辉映，或点缀山林溪流之景，色彩丰富且富有层次感，
        整体风格奇幻明快，展现出自然与科幻交织的想象世界。
    </p>

    <p id="p2">这组六幅插画共同编织出极光与多元地貌的奇幻交响。
        极光以绿、紫、粉的绚烂姿态，在红岩荒漠的雄浑间狂舞，
        于未来都市的钢铁森林上流光，在沙漠都市的橙野中晕染，
        在山林溪谷的清幽里轻曳，在带植被的荒漠中铺展缤纷，
        又在红岩群的粗犷间绽放。自然的野性与科幻的前卫在此碰撞融合，
        每一幅都似独立却又同源，以明快且富有张力的色彩，
        构建出一个让人心驰神往、充满未知与想象的极光异境，
        每一处景致都在诉说着关于光与地的奇幻史诗。
    </p>

</body>
</html>

CSS注释

编写CSS代码与编写其他程序一样，养成良好的写注释习惯对于提高代码的可读性以及减少日后维护的成本都是非常重要的。~~(虽说有时候我自己都没有养成)😜~~

CSS中，注释内容以/*开始，以*/结束。其内容可以是单行的，也可以是多行。

/*这是有效的CSS注释*/
/*这是
  多行
  注释*/