Главная » Языки программирования

Подключение стилей CSS к странице HTML разными способами

На чтение 9 мин
Содержание
  1. Подключение стилей CSS к HTML документу. Как подключить CSS файл
  2. Подключение CSS через внешний файл стилей тегом link
  3. Добавление CSS с помощью тега style
  4. CSS стили для конкретного тега атрибутом style
  5. Стили CSS через JavaScript
  6. Пример подключения CSS к HTML странице описанными выше способами
  7. Подключение стилей
  8. Почему это важно
  9. Внешний файл со стилями
  10. Преимущества
  11. Встроенные стили
  12. Преимущества
  13. Недостатки
  14. Импорт CSS
  15. Преимущества
  16. Недостатки
  17. Инлайн-стили
  18. Преимущества
  19. Недостатки
  20. На практике
  21. Никита Канищев советует

Подключение стилей CSS к HTML документу. Как подключить CSS файл

Каскадные таблицы стилей CSS (Cascading Style Sheets) нужны для оформления страниц вашего сайта в соответствии с разработанным стилем, дизайном.

Таблицы стилей CSS являются неотъемлемой частью страниц современного сайта. Рассмотрим как подключить CSS к HTML странице сайта.

Существует 4 основных способа подключения или добавления CSS стилей к HTML документу, каждый их которых подходит для определенного круга задач.

Подключение CSS через внешний файл стилей тегом link

Наиболее правильный вариант определения общих стилей для сайта — это подключение внешнего файла CSS с помощью тега .

Чтобы подключить CSS файл, в head области страницы используйте следующую конструкцию:

В атрибуте href необходимо указать URL адрес файла, содержащего набор стилей CSS. Атрибуты rel=»stylesheet» и type=»text/css» указывают, что указанный файл является таблицей стиля в формате CSS.

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

Добавление CSS с помощью тега style

Этот метод подойдет когда нужно вставить (определить) стили для группы уникальных элементов страницы, то есть, набор стилей, которые используются только в пределах одной страницы и не нужны для корректной работы остальных страниц сайта.

CSS стили для конкретного тега атрибутом style

Если вам нужно задать стиль для конкретного элемента контента страницы (одного конкретного тега), воспользуйтесь атрибутом style .

Стили, заданные через атрибут style называют inline-стилями. Такие стили имеют приоритет перед стилями, заданными через внешний файл или с помощью тега , но есть исключения.

Inline-стили также обычно используются, когда вы редактируете контент через программы — визуальные редакторы WYSIWYG .

Стили CSS через JavaScript

Практически на каждом современном сайте используются скрипты, написанные на языке JavaScript.

В JavaScript, при использовании библиотеки jQuery, есть много различных функций для управления стилями HTML элементов. Например, функция .css() — задает CSS стиль для элемента, .hide() — добавление элементу CSS свойства display: none; (скрытие элемента) и др.

При использовании этих функций CSS свойства добавляются в style атрибут тега.

Пример подключения CSS к HTML странице описанными выше способами

Ниже приведен код простой HTML страницы с подключением CSS стилей различными способами.

Читайте также:  Pytesseract python русский язык

Обратите внимание на комментарии к коду. В них разъяснено, почему для конкретного случая выбран именно такой метод подключения CSS.


 
 
 
 
 
 
 
  
 
Таблица моделей некоторых смартфонов Samsung.

 
 
 
 
.model_table margin: 10px; 
width: 100%; 
> 
.model_table tr:nth-child(even) background-color: #efefef; 
> 
.model_table tr:hover background-color: #cfcfcf; 
> 
 
 
 

 
 
 
Модели февраля 
 
Samsung Galaxy A10 
2019, февраль 
 
Samsung Galaxy A30 
2019, февраль 
 
Samsung Galaxy A50 
2019, февраль 
  
 
Модели марта 
 
Samsung Galaxy A20 
2019, март 
 
Samsung Galaxy A40 
2019, март 
 
 
 
*В таблице указаны предварительные данные.

 
 
 
document.getElementById('model_table_hide_btn').addEventListener("click", function () document.getElementById('model_table_winter').style.display = 'none'; 
>);

Результат приведенного выше кода:

Таблица моделей некоторых смартфонов Samsung.

Скрыть модели февраля

Модели февраля
Samsung Galaxy A10 2019, февраль
Samsung Galaxy A30 2019, февраль
Samsung Galaxy A50 2019, февраль
Модели марта
Samsung Galaxy A20 2019, март
Samsung Galaxy A40 2019, март

*В таблице указаны предварительные данные.

Источник

Подключение стилей

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

Почему это важно

Скопировать ссылку «Почему это важно» Скопировано

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

Внешний файл со стилями

Скопировать ссылку «Внешний файл со стилями» Скопировано

При этом подходе CSS пишется в отдельном файле с расширением .css. Такие стили ещё называют связанными.

Для связывания страницы с файлом стилей используется тег внутри :

  head> link rel="stylesheet" href="main.css"> head>

Атрибут rel = "stylesheet" указывает, что этот файл является таблицей стилей. В href указывается относительный или абсолютный путь к CSS-файлу.

А вот какие стили содержатся в файле main.css:

 h1  color: green; font-size: 24px;> p  font-size: 24px;> h1  color: green; font-size: 24px; > p  font-size: 24px; >

Ещё таким образом можно подключать файл стилей, который находится на другом сайте. Например, когда подключаете шрифты с Google Fonts.

