`

面向对象的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的应用。

分享到:
评论

相关推荐

    XHTML与CSS的面向对象编程

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

    CSS+XHTML+JavaScript完全学习手册

    此外,手册可能还会涉及JavaScript的高级主题,如面向对象编程、闭包和Promise,为未来的JavaScript框架和库的学习打下坚实基础。 这本《CSS+XHTML+JavaScript完全学习手册》涵盖了Web前端开发的三个主要支柱,无论...

    XHTML CSS JavaScript完全学习手册源代码(10-17章)

    此外,深入学习JavaScript的面向对象编程(OOP)和ES6的新特性也是提升技能的关键。 在10-17章的源代码中,你可能会遇到关于表格布局、导航栏设计、表单验证、图片轮播、JavaScript事件处理、CSS动画效果等多个实际...

    在线编程语言速学网,C++、CSS、java、json、PHP、python、swift等各种语言的快速学习教程。.zip

    1. C++:作为一种静态类型的、编译式的、通用的、大小写敏感的、不仅支持过程化编程,也支持面向对象编程的程序设计语言。C++的基础包括变量、数据类型、控制结构(如if语句、循环)、函数、指针和类。更高级的主题...

    韩顺平 html+css+js笔记(全)

    Java EE(Enterprise Edition)是一套用于构建企业级Web应用的技术框架,包括基础的Java SE(Standard Edition)、面向对象编程、数据库编程和SQL。在Web开发领域,PHP、Java和.NET都有各自的网页设计应用,如门户...

    各类API文档集合:XHTML\HTML5\CSS3.0\PHP5\JDK1.6\Spring2\Struts\ibatis

    PHP5引入了面向对象编程的支持,增强了错误处理,优化了性能,提供了PDO(PHP Data Objects)等数据库抽象层。 4. **JDK1.6**: - JDK(Java Development Kit)是Java开发的必备工具,Java 1.6版增加了泛型、枚举...

    div+css网站标准(WEB标准)

    - **OOAD/OOAD/OOP**:面向对象的分析(OOA)、设计(OOD)和编程(OOP)是一种软件开发方法论,强调以对象为中心的设计思想。 - **Web 2.0**:代表了一种新的互联网应用模式,强调用户的参与和互动,包括博客、RSS...

    客户端网页编程学习总结.doc

    特别是面向对象编程,它包括构造函数、原型链、继承等概念,这对于未来深入学习如Java等其他面向对象语言大有裨益。 JavaScript中的变量是弱类型的,这意味着它们无需预声明类型,可以动态地存储不同类型的值。这种...

    JavaWeb-02(CSS和JavaScript)

    5. **面向对象编程**:JavaScript支持基于原型的面向对象编程,包括构造函数、原型链和闭包。 6. **ES6及后续版本**:ECMAScript的新特性,如let/const声明、箭头函数、模板字符串、解构赋值、类和模块系统等,提升...

    html and css

    - **功能原理**:JavaScript支持事件驱动、函数式编程、面向对象编程等多种编程范式,可以操纵DOM(Document Object Model),实现动态更新网页内容。 - **DOM-文档对象模型**:DOM是JavaScript操作HTML文档的标准...

    CSS3+Html5+JavaScript全套参考手册

    此外,模块化(import和export)解决了大型项目中的依赖管理问题,而类和继承的引入使得面向对象编程更加得心应手。JavaScript还与DOM(Document Object Model)紧密相连,通过操作DOM来改变页面内容和结构。 本套...

    语言程序设计资料:javascript_与CSS.doc

    3. **面向对象编程**: - JavaScript 是一种面向对象的语言,对象、属性和方法可以通过点号语法进行组合。 - DOM(文档对象模型)是JavaScript操作网页内容的重要工具,它将HTML或XML文档抽象成一棵树形结构。 4....

    韩顺平轻松搞定网页设计(html.css.js)(完整版).docx

    JavaScript的基本语法、数组、面向对象编程、系统函数、事件处理以及正则表达式都是其核心组成部分。通过JavaScript,开发者可以实现用户交互、表单验证、动画效果等功能,提升用户体验。 网页设计不仅仅是技术实现...

    客户端学习总结.docx

    JavaScript则是客户端学习的重点,它是一门强大的脚本语言,具有面向对象的特性,这对于后续学习Java或其他面向对象语言有着很好的铺垫作用。与C语言的面向过程编程不同,JavaScript允许程序员以更灵活的方式处理...

    web 技术基础 css 设计

    - **授课对象**:主要面向07软件1班(专科)的学生 - **先修课程**:《网页三剑客》(Adobe Dreamweaver、Adobe Flash、Adobe Fireworks) - **同修课程**:《JAVA》 ### 就业方向与职业岗位 完成本课程后,学生...

Global site tag (gtag.js) - Google Analytics