27.11.2018
1076
Как добавить CSS-файл в документ

Как добавить CSS-файл в документ

Поделиться
Отправить
Плюсануть
Запинить
Класснуть
Отправить
Поделиться

1. Путь на файл CSS.

Данный метод является наиболее распространенным. С помощью этого метода все ваши правила стиля содержатся в одном документе, который сохраняется с расширением .css. Мы используем тег ссылки, который представляет собой набор симовлов HTML, чтоб потом его поместить в главный раздел вашего документа HTML. Атрибут rel установлен CSS, чтобы сообщить браузеру, что связанный файл является листом стиля Casscading (CSS). Если вы используете HTML5, атрибут type не требуется, вы можете удалить его и сохранить несколько байтов на страницу. Атрибут href - это то, где вы указываете путь к вашему CSS-файлу. Если у вас документы CSS и HTML находяться в одном месте, вам нужно указать имя файла.

Если вы сохранили его в папку, вы можете показать кротчайший путь папке относительно файла HTML следующим образом. Вы также можете указать путь по отношению к корню вашего домена путем префикса с помощью косой черты. Абсолютные URL-адреса также работают. Атрибут media в теге link указывает, когда должны применяться правила CSS.

 

2. Как внедрить CSS с тегом стиля.

Вы можете вписать CSS-правила непосредственно в HTML-документы, если будете использовать тег стиля.

Подобно link, атрибут type может быть опущен для HTML5, а значение медиаданных управляется при применении ваших стилей (оставьте его по умолчанию для всех устройств).

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

3. Как добавить встроенные стили в элементы HTML с атрибутом стиля CSS.

Правила стиля могут быть добавлены непосредственно к любому элементу HTML. Для этого просто добавьте атрибут стиля к элементу, затем введите свои правила как одну строку текста (строку символов) для значения.

Итог: используйте все способа, которые подойдут в вашей конкретной ситцации, но помните о чистоте и читабельности вашего кода.

Хочешь научиться создавать сайты? Изучи все на практике, с помощью интерактивных курсов у нас на проекте. Регистрация - Войти - Наши курсы. Задавайте вопросы в комментариях!
Автор данной статьи: Роман