XHTML 및 CSS_HTML/Xhtml_웹 페이지 제작의 객체 지향 프로그래밍

XHTML과 CSS가 객체지향적일 수 있다면. . 해는 북쪽에서 떠야 합니다. 하지만 모든 것을 OO 사고방식으로 보아야 하는데, 우리는 숫자를 거의 계산할 수 없습니다. 실제로 2000년 초 누군가가 OO 스타일을 제안했지만 더 이상 찾아볼 수 없다.
어떻게 하나요? 이제 CSS를 다음과 같이 작성할 수 있다는 것은 모두가 알고 있습니다.
.G_G { /* xxxxxx */ }
프로토타입 또는 클래스라고 생각할 수 있습니다. -__-b는 클래스인 것 같고 HTML 객체에서 "인스턴스화"되어야 합니다. 예를 들어:

이 요소는 CSS의 해당 정의를 사용하지만 해당 클래스로는 충분하지 않습니다. 왜냐하면 우리 페이지에서 이 클래스를 "Private"의 관계를 처리하기 위해 적용할 수 있기 때문입니다. 지금 코드를 다음과 같이 변경하세요.

이 경우 ID가 aaoao인 요소는 .G_G 클래스 정의를 적용하고 #aoao{}과 같은 선택기를 사용하여 공개 효과에 영향을 주지 않는 비공개 효과 정의를 입력할 수 있습니다 .G_G 🎜> 동시에 이 클래스는 #aoao에 의해 정의된 우선순위가 .G_G보다 높으며 이는 개인 정의가 공개 정의보다 우선순위가 높다는 상식에 부합합니다^^.
ID를 고유한 것으로 사용하기 때문에 이렇게 개인적으로 정의된 것을 재사용하는 것은 문제가 됩니다(ID는 페이지에 한 번만 나타날 수 있는데 누가 그런 말을 했는지는 모르겠지만 사실입니다). 동일한 것 중 다수를 민영화하고 싶다면 어떻게 해야 할까요? 그런 다음 "다형성"을 구현해야 합니다. 파세요 하하. 코드를 다시 변경하세요.

하나는 "G_G"이고 다른 하나는 "o_O"이지만 .o_O{}을 사용하면 CSS가 다음과 같이 요소를 정의할 수도 있습니다.
.G_G {폭:100%} .o_O {색상:#123456}
요소는 모두 정의되며, 정의가 중복되지 않으므로 모두 적용됩니다. 코드가 이렇다면 이해가 더 쉬울지는 모르겠습니다.

.layout{너비:100%} .color{color:#123456}
다음으로 "캡슐화"를 구현해야 합니다. 하위 선택기를 자주 사용해야 합니다. 코드를 변경하세요.

.bendan{}과 .G_G .bendan{}는 모두 정의할 수 있지만 후자는 클래스가 "G_G"인 요소에만 적용할 수 있습니다. 간단히 .bendan{}를 전역 정의로, .G_G .bendan{}를 로컬 정의로 이해하면 됩니다. , 이는 XHTML 및 CSS의 모듈화에 도움이 될 것입니다. ^^전설의 "캡슐화"가 등장하고 계속 이어졌습니다.

이러한 코드는 셀 수 없이 많은 변화를 가져올 수 있습니다. 그래도 이해가 되지 않는다면 처음부터 시작하세요. ^^
사실 이것들은 아직 진정한 객체 지향과는 거리가 멀습니다. 단지 헤드라인을 배우는 중이지만 ID와 클래스의 적용을 이해하는 데 사용할 수 있습니다.