Делаем добро вместе Детальнее

#2 – Форматы подключения стилей

#2 – Форматы подключения стилей

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

Видеоурок

Преимущества CSS очевидны, так как он позволяет оформлять сайты: из некрасивой HTML разметки преобразовывать всё в отличные веб сайты с современным дизайном. 


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


Для понимания возможностей CSS предлагаем посмотреть наш урок по CSS анимации:



Способы подключения CSS

Всего существует 3 способа, что позволяют записывать стили для HTML объектов. Каждый способ стоит применять в определенных случаях. 


Атрибут style

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


Тег style

Второй способ позволяет записывать стили уже для многих элементов. Это способ написания стилей в теге style. Вот пример такой записи:

<style>
	какие-нибудь CSS стили
</style>

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


Отдельный CSS файл

Третий вариант. Он позволяет создать отдельный файл с расширением .css и подключить его к веб странице при помощи специального тега в шапке сайта - head:

<link rel="stylesheet" href="style.css">

Этот вариант является наилучшим, так как позволяет отделять стили от HTML документа, что не только улучшит время загрузки сайта, но также улучшит читаемость кода в целом.

Материалы для курса

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Онлайн редактор кода

Загрузка...

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Также стоит посмотреть

Создание сайта с нуля | Полноценная верстка сайта
11 уроков
Создание адаптивного сайта
4 урока
Изучение препроцессора SASS / SCSS
7 уроков
Вёрстка адаптивного сайта на Bootstrap 4
6 уроков
Современная вёрстка адаптивного веб-сайта
Видеокурс по PHP, MySQL / Создание динамического сайта
Комментарии для сайта Cackle