XHTML与CSS的面向对象编程

 要是XHTML与CSS能面向对象。。太阳应该从北边升起了。但是,凡事都应该带着OO的思想来看问题,也勉强可以凑数拉。其实,早在零几年就有人提出了OO-style,不过已找不到。

那要怎样OO呢?现在大家都知道CSS是可以介样写滴: 

.G_G { /* xxxxxx */ }  我们可以把它大约看一个原型,或者说成类,-__-b 好像本来就是类的样子,然后要在HTML里“实例化”一个对象,例如:

<div class="G_G">笨蛋嗷嗷</div>  该元素会使用上CSS相应的定义,但仅仅对应的class还是不够的,因为我们页面可能会多处应用到这个class,为了处理好“私有”的关系,把刚才的代码改成:

<div id="aoao" class="G_G">笨蛋嗷嗷</div>  这样的话,这个ID为aoao的元素就会应用
.G_G
这个类的定义,而且可以用
#aoao{}
这样的选择符来进去私有效果的定义,这样也不会影响到公共用的
.G_G
这个类,同时,#aoao定义的优先权会比.G_G高,符合私有定义比公共定义优先高的常理^^。 

由于我使用了ID这个具有唯一性的东东,对这种私有定义后的东西复用就成了问题(一个ID只能在一个页面上出现一次,不知道谁说的,反正是真理)。如果我们要实现多相同私有化的东东怎办呢?那我们就必须来实现“多态”。挖哈哈。再改一下代码:

<div class="G_G o_O">笨蛋嗷嗷</div>  一个是“G_G”,另一个是“o_O”,但是我们如果使用上
.o_O{}
也是可以定义到元素,假如CSS是这样的话:

