Как подключить CSS к HTML: все способы, плюсы и минусы каждого

Повторим основы, которые вы должны учитывать перед подключением CSS к HTML.

Что такое HTML

HTML (Hyper Text Markup Language, язык разметки гипертекста) – это язык, который придает веб-странице необходимую структуру. HTML используется для таких вещей, как:

• Определение структуры страницы – заголовков, подзаголовков, абзацев и так далее.
• Создание форм, например, для заказа посетителями сайтов товаров или услуг.
• Добавление электронных таблиц на веб-страницу.
• Упорядочивание информации с помощью таблиц, списков, изображений, иных элементов.

Что такое CSS

HTML задает структуру веб-страниц, а CSS (Cascading Style Sheets, каскадные таблицы стилей) – внешний вид. Каскадная таблица стилей позволяет:

• Изменять цвета.
• Изменять шрифты.
• Изменять дизайн макета.
• Адаптировать веб-страницы к различным размерам экрана.



Так работают каскадные таблицы стилей в паре с HTML

Почему разделяют HTML и CSS

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

Зачем подключать CSS к HTML

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



CSS-правило состоит из свойства (селектора) и значения

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

Как прописать стиль элементу

Прописать любой стиль элементу в HTML вы можете тремя способами:

1. С помощью внешнего файла стилей. Нужно указать ссылку на этот файл в теге link HTML-документа.
2. С помощью описания стилей в атрибуте style HTML-элемента. Такие стили называются встроенными или inline-стилями.
3. Через элемент style в секции head HTML-документа. Этот способ называется внутренним.

Давайте посмотрим, как прописать стиль элементу разными способами – наглядно и с примерами.



Полный синтаксис CSS-правила

Обратите внимание: внешний способ подключения стилей – самый популярный. Ниже мы рассмотрим подключение внешнего файла стилей и подключение CSS внутренним или встроенным методом.

Как подключить внешний файл

Файл с описанием CSS-стилей можно подключить к HTML файлу через тег link, например, вот так:

Обратите внимание: файл «стилей» в примере выше имеет расширение .CSS. Название файла вполне логичное – external.

Таким образом, внедрив в код страницы пример выше, вы подключите внешние стили, которые находятся по указанному адресу (в нашем случае – это файл external.css в корне сайта).

Несколько моментов, которые необходимо иметь в виду:

• Подключение внешних стилей лучше прописывать внутри секции head HTML-документа.
• Адрес файла внешних стилей указывается в качестве значения атрибута href.
• Атрибут rel=»stylesheet» сообщает браузеру, что необходимо инициализировать именно CSS-стили, а не что-то иное.

А теперь попробуйте найти ошибку и ответить, почему внешние стили не подключаются в этом примере:



Ответ: нужно подключать CSS следующим образом:

Поскольку style.css находится в папке с именем CSS, а HTML находится в другой папке, вам нужно использовать относительный путь ../, чтобы вернуться на один каталог файлов назад и перейти к css/style.css. Теперь файл стилей будет загружен корректно.

Как подключить внутренние стили

Внутренние стили – это описание внешнего вида HTML-документа внутри него самого, с помощью тега style в секции head.

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

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

Как видим, в тег style добавляются пары, определяющие свойства / значения внутренней таблицы стилей.

Встроенные (inline) стили описываются аналогичным образом непосредственно в атрибуте style HTML-элемента.

Как импортировать чужой CSS

Да, импортировать чужой файл стилей возможно. Для этого используйте правило @import url(«base.css»).

Но сперва о том, как добавить правило импорта в сам HTML-документ:

Этот код должен быть добавлен в header. Так мы импортировали чужой файл в свой документ.

Альтернативный способ (если у вас несколько файлов «стилей»):

Про импорт в CSS-файл. Часто файлов задающих дизайн сайта может быть несколько. В этом случае можно прописать каждый из них:

@import url('/styles/layout.css'); @import url('/styles/type.css'); @import url('/styles/images.css');

Единственная оговорка заключается в том, что старые веб-браузеры не будут поддерживать правило @import url. На этой особенности основывается один из хаков в CSS для скрытия неподдерживаемых стилей от старых браузеров.

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

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

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



Пример импортирования CSS

Достоинства и недостатки разных способов подключения

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

1. Встроенный способ

• Отлично подходит для быстрого исправления / прототипирования и простых тестов без необходимости изменять и CSS-файл, и HTML-документ.
• Многие почтовые клиенты НЕ разрешают использовать внешние ссылки на .css из-за возможного спама / злоупотребления. Встраиваемые стили в этом случае могут выручить.

