Как добавить CSS на сайт Weebly? »WebNots
CSS означает Cвосходящий STyle Sheets и используется для определения стиля элемента. Каждый элемент HTML в теме Weebly управляется определенным параметром, определяющим его внешний вид на опубликованном сайте, и все эти параметры хранятся в файле «main_style.css», к которому можно получить доступ по пути «Дизайн> Редактировать HTML / CSS> Активы». Всегда нет необходимости изменять основную таблицу стилей, вы также можете управлять стилем элемента либо на уровне страницы, либо на уровне отдельного элемента. В нашей предыдущей статье мы объяснили, как использовать скрипты на сайте Weebly, а в этой статье мы подробно обсудим различные способы добавления CSS на сайт Weebly.
CSS можно добавить на сайт следующими тремя способами:
- Встроенный стиль
- Внутренний стиль
- Внешняя таблица стилей
Встроенный стиль определяется непосредственно в элементе HTML внутри веб-страницы, влияя только на этот элемент.
Внутренний стиль определяется в разделе
HTML-документа, влияя на все отдельные элементы на этой странице.Внешний стиль определяется во внешнем текстовом файле с расширением .css и связан с HTML-документом с помощью тега в разделе
.Использование встроенных стилей в Weebly
Встроенные стили используются на уровне элемента, не затрагивая другие элементы на той же странице. Например, если вы хотите изменить цвет конкретного абзаца на красный с размером шрифта 18 пикселей, сохраняя при этом другие абзацы в соответствии с цветом по умолчанию, вставьте приведенный ниже код в элемент «Код для вставки».
<p style="font-size:18px; color:green;"> Here is the paragraph content…. </p>
Использование внутренних стилей в Weebly
Встроенные стили обычно применяются на уровне страницы, затрагивая все похожие элементы на странице. Например, вы можете вставить приведенный ниже код в раздел «Страницы> Выбрать страницу> Дополнительные настройки> Код заголовка», чтобы сделать весь текст абзаца на странице красным.
<style type="text/css">
p {color: red;}
</style>
Добавить код в заголовок страницы Weebly
Вы также можете встроить стиль в элемент «Embed Code», используя теги