【CSS选择器】图形编辑

最新推荐文章于 2023-08-02 16:00:32 发布

今夜鸣风

最新推荐文章于 2023-08-02 16:00:32 发布

阅读量521

点赞数

分类专栏：菜鸟学习前端文章标签： html 前端 css

本文链接：https://blog.csdn.net/akisi/article/details/121673529

版权

本文介绍如何通过CSS选择器影响HTML文件中的图像。首先，建立index.html和style.css的链接，然后逐步使用不同选择器改变正方形、圆圈等图形的样式，包括颜色、边框、透明度、悬停效果和缩放。具体操作包括选择器的应用、子元素选择器、并集选择器等。

摘要由CSDN通过智能技术生成

首先准备好编写的两个HTMl文件——index.html和要建立链接文件style.css

内容如下：

<html>

<head>
    <title>摆弄形状</title>
    <!-- 我们应该在此<head>标记中链接什么文件? -->
    <link rel="stylesheet" href="./assets/css/style.css">
</head>

<body>
    <div id="container">
        <div id="first-row" class="row">
            <div class="square"></div>
            <div class="circle green"></div>
            <div class="square"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
        </div>

        <div id="second-row" class="row">
            <div class="circle"></div>
            <div class="square fancy"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
            <div class="circle fancy green"></div>
        </div>

        <div id="third-row" class="row">
            <div class="circle"></div>
            <div class="circle green"></div>
            <div class="circle"></div>
            <div class="square fancy"></div>
            <div class="square"></div>
        </div>

        <div id="fourth-row" class="row">

最低0.47元/天解锁文章

今夜鸣风

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【CSS选择器】图形编辑

首先准备好编写的一个HTMl文件——index.html和要建立链接文件style.css内容如下：<html><head> <title>摆弄形状</title>  <link rel="stylesheet" href="./assets/css/style.css"></head><body&gt
复制链接

扫一扫