CSS3

Изучение CSS/CSS3 от нуля до гуру!

15 уроков 45 заданий Справочник Компилятор

#3 - Написание стилей для HTML документа

#3 - Написание стилей для HTML документа


HTML5CSS3

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

Видео урок:

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

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

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

И наконец третий вариант. Он позволяет нам создать отдельный файл с расширением .css и подключить его к нашей странице при помощи специального тега в шапку сайта - head.
<link rel="stylesheet" href="style.css">
Этот вариант является наилучшим, так как позволяет отделять стили от HTML документа, что не только улучшит время загрузки сайта, но также улучшит читаемость кода в целом.

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

Загрузка...

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

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

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

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


HTML5CSS3

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