Найти в Дзене

Бесплатный практикум от Indeling!!! Создание стилей в HTML и CSS!

Оглавление

В этом практикуме речь пойдет об основных приемах создания CSS-стилей, в том числе встроенных, а также внутренних и внешних таблиц стилей. По мере прочтения разделов сайта на практических примерах вы научитесь создавать различные CSS-стили, от простых элементов дизайна до полноценных CSS-ориентированных макетов веб-страниц.

Основные разделы практикума

Все материалы взяты с сайта https://indeling.ru


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

ПРИМЕЧАНИЕ
Например, создавая HTML-форматированные электронные письма, лучше использовать встроенные стили. Это, к слову, единственная возможность заставить CSS работать в Gmail.

Если вы все-таки применяете этот метод и хотите, чтобы стиль работал должным образом, то уделите особое внимание размещению команд форматирования внутри элементов, которые следует отформатировать. Рассмотрим пример, наглядно демонстрирующий, как это делается....

Создание внутренней таблицы стилей
Вместо встроенных стилей лучше использовать таблицу стилей, содержащую множество стилей CSS, каждый из которых придает внешний вид своему элементу страницы. Прочитав этот раздел, вы научитесь создавать стиль, который изменяет внешний вид всех заголовков первого уровня за один прием. Этот единственный стиль автоматически отформатирует все элементы
h1 веб-страницы...

Создание внешней таблицы стилей
Поскольку во внутренних таблицах все стили сгруппированы в начале веб-страницы, создавать и редактировать их намного проще и удобнее, чем встроенные стили, с которыми вы имели дело до этого. Кроме того, внутренние таблицы стилей позволяют форматировать любое количество экземпляров элементов веб-страницы одновременно (как в примере с элементом
h1), создав один простой стиль (правило). Внешние таблицы стилей не только наследуют преимущества внутренних таблиц, но и имеют дополнительные плюсы: в них можно хранить все стили для всех страниц сайта. Редактирование одного стиля во внешней таблице обновляет стиль целого сайта. В этом разделе вы возьмете стили, созданные в предыдущем уроке, и поместите их во внешнюю таблицу стилей...

Что Вы сможете сверстать после прохождения практикума?

Применение внешних таблиц стилей позволяет обновить дизайн всех страниц сайта за один прием посредством редактирования единственного CSS-файла. Полное исключение CSS-кода из HTML-документа и вынесение его в отдельный файл может значительно уменьшить размер самих веб-страниц, следовательно, они будут загружаться намного быстрее.
Применение внешних таблиц стилей позволяет обновить дизайн всех страниц сайта за один прием посредством редактирования единственного CSS-файла. Полное исключение CSS-кода из HTML-документа и вынесение его в отдельный файл может значительно уменьшить размер самих веб-страниц, следовательно, они будут загружаться намного быстрее.

Преходи по ссылке и пройди первый практикум уже сегодня: https://indeling.ru/html-css/praktika-html-i-css/praktikum-sozdanie-stilej/