Home > Web Front-end > HTML Tutorial > Object-oriented programming of XHTML and CSS_HTML/Xhtml_Web page production

Object-oriented programming of XHTML and CSS_HTML/Xhtml_Web page production

WBOY
Release: 2016-05-16 16:44:27
Original
1725 people have browsed it

If XHTML and CSS can be object-oriented. . The sun should be rising in the north. However, everything should be viewed with an OO mentality, and we can barely make up the numbers. In fact, someone proposed OO-style as early as 2000, but it can no longer be found.
How to do it? Now everyone knows that CSS can be written like this:
.G_G { /* xxxxxx */ }
We can think of it as a prototype, or class, -__-b seems to be a class, and then it needs to be "instantiated" in HTML Object, for example:
Idiot wailing

This element will use the corresponding definition of CSS, but the corresponding class is not enough, because our page may apply this class in many places. In order to handle the relationship of "Private", put Change the code just now to:
Idiot wailing

In this case, the element with ID aaoao will apply the definition of .G_G class, and you can use selectors like #aoao{} to enter the definition of private effects, which will not affect the public .G_G 🎜>This class, at the same time, the priority defined by #aoao will be higher than .G_G, which is in line with the common sense that private definitions have higher priority than public definitions^^.
Since I use ID as a unique thing, reusing such privately defined things becomes a problem (an ID can only appear once on a page, I don’t know who said that, but it is truth). What if we want to achieve privatization of many of the same things? Then we must implement "Polymorphism". Dig haha. Change the code again:
Idiot wailing

One is "G_G" and the other is "o_O", but if we use .o_O{}, we can also define the element. If the CSS is like this:
.G_G {width:100%} .o_O {color:#123456} The
elements will all be defined, and since the definitions do not overlap, they will all be applied. If the code is like this, I don't know if it will be easier to understand.
I’m not an idiot.

.layout{width:100%} .color{color:#123456}
Next, we need to implement "Encapsulation". You should use the child selector frequently. Change the code:
IdiotOuch

Although both .bendan{} and .G_G .bendan{} can be defined, the latter can only be applied to elements with class "G_G". We can simply understand .bendan{} as a global definition and .G_G .bendan{} as a local definition. , this will be beneficial to the modularization of our XHTML and CSS. ^^The legendary "encapsulation" appeared, and then it continued.
IdiotOuch

Such code can produce countless changes. If you still don’t understand it, start from scratch. ^^
Actually, these are still far from true object-oriented. I am just learning the headlines, but I can use it to understand the application of ID and class.
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template