각 페이지마다 동일한 스타일을 유지하지만 때로는 약간 다른 요소가있는 경우

Question

내 웹 사이트의 특정 페이지에서 이미지 목록을 사용하는 경우가 있습니다. 한 페이지에 가로로 나타나는 목록이 있지만 같은 목록을 다른 페이지에 세로로 표시하려면 한 개의 목록이 가로로 표시되고 다른 한 표시가 세로로 표시되도록 div를 새로 만들어야합니다.

#imagevertical { 
} 

#imagehorizontal { 
} 

이것은 그리 나쁘지는 않지만 이미지 목록을 각기 약간 다르게 표시하려는 많은 웹 페이지가있는 경우 상당히 지저분 할 수 있습니다.

다른 방법이 있습니까?

고마워

Answer 1

각 페이지의 div 이름을 적용 할 스타일 만 변경할 필요가 없으므로 "imagelist"라는 div를 사용하고 스타일 시트에 모든 공통 스타일을 적용한 다음 추가 스타일을 페이지 자체. CSS에서

:

#imagelist { common styles...} 

하나의 HTML 페이지에서 : 다른 HTML 페이지에서

<style type="text/css"> 
    #imagelist { something that makes it vertical... } 
</style> 

:

<style type="text/css"> 
    #imagelist { something that makes it horizontal... } 
</style> 

인 페이지 스타일이 우선합니다에서 수입하는 외부 스타일 시트가 있으면 div의 이름을 변경하고 둘 사이의 모든 공통 스타일을 다시 지정할 필요가 없습니다.

또는이에 대한 수평 및 수직 클래스를 만들 수 있습니다

CSS :

<div id="imagelist" class="vertical">content...</div> 

: 수직 페이지

<div id="imagelist" class="horizontal">content...</div> 

HTML : 가로 페이지에 대한

#imagelist { common styles... } 
.horizontal { something that makes it horizontal... } 
.vertical { something that makes it vertical... } 

HTML

이것이 첫 번째 해결책보다 나은 해결책이라고 생각합니다.

Answer 2

은 외부 스타일 시트를 확인하고 모든 페이지에 스타일을 넣어 당신은 CSS의 섭리에 약간 다른합니다.

external < internal < inline 

!important을 사용할 수도 있습니다.

스타일이 충돌하는 경우 스타일이 다릅니다.