如何对一个博客系统进行CSS管理?
2016-07-29 00:00
423 查看
忽然发现,我的博客皮肤又改变了,这次是About栏:
如果您和我博客右侧的内容相比,会发现行间距首行文字略有下沉,且段落之间的间距变小了,导致“希望”一段跑到了照片的右侧,进而照片与下方文字的间距也加大了。
我在博客版式上投入了很大的精力,动用了大量的JavaScript和自定义CSS,希望可以让浏览效果更加“和谐”。可是,博客园在样式管理上似乎经常会出现一些问题,时不时让一些基础的样式修改破坏了版式。对于大部分朋友来说,可能不很在乎一个版式的缩进、行间距是否对齐等等。但是对我来说,一些细节上的破坏就会让我觉得有些不舒服。那么这次到底又发生了什么呢?幸好我在TechEd的示例中保存了一周前的CSS文件,于是再用Fiddler抓取新的CSS文件后使用WinDiff进行对比,终于发现罪魁祸首是common2.css文件。
在一周前的common2.css文件中,有个定义是:
而在现在的common2.css文件中,这个定义变成了:
既然知道了原因,那么我只要加一行自定义样式便把效果修补回来了:
那么,为什么这样的事情总是一而再,再而三地发生呢?这无法不让我多想一些。似乎这次的问题是由两方面原因造成的:
博客园修改了过于宽泛的选择器:p是个非常基础的CSS选择器,涉及到整个页面的p元素,对他进行修改就好比改变了类库中的基本类型。对于这样的修改一定要小心,因为影响过于巨大,试想如果.NET修改了Object类的行为那么会造成什么后果呢?
皮肤的样式直接依赖了最基础的样式:如果说上一点是主要因素,那么这一点就是次要因素。由于about区域的文字直接依赖于基本上“毫无关联”的基础样式,导致了一些难以预料的事情发生。因此,最终的解决方案也是使用了限制更优先的选择器来覆盖基础样式。
多皮肤的博客样式管理是一件麻烦的事情,它涉及了继承,覆盖等多种因素。我对于CSS的使用不是非常了解,也没有干过如此有技术要求的项目。园子里的CSS专家不少,不妨趁此机会来讨论一下该如何为这样的“多主题”系统设计CSS的管理方式呢?
如果您和我博客右侧的内容相比,会发现行间距首行文字略有下沉,且段落之间的间距变小了,导致“希望”一段跑到了照片的右侧,进而照片与下方文字的间距也加大了。
我在博客版式上投入了很大的精力,动用了大量的JavaScript和自定义CSS,希望可以让浏览效果更加“和谐”。可是,博客园在样式管理上似乎经常会出现一些问题,时不时让一些基础的样式修改破坏了版式。对于大部分朋友来说,可能不很在乎一个版式的缩进、行间距是否对齐等等。但是对我来说,一些细节上的破坏就会让我觉得有些不舒服。那么这次到底又发生了什么呢?幸好我在TechEd的示例中保存了一周前的CSS文件,于是再用Fiddler抓取新的CSS文件后使用WinDiff进行对比,终于发现罪魁祸首是common2.css文件。
在一周前的common2.css文件中,有个定义是:
p { margin: 0 auto 10px auto; text-indent:0px; }
而在现在的common2.css文件中,这个定义变成了:
p { margin: 5px auto 5px auto; text-indent:0px; }
既然知道了原因,那么我只要加一行自定义样式便把效果修补回来了:
div#about_body p { margin: 0 auto 10px auto; }
那么,为什么这样的事情总是一而再,再而三地发生呢?这无法不让我多想一些。似乎这次的问题是由两方面原因造成的:
博客园修改了过于宽泛的选择器:p是个非常基础的CSS选择器,涉及到整个页面的p元素,对他进行修改就好比改变了类库中的基本类型。对于这样的修改一定要小心,因为影响过于巨大,试想如果.NET修改了Object类的行为那么会造成什么后果呢?
皮肤的样式直接依赖了最基础的样式:如果说上一点是主要因素,那么这一点就是次要因素。由于about区域的文字直接依赖于基本上“毫无关联”的基础样式,导致了一些难以预料的事情发生。因此,最终的解决方案也是使用了限制更优先的选择器来覆盖基础样式。
多皮肤的博客样式管理是一件麻烦的事情,它涉及了继承,覆盖等多种因素。我对于CSS的使用不是非常了解,也没有干过如此有技术要求的项目。园子里的CSS专家不少,不妨趁此机会来讨论一下该如何为这样的“多主题”系统设计CSS的管理方式呢?
相关文章推荐
- 如何对一个博客系统进行CSS管理?
- 一个优秀的Java程序员必须了解GC的工作原理、如何优化GC的性能、如何与GC进行有限的交互,有一些应用程序对性能要求较高,例如嵌入式系统、实时系统等,只有全面提升内存的管理效率,才能提高整个应用程序
- 如何用Google APIs和Google的应用系统进行集成(8)----如何把Google Blogger(博客)的JSON Schema转换成XML的Schema(XSD)?
- 如何使用免费餐饮收银管理系统搭建一个外卖订餐平台网站?
- 如何在自己的信息管理系统里集成第三方权限控制组件 - 设计一个漂亮的WEB界面
- 一个对众多CMS(内容管理系统)进行比较、评论的网站
- win8.1如何获取最高管理权限对系统进行完全掌控
- 如何使用Access创建一个简单MIS管理系统_Access
- 通过学习学生信息管理系统软件,C程序中,如何设计和编写一个应用系统?
- 通用权限管理系统如何进行角色判断
- 如果让你来制作一个访问量很高的大型网站,你会如何来管理所有CSS文件、JS与图片?
- 如何在自己的信息管理系统里集成第三方权限控制组件 - 开发一个好用稳定的开放组件
- 看如何用ntsd命令杀掉任何一个系统进程-间歇博客
- 通过学习学生信息管理系统软件,C程序中,如何设计和编写一个应用系统
- 通过学习学生信息管理系统软件,C程序中,如何设计和编写一个应用系统
- Android是一个针对触摸屏专门设计的操作系统,当点击编辑框,系统自动为用户弹出软键盘,以便用户进行输入。 那么,弹出软键盘后必然会造成原有布局高度的减少,那么系统应该如何来处理布局的减少
- 如何给多个子系统设计一个简单通用的权限管理方案?(详细讲解及源代码下载)
- 如何设计一个设备管理系统平台?-之 一 :背景概述
- 设计一个图书借阅管理系统需要如何分析
- 通过学习学生信息管理系统软件,C程序中,如何设计和编写一个应用系统