这篇博客记录了作者在前端学习过程中，针对CSS的掌握情况。内容包括了CSS基础知识的学习框架，以及两个实际操作的作业：一是用CSS实现多彩诗句的展示，通过不同的样式设置如颜色、字体大小等，展示了诗词的美感；二是进行CSS选择器的练习，通过改变不同形状的背景色、边框样式和鼠标悬停效果，深入理解CSS选择器的工作原理。在解决问题的过程中，作者也分享了关于CSS优先级和悬停效果实现的思考和解决方案。
记录下自己前端学习第3、4天，学习css的情况
1、目前学习的CSS知识框架
2、作业3多彩诗句图片展示
3、作业3多彩诗句代码
下面展示代码。
<!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>
* {
font-weight: bold;
}
div {
text-align: center;
}
span {
font-weight: bolder;
font-size: 25px;
}
.box {
color: blue;
}
.box1 {
color: blue;
font-size: 10px;
font-weight: bolder;
}
.box2 {
color: green;
font-size: 10px;
}
.box3 {
color: red;
}
.box4 {
color: green;
font-size: 20px;
font-weight: bolder;
}
</style>
</head>
<body>
<div>
<span>沁园春·长沙</span><span class="box1">[毛泽东]</span>
</div>
<div class="box">独立寒秋，<span class="box2">湘江北去</span>，橘子洲头。</div>
<div class="box3">看万山红遍，层林尽染；<span style="color: pink;font-size: 10px;">漫江碧透</span>，百舸争流。</div>
<div class="box">鹰击长空，<span class="box1">鱼翔浅底</span>，万类霜天竞自由。</div>
<div class="box3">怅寥廓，<span class="box4">问苍茫大地，谁主沉浮？</span></div>
<div class="box">携来百侣曾游，忆往昔峥嵘岁月稠。</div>
<div class="box4">恰同学少年，风华正茂；书生意气，挥斥方遒。</div>
<div class="box">指点江山，激扬文字，粪土当年万户侯。</div>
<div class="box3">曾记否，到中流击水，浪遏<span style="font-size: 20px; font-weight: bolder;color: red;letter-spacing: 20px;">飞舟？</span></div>
</body>
</html>
4、作业4摆弄形状图片展示
5、作业4摆弄形状要求
请下载 ，解压后，您可以在assets/css/文件夹中找到style.css。请只改此文件。不要改index.html文件（head标签中的问题0除外）。
第1部分：CSS选择器练习
本练习中，您将选择各种形状，并将CSS样式应用于您选择的形状。我们将为您提供所需的CSS样式，您只需选择正确的形状即可。（听起来容易吗？）
问题1：在index.html中链接style.css文件，将CSS样式添加到您的网站中。完成此步骤后，您的页面应如下所示：
问题2：选择所有正方形(square)，并将其背景设为橙色。
提示：要更改背景颜色，请使用background: #e67e22
完成此步骤后，您的页面应如下所示：
问题3：选择第三行中的所有圆圈(circle)，并使其变为红色。
提示：请使用background: #de6868
完成此步骤后，您的页面应如下所示：
问题4：选择所有灰边的圆圈(fancy circle)，使其边框变为虚线。
提示：请使用border-style: dotted
完成此步骤后，您的页面应如下所示：
问题5：选择第一列中的所有圆圈(circle)并使它们消失。
提示：请使用 :first-child 选择器，和透明度 opacity: 0
完成此步骤后，您的页面应如下所示：
问题6：选择所有绿色(green)或灰边(fancy)的形状，将它们设置为蓝色。
提示：请使用background：#6392c0
完成此步骤后，您的页面应如下所示：
问题7：选择所有圆圈(circle)，添加效果：当你的鼠标悬停在它们上方时，它们会变得模糊。
提示：请使用opacity: 0.5
注：当您将鼠标悬停在问题4中隐藏的圆圈上时，该圆圈会出现。
完成此步骤后，您的页面应如下所示（第三列中的圆圈，第二行处于悬停状态）：
选择第二行中的所有圆圈(circle)，添加效果：当鼠标悬停在它们上时，会放大。
提示：请使用transform: scale(1.25)
完成此步骤后，您的页面应如下所示（鼠标悬停在第二行，第三列的圆圈上）：
6、作业4摆弄形状代码
index代码：
<html>
<head>
<title>摆弄形状</title>
<!-- 问题1 我们应该在此<head>标记中链接什么文件? -->
<link rel="stylesheet" href="D:/大四上/实训/老师代码/03-形状设计/starter（HTML模板）/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">
<div class="square"></div>
<div class="circle"></div>
<div class="circle fancy"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div id="fifth-row" class="row">
<div class="circle"></div>
<div class="circle fancy"></div>
<div class="circle"></div>
<div class="square"></div>
<div class="circle green"></div>
</div>
</div>
</body>
</html>
css文件代码：
body {
font-family: "Karla";
background: #edeae5;
width: 100%;
height: 100%;
position: relative;
margin: 0px;
text-align: center;
}
a {
text-decoration: none;
color: rgba(0, 0, 0, 0.5);
font-style: italic;
transition: 0.4s;
}
a:hover {
color: rgba(0, 0, 0, 0.7);
}
div {
transition: linear 0.2s;
}
#container {
width: 480px;
height: 480px;
position: absolute;
top: calc(50% - 240px);
left: calc(50% - 240px);
}
.circle {
width: 60px;
height: 60px;
background: white;
display: inline-block;
margin-right: 30px;
border-radius: 50%;
}
/* 问题2 */
.square {
width: 60px;
height: 60px;
background: #e67e22;
display: inline-block;
margin-right: 30px;
}
.row {
margin-bottom: 30px;
}
.green {
background: #78c272;
}
.fancy {
border: 3px inset rgba(74, 74, 74, 0.25);
width: 54px;
height: 54px;
}
/* 问题3 */
#third-row>.circle {
background: #de6868;
}
/* 问题4 */
.circle.fancy {
border-style: dotted;
}
/* 问题5 */
.row .circle:first-child {
opacity: 0;
}
/* 问题6 */
.green,
.fancy {
background: #6392c0;
}
/* 问题7 */
.row .circle:hover {
opacity: 0.5;
}
/* 问题8 */
#second-row .circle:hover {
transform: scale(1.25);
}
7、遇到的问题
在做问题7时，原先代码如下：
.circle:hover {
opacity: 0.5;
}
发现当我将鼠标悬停在问题5中隐藏的圆圈上时，该圆圈不会出现。
问题5代码如下：
.row .circle:first-child {
opacity: 0;
}
询问老师后发现问题5的代码定位更精确，所以优先级更高，不执行原问题7代码，鼠标悬停时问题5中隐藏的圆圈不会出现。
修改后加上同样限定条件的问题7代码：
.row .circle:hover {
opacity: 0.5;
}
现在优先级一致时，鼠标悬停在问题5中隐藏的圆圈上时，该圆圈会出现，至此问题解决。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
