Добрый денёк! В данной статье я покажу различные методы для подключения CSS в HTML. А так же поясню разные тонкости и нюансы разных способов подключения стилей.

Внутреннее подключение

Внутренняя таблица стилей — это набор стилей, часть кода веб-страницы, которая всегда должна находиться между открывающим и закрывающим тегами  <style>css код</style> HTML-кода, в теле тега веб-страницы . Пример:

<html>
<head>
<meta charset="UTF-8">
<title>Внутреннее подключение стилей</title>
<style>
p {
font-size: 120%;
font-family: Verdana;
color: yellow;
}
</style>
</head>
<body>
<p>Желтый текст со шрифтом Verdana</p>
</body>
</html>

<style> — это тег HTML, а не CSS, но именно он сообщает браузеру, что данные, содержащиеся внутри, являются кодом CSS, а не HTML. Создание внутренней таблицы стилей идентично созданию внешней, с той лишь разницей, что перечень стилей не выносится в отдельный файл, а заключается между тегами  <style>, как показано выше, в самой веб-странице. Внутренние таблицы стилей можно легко добавить в веб-страницу, и так же просто перейти к редактированию HTML-кода этой же веб-страницы.

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

Подключение через внешний файл.

При подключении css, таким способом всё описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <link>, который размещается в контейнере <head>. 

Процесс подключения следующий:

  1. Мы создаем текстовый файл с любым именем и расширением .css (желательно, чтобы имя файла было наглядным, к примеру — style.css)
  2. Располагаем данный файл в той же папке, что и наш файл index.html
  3. Внутри тега <head> пишем тег <link> со следующими атрибутами: rel="stylesheet" (указывает браузеру что мы подключаем именно таблицу стилей) и href="style.css" (указывает браузеру какой файл и откуда ему стоит подключить).

Вот такая структура должна получится:

<html>
<head>
<meta charset="UTF-8">
<title>Внутреннее подключение стилей</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Заголовок</h1>
<p>Текст</p>
</body>
</html>

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

Так же, если у вас есть html с внутренней таблицей стилей, а вы хотите использовать внешнюю таблицу стилей, то всего лишь вырежьте фрагмент описания стилей, расположенный между тегами <style>(без самих тегов).  Потом создайте новый текстовый файл и вставьте в него нужный вам СSS-код.

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

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

Пример:

<html>
<head>
<meta charset="UTF-8">
http://dmkweb.ru/wp-admin/post-new.php <title>Встроенные в тег стили</title></head>
<body>
<p style="font-size: 120%; font-family: Arial; color: #ccc">
Текст со шрифтом Arial и серым цветом
</p>
</body>
</html>

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

Заключение.

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

На этом все, до встречи в будущих статьях!

dmkweb.ru Права на контент защищены.