今天来谈一谈CSS样式的面向对象写法。顾名思义,面向对象是高级语言具备的特性,主要是为了程序高可复用,解决模块之间的耦合关系,那么像CSS这样的脚本语言是否也可以使用面向对象的思想,来提高代码的可维护性和可扩展性呢?答案是肯定的,运用面向对象的思想来编写CSS代码,可以极大提高前台代码的效率。

目前常用的一种CSS代码组织方法是:base.css + common.css + page.css , 这样的组织架构让人很容易联想到常用的三层架构模型,但是这里稍微有一点区别。base层代码中存放高度统一的css代码,是跨越项目的,可在多个项目中重复使用的基础样式代码;common层中存放针对某一个项目(网站)的css代码模块,在此项目中,这些代码是可重复利用;page.css是实现针对具体单个页面的样式代码。通过这样的css代码组织架构,可以很好的对功能进行抽象,避免了代码的重复开发,提高了效率,有利于维护。css代码的架构关系图如下:

这里主要讲一下base层代码的编写要领,这一层会被项目的所有页面引用,与具体的UI设计无关(无视美工设计),要求精简和通用,具有高可移植性,一般的base层都会包括一下几类设置:

1  CSS 初始化设置

CSS初始化设置主要是提供一些通用的css初始化功能,这些功能就是HTML标签的默认样式,例如:ul的默认缩进样式、em的字体倾斜、strong的字体加粗等,以及以往常用的*{margin:0;padding:0;}

    2  文字排版

文字排版是简洁的设置字体样式,报告字体大小、行高等;         例如:  f10{font-size:10px;}
                    f13{font-size:13px;}

   3  定位

定位主要设置居中、float、postition等属性;

例如:   fl{float:left;}
                     fr{float:right;}

4  长度高度

长度和高度主要设置 width 和 height;

例如:  w10{width:10px;}
                     h10{width:10px;}

    5  边距

边距主要设置margin和padding值;

例如:  m10{margin:10px;}
                     p10{padding:10px;}

那么,定义以上这样的样式,我们如何来改变思想,编写css样式呢?首先来看一段常用的css样式写法:

例1:我们有3个p元素,我希望第1个为:50*50,文字为10px; 第二个为:100*100,文字为13px;   第三个为:200*200,文字为15px;那么c传统样式应该怎么写?

<p class="pClass1">11111<p>

<p class="pClass2">22222<p>

<p class="pClass3">333333<p>

CSS代码如下:

