Не понимаю, почему этот код не работает в гаджете HTML Box Google Sites
Я бездельничаю с сайтами Google, пытаюсь заставить некоторый HTML-код действительно работать, и я бегу в стену. По сути, я хочу иметь возможность вводить html-код, а также стили CSS без необходимости использования встроенных стилей, поэтому я провел небольшое исследование и уверен, что это можно сделать. Предположительно, все, что нужно, это добавить HTML-гаджет и ввести соответствующий код, нажать "Сохранить" и "Shezam"! Он должен работать. Проблема в том, что когда я это делаю, это совсем не работает.
Я посмотрел на следующие ссылки для некоторых указаний, и кажется, что я делаю все правильно:
Другая странная часть заключается в том, что когда я использую второй пример ссылок, он работает просто отлично, но когда я удаляю часть сценария в примере, он не дает результат в стиле, как мой код. Вот очень простой пример, который я попробовал.
Глобальная версия
<style>
#tester {
padding: 100px;
height: 500px;
width: 500px;
border: 1px solid #0F0;
background-color: #ff0000;
}
</style>
<div id="tester">please work 0_0</div>
Встроенная версия
<div id="tester" style="padding: 100px; height: 500px; width: 500px; border: 1px solid #0F0; background-color: #ff0000;">please work 0_0</div>
Все, что я получаю, это предложение без форматирования на самом div. Если я изменю его, чтобы использовать встроенный стиль, он будет работать просто отлично, но тогда это действительно побеждало назначение блока HTML в первую очередь.
Любой совет, что я делаю не так?
Изменить: Вот JSFiddle с тестовым кодом выше и как он должен выглядеть
Кроме того, я, наверное, должен уточнить. Код, который я предоставил, работает нормально и не содержит ошибок. Проблема, которую я пытаюсь решить, - заставить первую версию (не встроенную) работать в окне HTML-сайтов Сайтов Google.
1 ответ
HTML и CSS, включенные в "HTML Box", будут помещены в "песочницу", поэтому, к сожалению, вы не сможете использовать их для применения стилей к элементам на остальной части страницы.
Я получил это для работы на моем сайте со следующим кодом
<style type="text/css">
#tester {
padding: 100px;
height: 500px;
width: 500px;
border: 1px solid #0F0;
background-color: #ff0000;
}
</style>
<div id="tester">please work 0_0</div>
По умолчанию кажется, что когда вы находитесь в режиме редактора, ни один из пользовательских CSS в окне HTML не применяется. Если вы перейдете в верхний правый угол страницы, нажмите БОЛЬШЕ > Предварительный просмотр страницы как средство просмотра, оно будет отображаться правильно.