2. Внутренний способ

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

3. Внешний способ

• Легко поддерживать и повторно использовать на сайтах с несколькими страницами.
• Возможность кэширования – требуется меньшая пропускная способность – более быстрый рендеринг страницы после второй загрузки страницы.
• Внешние файлы можно размещать в CDN и тем самым снижать количество запросов к серверу, на котором размещены HTML-страницы (если они находятся на разных хостах).
• Компилируемость: вы можете автоматически удалить все незначащие символы из CSS-файлов в финальной сборке (такая минимизация проводится и для JavaScript-кода, например библиотека jQuery имеет версию для разработчиков и сжатую версию для подключения). Быстрее загрузка – быстрее работа пользователя + меньше использования полосы пропускания – быстрее соединение.
• Обычно удаляется из HTML-писем – грязная HTML-верстка.
• Делает дополнительный HTTP-запрос на файл – больше ресурсов используется.

Резюме

Inline-способ: быстро, но очень «грязно» (HTML смешивается с CSS). При этом – это единственный действительно нормальный вариант для электронной почты в формате HTML, поскольку другие формы часто отбрасываются различными почтовыми клиентами.

Внутренний способ: не требует дополнительного HTTP-запроса, но других преимуществ не имеет.

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

Источник

HTML Стили

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

Вы можете встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style. Этот атрибут доступен для всех элементов HTML. С помощью CSS можно указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявленное свойство отделяется точкой с запятой (;).

Вот как это выглядит для элемента

:
Пример: применение стилей к элементу

Способы добавления CSS стилей

Стандарт CSS предлагает три варианта применения таблицы стилей к веб-странице:

• Внешняя таблица стилей &#8212 определение правил таблицы стилей в отдельном файле .css, с последующим подключением этого файла в HTML-документ с помощью тега .
• Внутренняя таблица стилей &#8212 определение правил таблицы стилей с использованием тега , который обычно располагается в разделе HTML-документа .
• Встроенный стиль &#8212 это способ вставки языка таблицы стилей прямо в начальный тег HTML-элемента.

Давайте познакомимся со всеми тремя способами на конкретных примерах.

Внешняя таблица стилей

Давайте поместим эти три строки CSS в новый файл в любом текстовом редакторе (например Notepad++), а затем сохраним файл как style.css в папке styles. Чтобы применять CSS к нашему HTML-документу, вставьте следующую строку в шапку, то есть между тегами и :

Пример: Внешняя таблица стилей

Текст первый
Текст второй
Текст третий

      
Текст первый
 
Текст второй
 
Текст третий
   

Внутренняя таблица стилей

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

Тег позволяет записывать внутри себя код в формате CSS:

Пример: Внутренняя таблица стилей

Заголовок
Текст первый
Текст второй
Текст третий

     body < background-color:palegreen; >h1 < color: blue; font-family:verdana; >p 
Заголовок
 
Текст первый
 
Текст второй
 
Текст третий
   

В данном примере мы с помощью CSS установили цвет фона для элемента : background-color:palegreen, цвет и тип шрифта для заголовков : color: blue; font-family:verdana, а также размер шрифта, цвет и выравнивание текста по центру для параграфов

: font-size:20px; color:red; text-align:center.

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

Когда необходимо отформатировать отдельный элемент HTML-страницы, описание стиля можно расположить непосредственно внутри открывающего тега при помощи уже специализированного атрибута style. Например:

Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе .

В следующем примере к HTML-документу подключены все три рассмотренные стиля форматирования:

Пример: Приоритетность стилей

Заголовок
Текст первый
Текст второй
Текст третий

      body < background-color:palegreen; >h1 < color: blue; font-family:verdana; >p 
Заголовок
 
Текст первый
 
Текст второй
 
Текст третий
   

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

Задачи

Выравнивание текста по центру

Задача HTML:

      
Это параграф.
  

Цвет фона страницы

Задача HTML:

     body h1 p 
Заголовок
 
Параграф
  

Тип шрифта для страницы

Задача HTML:

     body h1 p 
Заголовок
 
Параграф
  

Внешняя таблица стилей

В папке styles находится файл со стилями style.css. Подключите стилевой файл (внешняя таблица стилей) к HTML-документу.

Задача HTML:

      
Параграф первый
 
Параграф второй
 
Параграф третий
  

Источник

Читайте также:  Wordpress include php scripts