Мой вопрос касается именно того, что мне нужно, но меня также интересуют «общие правила», касающиеся того, как сохранить стили при открытии HTML-страницы в Word. Более подробная информация о моем контексте следует.
HTML-файл, открываемый в Word, содержит элементы <link ... /> включая таблицы стилей. все отображается нормально в браузере.
До сих пор я обнаружил, что элементы с несколькими классами не переносят свои стили и не вкладывают ничего, когда основаны на элементе с несколькими классами.
Учти это:
<p class="class1">This <span class="class1 class2">is my</span> text.</p>
.class1 { color:green; }
.class2 { color:orange; }
.class1.class2 { color:red; }
.class1.class2,
.class1 { color:blue; }
Результаты в:
pзеленый, потому что его первое объявление выполненоpне синий, потому что это объявление является частью недопустимого мультиклассового объявления (!)spanоранжевый, потому что его первое объявление выполнено- Как и в пункте 2.
spanне красный и не синий из-за «недопустимых» мультиклассовых объявлений
-
В результате вышеприведенных результатов я закончил оборачивать свои элементы в другой элемент, всегда с одним именем класса разметки, и успешно форматировать вещи на этой основе.
Обратите внимание, что с элементами JavaScript можно манипулировать, добавляя / удаляя дополнительные имена классов по мере необходимости. Word интересует только фактическая разметка в HTML-файле, который он пытается проанализировать.
Чего я не понял, так это как получить относительно связанные фоновые изображения CSS, которые будут отображаться при открытии файлов HTML в Word. Я обычно использую ярлык: background:transparent url(../img/icon-audio-16.gif) left top no-repeat; что не сработало (да, проверил мои пути), но затем не сработало:
background-color:transparent;
background-image:url(../img/icon-audio-16.gif);
background-position:left top;
background-repeat:no-repeat;
Ага...