前言
前段时间做了创匠科技官网的自适应网页,在编写过程中收益良多。之后又参与了公司的PC收银台的开发,对其中CSS的修改痛苦不已。痛定思痛,参考了阮一峰老师的《深入理解bootstrap》一书,总结出一些关于CSS布局的想法与建议。
CSS框架的设计基本思想
CSS使用的基本理论就是一个A/O模式。
通过添加来逐步增加样式,通过覆写来达到所需要的样式变化。
根据这个原理,我们就可以将元素的样式进行分解。
普通元素的样式
基础样式
在基础样式中,我们一般用于定义统一的字体样式(font-family)、背景色、外内边距、显示方式、边框等等。
颜色样式
针对不同情况下增加元素在不同情况下的显示。这个情况包括提示、警告、正常、成功、错误设置你可以使用颜色进行命名。
特殊效果
增加友好的互动而设置的效果。包括hover,active,visited,focus等状态下的问题。
尺寸样式
针对不同的分辨率或者特殊要求产生的尺寸要求。我们可以通过超小、小型、普通、大型、巨大等命名方式对元素进行元素的字体大小、行间距、高度、宽度、边距等多个影响元素尺寸的属性进行调整。
状态样式
根据其状态来显示其效果,可以根据其属性element[atrribute]
来设置效果,效果类型包括但不限于①元素的阴影②样式的颜色③透明度④虚框⑤可能的动画效果
指定样式
上述的过程都是按部就班的过程,而这一步是针对特殊情况:
如果一个元素的样式修改,超出了我们先前定义的统一风格,我们可以针对这个元素添加新的class。
所需要注意的是:
①这个class应该添加在class的最后以确保它可以覆盖掉前面的样式
②这个class应该归在最近父类的id或者特殊(命名独特的)父类class中,以防止该class不恰当的命名对其他样式产生影响
③不推荐使用id添加为该元素添加指定的样式。
④在样式改动特别小,同时没办法继续起一些特殊命名的类名时,可以直接在元素中使用内联式的样式。
特殊元素样式
特定类型的组件,一般只针对一个或几个固定元素
例如,导航元素na的中的li元素样式
特殊元素使用的途径相对比较固定,这就意味着
我们可以将上述几种样式集成在这一步:
设置字体、背景色、内外边距,文本颜色,特殊效果
状态样式等等