XHTML CSS 웹 페이지 레이아웃의 ID 및 클래스 이해 및 적용:
XHTML과 CSS만 객체지향이 가능하다면 말이죠. . 해는 북쪽에서 떠야 합니다. 하지만 모든 것을 OO 사고방식으로 보아야 하는데, 우리는 숫자를 거의 계산할 수 없습니다. 실제로 2000년 초 누군가가 OO 스타일을 제안했지만 더 이상 찾아볼 수 없다.
그럼 무엇을 해야 할까요? 이제 CSS를 다음과 같이 작성할 수 있다는 것은 모두가 알고 있습니다.
| .G_G { /* xxxxxx */ } |
프로토타입 또는 클래스로 생각할 수 있습니다. -__-b는 원래 클래스인 것으로 보이며 HTML에서 객체를 "인스턴스화"합니다. 예를 들면 다음과 같습니다.
| <div class="G_G">바보 울음소리</div> |
이 요소는 CSS의 해당 정의를 사용하지만 해당 클래스만으로는 충분하지 않습니다. 페이지에서 이 클래스를 여러 위치에 적용할 수 있으므로 "비공개" 관계를 처리하려면 지금 코드를 다음과 같이 변경하세요.
| <div id="aoao" class="G_G">바보 울음소리</div> |
이 경우 ID가 aaoao인 요소는 .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 {폭:100%} .o_O {색상:#123456} |
요소는 모두 정의되며, 정의는 쌓이지 않으므로 모두 적용됩니다. 코드가 이렇다면 이해가 더 쉬울지는 모르겠습니다.
<div class="layout color">멍청한 새가 아닙니다</div> .layout{너비:100%} |
다음으로 "캡슐화"를 구현해야 합니다. 하위 선택기를 자주 사용해야 합니다. 코드를 변경하세요.
| <div class="G_G"><span class="bendan">바보<//span>아야</div> |
.bendan{}과 .G_G .bendan{}을 모두 정의할 수 있지만 후자는 "G_G" 클래스가 있는 요소에만 적용할 수 있습니다. .bendan{}은 전역 정의로, .G_G .bendan{ }은 간단히 이해할 수 있습니다. XHTML과 CSS의 모듈화에 도움이 되는 부분 정의로 이해됩니다. ^^전설의 "캡슐화"가 등장하고 계속 이어졌습니다.
| <div id="aoao" class="G_G o_O"><span class="bendan">바보</span>嗷嗷</div> |
이러한 코드는 수많은 변경을 낳을 수 있으며, 이해하지 못하면 처음부터 다시 시작해야 합니다. ^^
XHTML CSS 웹페이지 레이아웃에서 ID와 클래스의 적용을 깊이 이해하세요!