.pClass1{ width:50px;height:50px;font-size:10px;background-color:#FF0; border:#000 solid 1px; position: relative; float:left;}
                 .pClass2{ width:100px;height:100px;font-size:13px;background-color:#0CF; border:#000 solid 1px;position:relative;float:left;}
                 .pClass3{ width:200px;height:200px;font-size:15px; background-color:#9F9; border:#000 solid 1px;position:relative;float:left;}

我们来看下标注出来的代码,这里就是设置我们的提出的要求的css样式部分,那么现在我们再想增加一个条件:

再次增加一个p元素,样式为200*100,文字为15px;那应该怎么增加?

显然是这样:  1 增加HTML :    <p class="pClass4">444444<p>

2 增加CSS :

.pClass4{ width:200px;height:100px;font-size:15px; background-color:#9F9; border:#000 solid 1px;position:relative;float:left;}

想必大家都已经发现了,这样的增加代码只是在做一些重复的代码工作,显然不合符面向对象的思想,那么我们是否可以将以上这些功能予以分层合并呢,利用模块化的思想来编写?好,就让我们来试一试:

我们首先编写一个通用的css基础类(即我们以上所说的base.css),样式代码如下:

.w50{width:50px;}     .h50{height:50px;}      .f13{font-size:13px;}

.w100{width:100px;}  .h100{height:100px;}  .f15{font-size:15px;}

.w200{width:200px;}  .h200{height:200px;}  .f18{font-size:18px;}

.pClass{background-color:#FF0; border:#000 solid 1px; position: relative; float:left;}

HTML部分:

<p class="w50 h50 f13 pClass">11111<p>

<p class="w100 h100 f15 pClass">22222<p>

<p class="w200 h200 f18 pClass">333333<p>

注意为了能够更好的说明问题,我这里把颜色值统一了,这里我们发现class写法不一样了,使用的是一种“组合式”写法,这个就是CSS面向对象的精髓,也就是说我们可以像搭积木一样的利用现有的CSS样式,不需要通过很大的修改生成一个样式,那么我们就来实现pClass4吧:

我们只需编写一个HTML即可:  <p class="w200 h100 f15 pClass">44444<p>

来看看效果,您理解以上所说的面向对象含义了吗?

CSS样式的面向对象思想(一)的更多相关文章

  1. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  2. 脚本工具(获取某个文件夹下的所有图片属性批量生成css样式)

    问题描述: 由于有一次工作原因,就是将某个文件夹下的所有图片,通过CSS描述他们的属性,用的时候就可以直接引用.但是我觉得那个文件夹下的图片太多,而且CSS文件的格式又有一定的规律,所有想通过脚本来生 ...

  3. js之如何获取css样式

    js之如何获取css样式   一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...

  4. [css]样式合并与模块化

    原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E7%9A%84%E6%A0%B7%E5%BC%8F%E5%90%88%E5%B9%B6%E4 ...

  5. [css]【转载】CSS样式分离之再分离

    原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E6%A0%B7%E5%BC%8F%E5%88%86%E7%A6%BB%E4%B9%8B%E5 ...

  6. css样式兼容不同浏览器问题解决办法

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...

  7. JQ添加移除css样式--转载 心存善念

    我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性 ...

  8. javascript操作元素的css样式

    我们经常要使用Javascript来改变页面元素的样式.当中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们一般是通过处理HTML Dom的classname特性 ...

  9. CSS 样式书写规范

    可能不同团队都有各自的规范,又或者很多人在写 CSS 的时候还是想到什么就写什么,不存在太多的约束. 我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤为重要. 本 ...

随机推荐

  1. 浅度围观SBJson

    JSON JSON是一种取代XML的数据结构,和xml相比,它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度, 那么,JSON到底是什么? JSON就是一串字符串 只不 ...

  2. 快速傅里叶变换(FFT):COGS 2216. 你猜是不是KMP

    2216. 你猜是不是KMP ★★★☆   输入文件:guess.in   输出文件:guess.out   简单对比时间限制:1 s   内存限制:256 MB [题目描述] XX在玩两个串的游戏. ...

  3. 动态规划(斜率优化):BZOJ 3675 [Apio2014]序列分割

    Description 小H最近迷上了一个分割序列的游戏.在这个游戏里,小H需要将一个长度为N的非负整数序列分割成k+l个非空的子序列.为了得到k+l个子序列, 小H将重复进行七次以下的步骤: 1.小 ...

  4. 【模拟】NEERC15 A Adjustment Office (2015-2016 ACM-ICPC)(Codeforces GYM 100851)

    题目链接: http://codeforces.com/gym/100851 题目大意: 一个N*N的矩阵A,Ai,j=i+j,Q次操作,每次分两种,R r取出第r行还未被取的所有数,并输出和.C c ...

  5. Android USB安全调试

    Android 4.2.2 引入了USB安全调试方面的内容,当启用安全调试的时候,只有被用户认证过的主机才可以通过Android SDK自带的ADB工具经由USB连接来访问设备的内部构件. 下面以an ...

  6. Book for Opencv

    Upcoming: Learning OpenCV: Computer Vision in C++ with the OpenCV Library The second edition of the ...

  7. Pet

    Problem Description One day, Lin Ji wake up in the morning and found that his pethamster escaped. He ...

  8. HDOJ 2188 悼念512汶川大地震遇难同胞——选拔志愿者

    Problem Description 对于四川同胞遭受的灾难,全国人民纷纷伸出援助之手,几乎每个省市都派出了大量的救援人员,这其中包括抢险救灾的武警部队,治疗和防疫的医护人员,以及进行心理疏导的心理 ...

  9. Oracle数据库操作常见异常总结

    1.非法的sql语句结束符\n,抛 java.sql.SQLSyntaxErrorException: ORA-00911: 无效字符 实际就是在sql语句的结尾多了标点符号. 2.无效的序列 通常都 ...

  10. 初次了解CSS3

    什么是CSS,什么是CSS3? 非常简单,CSS代表"Casading Style Sheets",就是样式表,是一种替代并为网站添加样式的标记性语言.现在所使用的CSS基本是在1 ...