2010-04-27 3 views
2

나는 웹 사이트를 만들고 있는데, 개인 사용자에게 글꼴 패밀리, 배경색 등을 바꿀 때까지 어느 정도까지 개인화를 허용하고 싶습니다.이 문제는 내가로드 한 기본 CSS 파일이 이미 기본값입니다. 모든 것을위한 수업. 이제 내 데이터베이스에서 배경색을 가져올 때 배경색에 null 값이있는 경우 mystylesheet.css의 기본 CSS 클래스를로드해야하며 값이 null이 아닌 경우이 값을 기본 CSS로 덮어 쓰려고합니다. 그게 어떻게 가능해? 미리 감사드립니다 :)초보자 질문에 대한 답변

+0

가져 오기를 수행하기 위해 무엇을 사용하고 있습니까? 여기에는 아마도 수십 가지의 다른 서버 측 언어가 사용될 수 있으므로 PHP, C# 및 Java와 같은 질문을이 언어로 사용할 수있는 모든 언어로 편집하십시오. 둘째, 프로그래밍 방식으로 값을 반환하기 위해 언어에 사용하는 데이터베이스는 무엇입니까? –

+0

내가 말한대로 편집했습니다 – TCM

답변

3

로드 스타일 태그의 기본 stylesheat, 그리고 동적를 넣어 그 후에 스타일 태그의 스타일.

다른 스타일이 동일한 요소를 대상으로 할 때 사용할 스타일은 특정성에 따라 결정되고 선택기가 동일한 경우 순서에 따라 결정됩니다. 마지막에 발견 된 스타일이 사용됩니다.

+0

+1 : 나는 똑같은 말을하려고했으나 서버가 재설정되고 응답을 잃어 버렸다. – Robusto

1

편집 : Reason for CSS property precedence?

한 가지 방법은 PHP 스크립트에서 동적으로 CSS 파일을 생성하는 것입니다.

당신이 좋아하는 파일이 포함됩니다

:

<link rel="stylesheet" type="text/css" href="css.php"> 

과 같은 것을 볼 것이다 css.php 파일 :

<?php 
header('Content-type: text/css'); 
// whatever you want to ouput depending on the user 
?> 
+0

CSS 파일을 동적으로 포함하고 싶지 않습니다. 특정 클래스 만 변경하면되고 전부는 변경되지 않으므로 내 기본 클래스에 100 개의 클래스가 있다고 가정하고 사용자가 3 개의 클래스 만 변경할 수 있도록하려고합니다. 이 경우 동적으로 새 CSS 파일을 작성하는 것은 실용적이지 않습니다. 나는 우선 순위가 무엇인지 알고 싶습니까? 외부 CSS 파일, 인라인 CSS 또는 에 쓰는 것과 모든 브라우저가 동일한 방법을 따르는가? – TCM

+0

확인을 클릭하십시오. 링크가있는 답변이 업데이트되었습니다. – zaf

3

zaf에서 언급 한 접근 방식에서는 스타일 시트를 전환 할 때 페이지를 다시로드해야합니다.

: 내가 더 나은 방법이 될 찾을하면 선언에서 테마 이름을 포함해야 다음 당신의 스타일 시트를 각각 자바 스크립트

<body class="theme-1"> 
    <div class="main"><div> 
</body> 

를 사용할 수있는 옵션이있는 경우 신체 에 클래스 명을 추가하는 것입니다

--theme1.css

.theme-1 div.main { 
    background-color: #eee 
} 

--theme2.css

.theme-2 div.main { 
    background-color: #f30 
} 

스타일 시트를 전환하려면 기존 테마 이름을 제거하고 사용할 테마를 추가하기 만하면됩니다.

사용자가 페이지의 디자인을 사용자 정의 할 수 있도록 인터페이스를 제공하면 스타일 시트를 동적으로 추가 할 수도 있습니다.

새로운 향상된 답변 :

난 그냥에 extjs에서의 사람들에 의해 구현 된 좋은 해결책을 발견했다. 여기에는 < link> 태그를 사용하여 원하는 모든 스타일 시트를로드하는 작업이 포함됩니다. 트릭은 link 요소에 disabled 속성을 설정하여 적용되지 않게 할 수 있다는 것입니다. 예를 들어

은 방화범을 사용하고 styleswitcher에 대한

http://www.extjs.com/deploy/dev/examples/themes/index.html

봐 봐.js 및 setActiveStyleSheet 함수를 살펴보십시오.

function setActiveStyleSheet(title) { 
    var i, 
    a, 
    links = document.getElementsByTagName("link"), 
    len = links.length; 

    for (i = 0; i < len; i++) { 
    a = links[i]; 
    if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { 
     a.disabled = true; 
     if (a.getAttribute("title") == title) a.disabled = false; 
    } 
    } 
} 
+0

다른 테마로 돌아가려면 Gufa의 접근 방식이 효과적입니다. CSS의 순서가 마지막으로 바뀌도록 CSS를 다시 작성해야합니다. –

+0

안녕하세요, Jaun, 사용자가 배경 색상을 선택하기 위해 색상 선택 도구를 사용할 수 있도록 허용하고 있습니다. 페이지. 그래서, 나는이 접근 방식이 효과가 있다고 생각하지 않습니다. 이 정적 인 접근 방법으로 사전에 미리 지정된 색상으로 스타일 시트를 정의하고 있습니다. 우선 순위가 어느 정도인지 말해 줄 수 있습니까? 외부 CSS 파일, 인라인 CSS 또는 에있는 파일? 지금까지 Guffa의 접근 방식이 내 요구 사항에 가장 적합하다는 것을 알았습니다. – TCM

+0

아니, 나는 다른 테마가로드 된 경우에도 Gufa의 접근 방식이 작동한다고 느낍니다. – TCM