Чат PHP-разработчиков
Как подключить таблицу стилей CSS к HTML

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

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

Инлайновые стили

Что касается первого варианта, то такие стили называются не подключенными, а встроенными. Еще можно встретить название «инлайновые». Задаются такие стили внутри тега <style> с помощью обычного CSS-кода. А сам этот тег, в свою очередь, находится внутри тега <head>.

Наглядный пример встроенного (инлайнового) стиля:

<head>
  <style>
    CSS-код
  </style>
</head>

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

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

Как правило, стили хранятся в файле с расширением .css. И именно он подключается посредством тега <link>. На примере это выглядит вот так:

<head>
  <link href="style.css" rel="stylesheet">
</head>

Ссылка на файл задается с помощью атрибута href. Также обязательным является использование атрибута rel="stylesheet". Он служит своего рода индикатором, благодаря которому браузер определяет, что подключаются именно стили.

Я рекомендую осуществлять подключение стилей внутри тега <head>, но это не принципиально, так как работа тега <link> будет осуществляться в любом месте страницы.

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

Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
Читайте также
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
Комментарии (2)


kekspeks

Есть парочка вопросиков:

  1. Стили - это разметка, цвета и тд. блоков сайта?
  2. Как сделать эти стили, чтоб добавить? рофланЛол
    Так же как документ хтмл, только разрешение будет .css?
  3. href ищется относительно хтмл, т.е. в той же папке? Получается, он немного похож на img?

Не знаю рано или нет, но вот я не успокоюсь, пока не пойму, хд

ivashkevich
  1. Да, это стилизация стандартных элементов HTML
  2. Создаётся .css файл, в котором прописываются все стили
  3. Изучите урок про абсолютные и относительные ссылки
Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
Популярное за сутки
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Сейчас читают
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Новые статьи
Логические задачи с собеседований