Преимущества

Скопировать ссылку "Преимущества" Скопировано

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

Внешний CSS также позволяет использовать кастомные свойства.

Встроенные стили

Скопировать ссылку "Встроенные стили" Скопировано

Вариант, когда CSS-свойства описываются в самом HTML-документе внутри тега в шапке страницы:

    h1  color: tomato; > p  font-size: 24px; >   head> style> h1  color: tomato; > p  font-size: 24px; > style> head>

Преимущества

Скопировать ссылку "Преимущества" Скопировано

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

Недостатки

Скопировать ссылку "Недостатки" Скопировано

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

Импорт CSS

Скопировать ссылку "Импорт CSS" Скопировано

Этот вариант тоже требует подключения внешнего файла стилей. Отличие в том, что этот файл содержит не весь CSS-код разом, а стили разбиты на отдельные файлы и подключаются с помощью директивы @import .

Посмотрим, как это делается. Даём ссылку на CSS-файл через тег :

  link rel="stylesheet" href="main.css">

Затем в main.css импортируем несколько других CSS-файлов, header.css для шапки сайта, navbar.css для меню, и так далее:

 @import url("header.css");@import url("navbar.css");@import url("footer.css");@import url("grid.css"); @import url("header.css"); @import url("navbar.css"); @import url("footer.css"); @import url("grid.css");

Преимущества

Скопировать ссылку "Преимущества" Скопировано

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

Недостатки

Скопировать ссылку "Недостатки" Скопировано

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

Если вам очень нужно подключить несколько файлов, лучше добавить несколько элементов .

Иногда так всё же делают при разработке сайтов, чтобы не тратить время на сборку многих файлов и просто подключать их одним файлом с кучей импортов. Но перед публикацией сайта все эти импорты «склеиваются» в один файл для более эффективной загрузки.

Инлайн-стили

Скопировать ссылку "Инлайн-стили" Скопировано

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

 
Заголовок
Текст
 h1 style="сolor: yellow; margin: 10px 20px">Заголовокh1> p style="text-align: right; font-size: 12px">Текстp>

Преимущества

Скопировать ссылку "Преимущества" Скопировано

  • Как и со встроенными стилями, браузеру не нужно запрашивать файл, что ускоряет рендеринг.
  • Не нужно писать селекторы, потому что стили применяются сразу к нужному элементу.
  • Удобно отлаживать код или делать быстрые правки прямо в админке, без разворачивания проекта.

Недостатки

Скопировать ссылку "Недостатки" Скопировано

Однако несмотря на преимущества, инлайн-стили — это антипаттерн. Недостатков у этого подхода слишком много.

Приоритет. У инлайн-стилей наивысший приоритет, их нельзя переопределить с помощью селекторов по идентификатору, классу или тегу во внешнем CSS. Единственный способ это сделать — добавить !important к значению свойства. Но этот приём тоже считается плохой практикой.

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

Всё в одну кучу. Оформление при помощи инлайн-стилей нарушает принцип «разделения содержимого и оформления».

Псевдоклассы и псевдоэлементы. В инлайн-стилях нельзя использовать псевдоклассы и псевдоэлементы.

Восприятие кода. Если писать стили внутри атрибута style , то HTML становится трудно читать. Логическая структура перестаёт быть видна, стили размазываются по всему коду. И чем крупнее проект, тем сложнее управлять оформлением.

Согласитесь, что такой код читать намного труднее:

 
Заголовок
  
У моей кошки светло-синие глаза.
  h1 style="сolor: yellow; margin: 10px 20px 15px 10px;">Заголовокh1> div style="border: 1px solid red; max-widht: 500px; margin: auto"> p>У моей кошки span style="color: lightblue;">светло-синиеspan> глаза.p> div>      
 
Заголовок
  
У моей кошки светло-синие глаза.
  h1 class="title">Заголовокh1> div class="wrapper"> p>У моей кошки span class="eyes">светло-синиеspan> глаза.p> div>

На практике

Скопировать ссылку "На практике" Скопировано

Никита Канищев советует

Скопировать ссылку "Никита Канищев советует" Скопировано

🛠 Одна из самых распространённых областей применения инлайн-стилей — почтовые рассылки.

По соображениям безопасности почтовые службы (например, Яндекс.Почта или Gmail) блокируют загрузку внешних ресурсов, в том числе и файлы стилей. Поэтому разработчикам ничего не остаётся, кроме как использовать инлайн-стили.

Вот так может выглядеть HTML-разметка при вёрстке письма:

  border="0" cellpadding="0" cellspacing="0" width="100%" style block-code__original-line"> font-size:28px;font-weight:500; text-align:center;padding:0;margin:0">    style="padding-top:20px;padding-bottom:20px;" align="right" valign="middle" >  style block-code__original-line"> font-size:12px;font-weight:400; line-height:20px;padding:0;margin:0" > Привет, это рассылка!      table border="0" cellpadding="0" cellspacing="0" width="100%" style="color:#000;font-family:Poppins,sans-serif; font-size:28px;font-weight:500; text-align:center;padding:0;margin:0" > tbody> tr> td style="padding-top:20px;padding-bottom:20px;" align="right" valign="middle" > p style="color:#bbb;font-family:'Open Sans',sans-serif; font-size:12px;font-weight:400; line-height:20px;padding:0;margin:0" > Привет, это рассылка! p> td> tr> tbody> table>

Источник

Оцените статью
© 2023 Программирование