.G_G {width:100%}
.o_O {color:#123456}  元素将都被定义到,而且由于定义不层叠,都会给应用。再假如代码是这样的话,不知道会不会更好理解。

<div class="layout color">不是笨蛋嗷嗷鸟</div>  .layout{width:100%}
.color{color:#123456}  接着,要来实现“封装”。子级选择符大家应该常常用吧,换代码:

<div class="G_G"><span class="bendan">笨蛋</span>嗷嗷</div>  虽然
.bendan{}

.G_G .bendan{}
都可以定义,但是后者只能应用在class为“G_G”的元素,我们可以简单把
.bendan{}
理解成全局定义,把
.G_G .bendan{}
理解成局部定义,这样的话就有利于我们XHTML与CSS的模块化。^^传说中的“封装”出现了,再接着。

<div id="aoao" class="G_G o_O"><span class="bendan">笨蛋</span>嗷嗷</div>  这样的代码就可以产生无数的变化了,还不明白的从头看起。^^

其实,这些跟真正的面向对象还有很大一段距离,我只是在学标题党,不过可以用它来理解ID与class的应用。

时间: 2025-01-30 16:14:37

XHTML与CSS的面向对象编程的相关文章

JavaScript面向对象编程实战

转载地址http://blog.csdn.net/lmj623565791/article/details/34089553  今 天重温了下Javacript,给大家带来一篇Javascript博文,相信对于Javacript有一定了解的人都听过prototype原型这个概念,今天我们深度的分析下prototype与__proto__. 好了,下面看一个非常简单的例子: [javascript] view plaincopy var Person = function(name)    {  

《JavaScript面向对象编程指南》——第1章 引言1.1 回顾历史

第1章 引言 众所周知,时下所流行的这些Web应用,例如Yahoo! Maps.Google Maps.Yahoo! Mail.My Yahoo!.Gmail.Digg以及YouTube等都有一些明显的共同特征,即:它们都是Web2.0时代的应用程序,都有非常丰富的人性化交互界面,而这往往意味着大量的JavaScript应用.事实上,JavaScript最初也只不过是一种内嵌于HTML语句中的单行式脚本语言.但如今已经今非昔比了,对于它今天所拥有的面向对象特性来说,无论是在可重用性方面,还是在可

讲解Python中面向对象编程的相关知识

  这篇文章主要介绍了深入讲解Python中面向对象编程的相关知识,是Python入门学习中的基础知识,需要的朋友可以参考下 Python从第一天开始就是面向对象的语言.正因为如此,创建和使用类和对象是非常地容易.本章将帮助您在使用Python面向对象编程的技术方面所有提高. 如果没有任何以往面向对象(OO)的编程的经验,那么可能要了解一些基本的入门课程就可以了,或者至少某种形式的教程,让你有了解基本概念. 但是,这里会比较少地介绍面向对象编程(OOP): OOP术语概述 类: 用户定义的原型对

PHP面向对象编程详解:类和对象

PHP面向对象编程详解:类和对象 从OOP的视角看,不应区分语言.无论是C++.无论是Java.无论是.net还有更多面向对象的语言,只要你了解了OO的真谛,便可以跨越语言,让你的思想轻松的跳跃.便没有对于Java..net.PHP 之间谁强谁弱的争执了. 希望这个介绍PHP5面向对象编程(OOP)的资料能让初学者受益,能让更多的PHPer开始转向OO的编程过程. 相对PHP4,PHP5在面向对象方面改变了很多.我们将只介绍PHP5环境下的面向对象.而我们必须改变自己来跟随PHP5的发展.如果代

js面向对象 编程: JavaScript 面向对象编程,严格过程的标准化编程法,目前为止最好的 JS 生成对象代码结构

市面上流行了很多 JavaScript 面向对象的编程方法,其中不少都有好些问题.这里总结最正确的 JavaScript 面向对象编程模式.对于类 Special 继承自类 Common 继承自类 Super 的情况,一个 Special 对象的创建,详细说来,应该经历以下步骤.1 确定继承关系1.1 读取 Special 的父类,发现是 Common1.2 读取 Common 的父类,发现是 Super1.3 读取 Super 的父类,发现没有了(隐形父类 Object)2 加载类结构(如果没

PHP中实现面向对象编程(下)

编程|对象 多态性 多态性被定义为当在运行时刻一个对象作为参数传递时,对象能决定调用那个方法的能力.例如,用一个类定义了方法 "draw",继承类重定义 "draw" 的行为来画圆或正方形,这样你就有一个参数为 x 的函数,在函数里可以调用$x->draw(). 如果支持多态性,那么 "draw" 方法的调用就取决于对象 x 的类型.多态性在PHP中很自然被支持(想一想这种情况在C++编译器中如果编译,那一个方法被调用?然而你不知道对象的类

PHP中实现面向对象编程(上)

编程|对象 这篇文章介绍在PHP的面向对象编程(OOP).我将演示如何用面向对象的概念编出较少的代码但更好的程序.祝大家好运. 面向对象编程的概念对每一个作者来说都有不同的看法,我提醒一下一个面向对象语言应有的东西: - 数据抽象和信息隐藏 - 继承 - 多态性 在PHP中使用类进行封装的办法: class Something { // In OOP classes are usually named starting with a cap letter. var $x; function se

JAVA程序员必读:基础篇(2)面向对象编程概念

编程|程序|程序员|对象|概念 如果你以前从来没有使用面向对象语言,你需要在开始编写JAVA代码之前先理解这个概念.你需要理解什么是对象.什么是类.对象和类的关系怎样以及使用消息怎样在对象之间进行通讯.本教程的前面部分将描述面向对象编程的概念,而后面的教程将教你怎样将这个概念编成代码. 2.1什么是对象 对象是一些相关的变量和方法的软件集.软件对象经常用于模仿现实世界中我们身边的一些对象.对象是理解面向对象技术的关键.你在学习之前可以看看现实生活中的对象,比如狗.桌子.电视.自行车等等.你可以发

最大限制地提高代码的可重用性,克服传统面向对象编程方法在可重用性方面的不足

编程|对象     重用是一种神话,这似乎正在日渐成为编程人员的一种共识.然而,重用可能难以实现,因为传统面向对象编程方法在可重用性方面存在一些不足.本技巧说明了组成支持重用的一种不同方法的三个步骤. 第一步:将功能移出类实例方法由于类继承机制缺乏精确性,因此对于代码重用来说它并不是一种最理想的机制.也就是说,如果您要重用某个类的单个方法,就必须继承该类的其他方法以及数据成员.这种累赘不必要地将要重用此方法的代码复杂化了.继承类对其父类的依赖性引入了额外的复杂性:对父类的更改会影响子类:当更改父