XHTML与CSS的面向对象编程

心在痛我自己受

心在痛我自己受

2016-02-19 18:00

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享XHTML与CSS的面向对象编程教程,希望对大家能有一点小小的帮助。

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

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

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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  这样的代码就可以产生无数的变化了,还不明白的从头看起。^^

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

展开更多 50%)
分享

猜你喜欢

XHTML与CSS的面向对象编程

Web开发
XHTML与CSS的面向对象编程

理解面向对象编程

编程语言 网络编程
理解面向对象编程

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

javascript 的面向对象编程

电脑网络
javascript 的面向对象编程

Javascript面向对象编程

Web开发
Javascript面向对象编程

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

PHP的面向对象编程

Web开发
PHP的面向对象编程

Delphi面向对象的编程方法

编程语言 网络编程
Delphi面向对象的编程方法

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

通过优化网页页面降低对内存及CPU的占用

通过优化网页页面降低对内存及CPU的占用

2024经典伤感qq网名

2024经典伤感qq网名
下拉加载更多内容 ↓