2013-02-23 2 views
0

웹 응용 프로그램을 만들고 모든 색상, 레이아웃, 위치 지정 등에 적용 할 수있는 CSS 스타일 시트를 작성했습니다. 전체적으로 약 800 줄입니다.하나의 마스터 페이지에서 여러 CSS 스타일 시트를 사용하는 방법이 있습니까?

색 구성표 환경 설정을 선택할 수있는 옵션을 제공하고 싶습니다. 현재이 프로젝트에는 각기 다른 색 속성 (약 15 또는 20 줄)을 사용하여 6 개의 서로 다른 색 구성표 옵션을 나타내는 CSS 파일이 6 개 있다는 것을 의미합니다.

이것은 많은 번거로운 복제와 같습니다. 다른 모든 CSS 속성은 각 사본에서 동일하게 유지됩니다.

일반적인 CSS 스타일 시트와 함께 적용 할 별도의 CSS 스타일 시트로 색상 속성을 구분하는 방법이 있습니까? 대한 (

p, li, #whatever, .someClassInfluencedByColoring{ 
    color: #[yourColor]; 
} 

당신이 하나의 CSS 파일에이 선언을 넣을 수 있습니다 : 당신의 목표를 달성하기

+2

... –

+0

이 알고하지 않았다; 새로운 웹 개발. 많은 고마워,이게 정확히 내가 한거야 .. –

답변

2

방법 중 하나는 착색에 의해 영향을 받는다 모든 CSS-요소를 추출처럼 하나의 선택에 넣어하는 것입니다 다음 예 color.css)과는 마스터 CSS 파일에서 다음과 같이 import 문을 사용

@import url("color.css"); 

또 다른 방법은 SASS 또는 LESS을 사용하고있는 모든 스타일 시트에 한 번 색상을 정의 변수를 사용하는 것입니다.

1

컬러 스타일 시트를 만드십시오. 메인에

Main.css 

.example{ 
float:right; 
width:100px; 
height:auto; 
} 

이라는 클래스가 있으며 사용자가 지정한 색상 구성표로 색상을 적용하고자한다고 가정 해 보겠습니다.

는 다음과 같이 보일 것이다 메인 인덱스 페이지에서 너무

Color1.css 

.example{ 
color:orange; 
} 

Color2.css 

.example{ 
color:red; 
} 

처럼 작은 색 구성표를 확인하십시오

내가 생각할 수있는 유일한 방법
<head> 
<link rel="stylesheet" type="text/css" href="main.css" /> 

    <?php 
    //user get color scheme from db query 
    $color = //user color variable 
    if($color == 1){ 
    echo '<link rel="stylesheet" type="text/css" href="color1.css" />'; 
    }elseif($color == 2){ 
    echo '<link rel="stylesheet" type="text/css" href="color2.css" />'; 
    } 
    ?> 
</head> 

.

-1

은 사용

var bleh = $('body'); 
function changeToBlue() { 
    bleh.css("background","blue"); 
} 
당신은 한 페이지에 하나 이상의 스타일 시트를 포함 할 수
관련 문제