2010-04-27 3 views
2

Я создаю веб-сайт, и я хочу, чтобы персонализация отдельных пользователей до некоторой степени, как изменение семейства шрифтов, цвета фона и т. Д. Проблема заключается в том, что мой файл css по умолчанию, который я загрузил, по умолчанию классы для всего. Теперь, когда я получаю фоновый цвет из моей базы данных, тогда, если для фона есть нулевое значение, тогда должен быть загружен класс css mystylesheet.css по умолчанию, и если значение не равно null, то я хочу переопределить это с помощью css по умолчанию. Как это возможно? Заранее спасибо :)вопрос начинающего о CSS

+0

Что вы используете, чтобы сделать выборку? Есть, вероятно, десятки разных серверных языков, которые могут быть использованы для этого, поэтому, пожалуйста, отредактируйте свой вопрос, поскольку PHP, C# и Java - все возможные языки, которые могут быть использованы для этого. Во-вторых, какова ваша база данных, использующая язык для автоматического возврата значений? –

+0

Я отредактировал, как вы сказали – TCM

ответ

3

нагрузки stylesheat по умолчанию в стиле тега, и поставить динамику стили в теге стиля после этого.

Какой стиль использовать, когда разные стили нацелены на один и тот же элемент, определяется спецификой, и если селекторы одинаковы, по порядку. Используется стиль, который найден последним.

+0

+1: Я собирался сказать то же самое, но сервер сбросил и потерял мой ответ. – Robusto

1

EDIT: Reason for CSS property precedence?

Одним из способов является создание файла CSS динамически из PHP-скрипта.

Вы бы включить файл как:

<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, потребует перезагрузки страницы, когда вы хотите переключать листы стилей. То, что я нахожу, чтобы быть лучшим подходом является добавлением имени класса к телу , если у вас есть возможность использовать JavaScript

<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. Он включает загрузку всех таблиц стилей, которые вы хотите использовать с тегами <. Хитрость заключается в том, что вы можете установить отключенное свойство в элементе ссылки, которое не приведет к его применению.

Для примера, используйте поджигатель и посмотреть на

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

Посмотрите на styleswitcher.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 так, чтобы она была последней в порядке –

+0

Hi Jaun, Я разрешаю пользователю использовать подборщик цветов для выбора цвета фона страницы. Итак, я не думаю, что этот подход тоже сработает. В качестве этого статического подхода мы заранее определяем таблицы стилей с заданными цветами. Можете ли вы сказать мне, у кого есть приоритет? Внешний файл css, встроенный css или один в ? До сих пор я нашел подход Гуффа наиболее подходящим для моего требования. – TCM

+0

Нет, я чувствую, что подход Гуфы будет работать даже при загрузке другой темы. – TCM

Смежные вопросы