CSS之少用继承,多用组合
2024年05月18日
•
Css
•
我要评论
下面是一段普通的代码: css: html: 但是这个时候需求增加了,在页面中不仅要有一个灰色的盒子可能还有蓝色的盒子,可能还有绿色,通常我们会说用集成嘛,好我们就做如下更改 css: html: 但
下面是一段普通的代码:
css:
html:
但是这个时候需求增加了,在页面中不仅要有一个灰色的盒子可能还有蓝色的盒子,可能还有绿色,通常我们会说用集成嘛,好我们就做如下更改
css:
html:
但是这个时候需求又有变化了,根与应用的不同,盒子中有些要用到12号字,有些要用到14号字,有些要变局10px有些要20px,估计这个时候你就要头大了,如果要用用继承css代码就会变得异常的复杂,那我们就来试验一下用组合的方式看能不能解决。
css:
html
….
我们看一些虽然在class上引用了几个,但是代码和逻辑都非常清晰,而且非常容易维护,随意组合随意扩展。从上面可以看到“组合”的方式是不言而喻的,但是也不是十全十美的,再拆分组合的时候一定不要过度,不然效果可能适得其反,只有把组合+继承运用的恰到好处才能让我们的代码更加优雅和艺术。
相关文章:
-
-
-
-
-
ie6 注释引起的问题
问题:div框架里的文字在ie6中出现溢出现象,ie7和ff都显示正常,经过测试,发现这似乎与float浮动 有关,只要把相应div中的float去掉,就可以显...
[阅读全文]
-
IE hack条件写法
最近制作下拉菜单时,打算用纯css,忽又看到令人头痛的css hack代码(平时很少关注),记录下来以作备用。 <!–[if lte ie 6]>…...
[阅读全文]
版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。
发表评论