请老师检查。怎样优化比较好

<!DOCTYPE html>

<html>

<head>

div{text-align: center;background-color: #eee;font-size: 2em;line-height: 5em; }

img{vertical-align: middle;}

.one{font-size: 2em;

vertical-align: middle;}

.two{color: red;text-decoration: underline;

vertical-align: middle;text-transform: capitalize;}

</style>

</head>

<body>

<div>

<img src=" http://img1.sycdn.imooc.com/climg//59c21bae000157fa01000059.jpg"/> <span class="one">css层叠样式表</span><span class="two">(cascading stvle sheets)</span>

</div>

</body>

</html>

愛码仕 2020-04-21

源自：CSS文本样式 4-3 编程练习

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2020-04-22 09:42:41

同学你好，代码简化就是让代码量减少。但是不理解同学为什么说要写一个.one , .two的选择器。这里并不需要再加.one , .two的选择器。老师给你优化的思路是，3个元素都单独设置了相同的样式，所以使用群组选择器一起设置，能够少写两次重复的代码。如下就是在img选择器后面添加了一个span标签，这样选中两个span和一个img元素为它们同时设置相同的样式。虽然这里简化的代码不多，但是这是优化的一种思想。同学可以想一想，假如它们需要设置更多相同的样式，是不是使用群组选择器就比单独给它们三个都设置一次简洁多了呢？自己可以认真思考一下哦

祝学习愉快 ~

收起回答

愛码仕提问者 #1

噢噢噢噢看懂了看懂了。谢谢老师的耐心指导~

2020-04-22 11:01:58

好帮手慕夭夭 2020-04-21 10:25:38

同学你好，有一个地方需要优化，如下：

如果样式有相同的，可以像如下一样，使用群组选择器（选择器使用逗号隔开），共用一套样式更简洁。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答

提问者愛码仕 #1

老师，我有个地方不明白。优化的意思是尽量减少代码的行数吗？如果我再另开一个群组选择器的话，那就相当于在“.one”和“.two”两个单独的选择器的基础上又加了一个名为“.one , .two”的选择器。这样代码并没有减少呀，反而又多加上了一个群组选择器。这样的优化算是优化吗？

2020-04-21 22:36:08