2013-04-17 2 views
1

Я использую tinymcewysiwyg для создания некоторых красивых инструкций для моего сайта. Я просто сохраняю код, сгенерированный html, в мою базу данных и отображаю этот html на странице.CSS - прозрачные стили для элемента

Поскольку мой сайт загрузится свои собственные таблицы стилей, некоторые вещи, которые, как правило, проявляются в зависимости от того, что диктуют стиль (как <ul>, <li> или <p> теги)

Если какой-либо из этих тегов генерируются из tinymce, мой таблицы стилей сайта будут их стиле.

Выстрел в темноте. Есть ли стиль, который заставляет браузер игнорировать все стили, которые находятся внутри определенного элемента?

Для визуальной помощи, вот снимок tinymce и то, что я делаю: TinyMce

А вот снимок отображается HTML, на моем сайте:

Result of TinyMce

(этот html находится внутри <div id="tinymce_html"><?php echo $tinymce_html; ?></div>)

Это css, который влияет на него (по всему сайту), внутри таблицы стилей main.css

ol, ul { 
    list-style:none; 
    padding: 0; 
    margin: 0; 
} 

Btw, я приводил пример только для тегов <ul>. Я уверен, что у меня будет больше тегов. (следовательно, мой оригинальный вопрос - «существует ли стиль, который заставляет браузер игнорировать все стили, которые находятся в определенном элементе?»)

Что я не хочу делать, это создать совершенно новую таблицу стилей для чего-либо, связанного с tinymce или другие html Я бы хотел отображать, не подвергая себя воздействию каких-либо стилей сайта.

+0

Что вы описываете, это немного [запах кода CSS] (http://csswizardry.com/2012/11/code-smells-in-css/); вам действительно нужно взглянуть на то, чтобы ваши существующие таблицы стилей были * меньше * generic (например, не применяли стили ко всем элементам «ol», например). – cmbuckley

ответ

0

Всегда используйте «reset css» перед запуском нового проекта!

Посмотрите на this.

Скопируйте этот стиль над кодом и начните с этого. Он перезагружает все ваши элементы.

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
+0

Я думаю, что сброс листа выше добавит некоторую путаницу. Крошечный использует сильный, чтобы сделать выделение полужирным, также он использует em, чтобы сделать выделение курсивом. Поэтому нужно определить эти два (по крайней мере) в другом месте в другой таблице стилей. – Jeffz

0

Похоже, вы хотите применить таблицу стилей сброса css. Посмотрите here и возьмите тот, который кажется наиболее применимым для вас.

Вы должны добавить этот css в редактор, используя опцию конфигурации tinymce custom_css.

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