Как я могу переопределить информацию о стиле из класса CSS в теле страницы?

Итак, я работаю над проектом, который принимает HTML файлы в качестве входов и возвращает их в качестве выходов. Все HTML файлы, которые я получаю в качестве входных данных, имеют весь текст в div и таблицах стилей, которые определяют стиль для каждого div на основе атрибута класса.

Чтобы лучше визуализировать вещи, и чтобы увидеть, как идет мой проект, мне бы хотелось вывести цветные коды ввода HTML, которые я им даю. Мне очень легко изменить тело HTML, но трудно справиться с таблицей стилей. Все, что я ищу, - это что-то простое, чтобы переопределить свойство цвета таблицы стилей. Он может быть взломан, поскольку это всего лишь внутренний код для временного использования. Я просто хочу, чтобы что-то простое работало. Есть ли простой способ переопределить аспекты классов CSS в теле файла?

[EDIT] Я хочу привести пример, чтобы лучше объяснить, что я ищу. Пример таблиц стилей, которые у меня есть в верхней части моей страницы (которые я хочу переопределить):

.style21{vertical-align:top;font-size:13px;font-family:Helvetica;color:#000000;}

Пример div, цвет которого я бы хотел изменить:

<div style="position:absolute;top:432;left:422;color:#ff0000;"><span class="style21">relating to</span></div>код >

Моя проблема в том, что я не могу переопределить цвет, указанный в css. Как вы можете видеть в приведенном выше примере, я пытаюсь сделать это в определенном стиле в div, но это не работает. [/EDIT]

Ответы

Ответ 1

Используйте атрибут style для добавления CSS в свои div, например:

<div style="color:red"> ... </div>

... или создать свою собственную таблицу стилей и ссылаться на нее после существующей таблицы стилей, тогда ваша таблица стилей должна иметь приоритет.

... или добавить элемент <style> в <head> вашего HTML с помощью CSS, который вам нужен, это будет иметь приоритет над внешней таблицей стилей.

Вы также можете добавить !important после значений стиля, чтобы переопределить другие стили одного и того же элемента.

Обновление

Используйте одно из моих предложений выше и настройте диапазон класса style21, а не содержащий div. Стиль, который вы применяете в содержащем div, не будет наследоваться по диапазону, поскольку цвет указан в таблице стилей.

Ответ 2

  • Id до классов.
  • Отметка тега 'style =' перед селекторами CSS.
  • !important слово предшествует двум первым правилам.
  • Более конкретные селектора CSS до менее специфичны. Будет более конкретным.

например:

  • .divclass .spanclass более специфичен, чем .spanclass
  • .divclass.divclass более конкретный, чем .divclass
  • #divId .spanclass имеет идентификатор, поэтому он более специфичен, чем .divclass .spanclass
  • <div id="someDiv" style="color:red;"> имеет атрибут и биты #someDiv{color:blue}
  • style: #someDiv{color:blue!important} будет применяться по атрибуту style="color:red"

Ответ 3

вы можете протестировать цвет, написав встроенный CSS как <div style="color:red";>...</div>

Ответ 4

Вы можете поместить CSS в head файла HTML, и он будет прецедентом над классом в включенной таблице стилей.

<style>
.thing{
    color: #f00;
}
</style>

Ответ 5

Вы пробовали использовать флаг! important в стиле?! important позволяет вам решить, какой стиль победит. Также обратите внимание! Важно будет переопределять встроенные стили.

#example p {
    color: blue !important;
}
...
#example p {
    color: red;
}

Другие предложения пары:

Добавьте прорезь внутри текущего. Внутреннее большинство победит. Хотя это может стать довольно уродливым.

<span class="style21">
<span style="position:absolute;top:432px;left:422px; color:Red" >relating to</span>
</span>

jQuery также является опцией. Библиотека jQuery будет вставлять атрибут стиля в целевой элемент.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript" ></script>
    <script type="text/javascript">

        $(document).ready(function() {
            $("span").css("color", "#ff0000");
        });

    </script>

Надеюсь, это поможет. Иногда CSS может быть довольно неприятным.

Ответ 6

если вы можете получить доступ к голове, добавьте <style> /*...some style */ </style>  как показал Хусейн и ультра хаки <style> </style> в html он будет работать, но его уродливо. или javascript это лучший способ, если вы можете использовать его в вашем случае

Ответ 7

Эли, важно помнить, что в css специфичность идет долгий путь. Если ваш встроенный css использует! Important и не переопределяет импортированные правила таблиц стилей, тогда внимательно наблюдайте за кодом, используя такой инструмент, как firebug для firefox. Он покажет вам, что css применяется к вашему элементу. Если есть ошибка синтаксической ошибки, Firebug покажет вам на панели предупреждения, что она выкинула объявление.

Также помните, что в общем случае идентификатор более конкретный, чем класс, более конкретный, чем элемент.

Надеюсь, что это поможет.

-Rick