Как правильно указать ссылку на файл css
Обновлено: 04.07.2024
Мы с вами уже разобрали основные теги языка HTML и теперь пришло время навести красоту. Хотелось бы иметь возможность менять цвет текста, его размер, фон и многое другое. Это делается с помощью языка CSS.
Блок . Как работать с CSS
Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу <p> соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет. После селектора следует ставить фигурные скобки <>, внутри которых следует писать CSS свойства.
CSS свойства и задают цвет, размер шрифта и другие интересные вещи. Их следует писать в таком формате: имя свойства, потом двоеточие, потом значение этого свойства (например, свойство - это цвет, а "красный" - это значение). Потом нужно поставить точку с запятой и можно писать следующее свойство.
Давайте покрасим все абзацы в красный цвет:
Так код будет выглядеть в браузере:
Абзац с текстом.
А теперь давайте покрасим абзацы в зеленый цвети сделаем их большого размера:
Так код будет выглядеть в браузере:
Абзац с текстом.
Обратите внимание на оформление CSS кода: каждое новое свойство пишется с новой строки.
Блок . Способы подключения CSS к HTML коду
Давайте теперь разберемся с тем, как сделать так, чтобы написанный CSS применился к нашему HTML коду. Это можно сделать тремя способами.
Первый способ заключается в том, что CSSбудет написан в отдельном файле и специальным образом подключен к нашей HTML странице.
Еще два способа заключаются в том, что CSS код будет написан прямо на HTML странице.
Первый способ используется гораздо чаще (в подавляющем большинстве случаев). Одновременно можно применять все три способа.
Давайте разберемся с этими способами более подробно.
Способ 1. Отдельный CSS файл
Самый распространенный способ подключения CSS - это когда он хранится в отдельном файле и этот файл подключается ко всем страницам нашего сайта.
Преимущество такого подхода в том, что CSS файл один, а HTML файлов может быть любое количество, хоть тысяча. Мы сделаем изменение в одном месте CSS файла, например, покрасим все абзацы в красный цвет, и эти изменения применятся на всей 1000 HTML страниц, к которым подключен наш CSS файл. Очень удобно и быстро.
Чтобы подключить CSS файл к HTML странице, в теге head следует написать такую конструкцию: <link rel="stylesheet" href="путь к CSS файлу">.
Сам CSS файл должен быть с расширением .css. Обычно его называют styles.css или style.css.
В следующем примере к нашему HTML файлу подключается CSS файл style.css:
Можно подключать не один файл, а несколько. Давайте подключим файлы style1.css, style2.css и style3.css:
Способ 2. CSS внутри тега style
Второй способ заключается в том, что CSS код можно написать в теге <style> Его можно размещать как внутри <head> (чаще всего), так и внутри <body>.
Недостаток этого способа в том, что CSS код применяется только к одной странице сайта, а не ко многим. Этот способ обычно применяется тогда, когда нужно написать CSS на конкретной странице сайта, не затрагивая остальных, и, в общем случае, к употреблению не рекомендуется.
Правило такое: если что-то можно сделать первым способом, то использовать второй способ - дурной тон.
Способ 3. CSS внутри атрибута style
Третий способ заключается в том, что можно добавить атрибут style любому тегу на странице и прямо там написать для него HTML код. Обратите внимание на то, что при этом никаких селекторов писать не нужно, так как CSS код применится только к тому тегу, для которого он написан:
Третий способ, так же, как и второй, не сильно рекомендуется к использованию, потому что он захламляет HTML код. В настоящее время общепринято то, что языки нужно разделять по отдельным файлам - в одном файле мы пишем на языке HTML, а в другом - на CSS.
Впрочем, иногда без второго и третьего способа не обойтись.
Блок . Комментарии CSS
Так же, как и в HTML, в CSS можно ставить комментарии. Они оформляются следующим образом: слеш и звездочка /*, потом текст комментария , потом звездочка и слеш */. Смотрите пример:
Видео про CSS
Посмотрите следующее видео из заочного курса: скачайте его по данной ссылке. Там я рассказываю про подключение CSS, а также демонстрирую работу с некоторыми свойствами (эти знания пригодятся вам в следующем уроке).
Элемент HTML - Ссылка на Внешний Ресурс ( <link> ) определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на stylesheets, а также для создания иконок сайта (как для иконок в стиле "favicon", так и для иконок домашних экранов и приложений мобильных устройств) среди прочего.
Чтобы подключить таблицу стилей, вы должны включить элемент <link> внутри вашего <head> следующим образом:
В этом простом примере указывается путь к таблице стилей внутри атрибута href и атрибут rel со значением stylesheet . rel означает "отношения (relationship)", и, вероятно, является одной из ключевых особенностей элемента <link> — значение сообщает как указанный элемент связан с содержащим его документом. Как вы увидите в нашем справочнике типы ссылок, есть много различных видов отношений.
Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок:
Есть ряд других значений rel для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например:
Атрибут sizes определяет размер иконки, когда type содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку.
Вы можете, также, указать медиа тип или запрос внутри атрибута media ; этот ресурс будет загружен только в том случае, если media состояние равно true. Например:
В элемент <link> также были добавлены некоторые новые интересные возможности производительности и безопасности, к примеру:
Значение rel - preload указывает, что браузер должен предварительно загрузить этот ресурс (смотрите Предварительная загрузка контента при помощи rel="preload" для более подробной информации), атрибут as указывает на определённый класс загружаемого контента. Атрибут crossorigin указывает должен ли ресурс загружаться с помощью запроса CORS.
Другие замечания по использованию:
- Элемент <link> может присутствовать в элементах <head> или <body> , в зависимости от того, имеет ли он тип ссылки, являющейся body-ok. Например, ссылка типа stylesheet является body-ok,и, поэтому, <link rel="stylesheet"> допускается в body. Однако, это не очень хорошая практика использования; более осмысленно отделять ваши <link> от содержимого body, помещая их в <head> .
- При использовании <link> для установки favicon сайта, и когда ваш сайт использует Политику Безопасности Контента (CSP) для повышения безопасности, политика применяется к favicon. Если вы столкнулись с проблемой при загрузке favicon, проверьте, что img-src директива заголовка Content-Security-Policy (en-US) не препятствует доступу к ней.
- Спецификации HTML и XHTML определяют обработчики событий для элемента <link> , но не указывают как они будут использоваться.
- В XHTML 1.0, пустые элементы, такие как <link> , требуют слеш: <link /> .
- WebTV поддерживает использование значения next для rel в качестве предварительной загрузки следующей страницы в серии документов.
Атрибуты
Этот элемент включает в себя глобальные атрибуты.
auto : указывает на отсутствие предпочтений. Браузер может использовать собственную эвристику для определения приоритетов ресурсов.
high : указывает браузеру, что ресурс находится в высоком приоритете.
low : указывает браузеру, что ресурс находится в низком приоритете.
Примечание: Атрибут importance можно использовать только для элементов <link> с атрибутами rel="preload" или rel="prefetch" .
integrity Содержит встроенные метаданные — криптографический хеш-код ресурса(файла) в кодировке base64, который вы сообщаете браузеру для загрузки. Браузер может использовать его для проверки, что загруженный ресурс был получен без неожиданных манипуляций. Смотрите Subresource Integrity. media Этот атрибут указывает медиа, который применяет связываемый ресурс. Его значение должно быть типом медиа или медиавыражением. Этот атрибут, в основном, полезен при связывании с внешними таблицами стилей — он позволяет пользовательскому агенту выбрать наиболее подходящее устройство для запуска.Примечания:
- В HTML 4, это может быть только простой, разделённый пробелами, список литералов, описывающих медиа, т.е. media типы и группы, которые определены и допустимы в качестве значений для этого атрибута, такие как print , screen , aural , braille . HTML5 распространил это на любые медиавыражения, которые являются расширенным набором допустимых значений HTML 4.
- Браузеры, не поддерживающие медиавыражения, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определённым в HTML 4.
Примечание: Большинство форматов иконок могут хранить только одну иконку, поэтому чаще всего sizes содержит только одну запись. MS's ICO формат, как и Apple's ICNS. ICO более распространены; вы должны использовать их.
title Атрибут title имеет особое значение для элемента <link> . При использовании <link rel="stylesheet"> он определяет предпочтительную или альтернативную таблицу стилей. Неверное использование может стать причиной игнорирования таблицы стилей. type Этот атрибут используется для определения типа связываемого контента. Значение атрибута должно быть типом MIME, такое как text/html, text/css и т.д. Обычно он используется для определения типа таблицы стилей, на которую делается ссылка (например, text/css), но, учитывая, что CSS является единственным языком таблиц стилей, используемым в сети, этот атрибут может быть пропущен, что является рекомендацией. Он также используется для типов ссылок rel="preload" , чтобы браузер загружал только те типы файлов, которые он поддерживает.Нестандартные атрибуты
disabled Этот атрибут используется для отключения отношения ссылки. В сочетании со скриптом, этот атрибут может использоваться для включения и выключения различных отношений таблицы стилей.Примечание: Хотя в стандарте HTML нет атрибута disabled , атрибут disabled есть в объекте DOM HTMLLinkElement .
Устаревшие атрибуты
charset Этот API вышел из употребления и его работа больше не гарантируется.Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделённый пробелами и/или запятыми, как определено в RFC 2045. Значение по умолчанию iso-8859-1 .
rev Этот API вышел из употребления и его работа больше не гарантируется.Значение этого атрибута показывает отношение текущего документа к связываемому документу, как определено атрибутом href . Этот атрибут, таким образом, определяет обратную связь по сравнению со значением атрибута rel . Значения типов ссылки для атрибута аналогичны возможным значениям для rel .
Примечание: Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что rev не считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределённость, полагаться на rev не стоит.
Взамен, вы должны использовать атрибут rel с противоположным значением типов ссылки. Например, чтобы установить обратную ссылку для made , укажите author .Также, этот атрибут не означает "ревизия" и не должен использоваться с номером версии, даже если многие сайты используют его в этих целях.
Стилизация с CSS
Элемент <link> не имеет визуального представления в веб-документе, поэтому он не должен стилизоваться.
Примеры
Включение таблицы стилей
Включение таблицы стилей на страницы имеет следующий синтаксис:
Предоставление альтернативных таблиц стилей
Пользователь может выбрать, какую таблицу стилей использовать, выбрав её в меню Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.
Предоставление иконок для различных контекстов использования
Вы можете включить ссылки на несколько различных иконок на одной странице, и браузер выберет, какая из них лучше подходит для его конкретного контекста, используя значения rel и sizes как подсказки.
Условная загрузка ресурсов с медиавыражениями
Вы можете предоставить тип медиа или запрос внутри атрибута media ; этот ресурс будет загружен только в том случае, если условия медиа равно true. Например:
События загрузки таблицы стилей
Вы можете определить, когда таблица стилей была загружена, наблюдая за событием load , запускающимся в нем; аналогично, вы можете обнаружить, произошла ли ошибка при обработки таблицы стилей, наблюдая за событием error :
Примечание: Событие load запускается после загрузки и анализа таблицы стилей и всего импортируемого содержимого, непосредственно перед тем, как стили будут применены к содержимому.
В примере 8.2 показано создание абсолютной ссылки на другой сайт.
Пример 8.2. Использование абсолютных ссылок
Абсолютные ссылки обычно применяются для указания документа на другом сетевом ресурсе, впрочем, допустимо делать абсолютные ссылки и внутри текущего сайта. Однако подобное практикуется нечасто, поскольку такие ссылки достаточно длинные и громоздкие. Поэтому внутри сайта преимущественно используются относительные ссылки.
Ссылки относительно текущего документа
При создании относительных ссылок надо понимать, какое значение для атрибута href следует указывать, поскольку оно зависит от исходного расположения файлов. Рассмотрим несколько типичных вариантов.
1. Файлы располагаются в одной папке (рис. 8.4).
Необходимо сделать ссылку из исходного документа на ссылаемый. В таком случае код будет следующий.
Подобное имя файла взято только для образца, на сайте в именах файлов не следует использовать русские символы с пробелами, да еще и в разном регистре.
2. Файлы размещаются в разных папках (рис. 8.5).
Когда исходный документ хранится в одной папке, а ссылаемый в корне сайта, то перед именем файла в адресе ссылки следует поставить две точки и слэш (/), как показано ниже.
Две точки в данном случае означают выйти из текущей папки на уровень выше.
3. Файлы размещаются в разных папках (рис. 8.6).
Теперь исходный файл находится в двух вложенных папках, и чтобы сослаться на документ в корне сайта, требуется повторить написание предыдущего примера два раза.
Аналогично обстоит дело с любым числом вложенных папок.
4. Файлы размещаются в разных папках (рис. 8.7).
Теперь ситуация меняется, исходный файл располагается в корне сайта, а файл, на который необходимо сделать ссылку - в папке. В этом случае путь к файлу будет следующий.
Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.
Ссылки относительно корня сайта
Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как "/Папка/Имя файла" со слэшем вначале. Так, запись <a href="/course/">Курсы</a> означает, что ссылка ведет в папку с именем course, которая располагается в корне сайта, а в ней необходимо загрузить индексный файл.
Учтите, что такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.
Это короткая шпаргалка о том, как правильно ставить ссылки и не теряться в адресах.
Абсолютные ссылки
Абсолютная ссылка — это адрес ресурса целиком. Обычно такие ссылки ставят на сторонние ресурсы и надеются, что адрес не изменится.
Не забывайте — если вы используете абсолютные ссылки на сайте, то при смене структуры папок или перемещении файлов большинство ссылок могут сломаться.
Относительные ссылки
То, куда ведут относительные ссылки, зависит от расположения текущей страницы. Посмотрим на примере:
Предположим, мы загрузили страницу по такому адресу:
Во всех примерах ниже приведены относительная ссылка и полный путь, в который браузер расшифровывает ссылку.
Ссылка на файл в той же папке
Файл расположен в той же папке, где и текущая страница. Пишется без дополнительных знаков.
Ссылка на файл в папке ниже текущей
Файл в дочерней папке относительно текущей. Перед именем файла через / пишем название папки.
Ссылка относительно корня сайта
Файл расположен в корневой папке сайта. Для ссылки относительно корня используется / . Такая ссылка сработает только на веб-сервере — с локальными файлами на компьютере это не сработает.
Файл на два уровня ниже корня сайта.
Ссылка на папку выше текущей
На одну папку «вверх» относительно текущей. Для «подъёма» используется синтаксис ../ .
На две папки вверх. Синтаксис ../ может повторяться сколько угодно раз, главное, чтобы все папки «по пути» существовали.
Комбинированная ссылка
На три папки вверх и на две папки вниз относительно текущей — поднялись до корня и последовательно спустились в папки dir1 и dir2 .
Все приведённые примеры одной картинкой:
ID-ссылки (якорные ссылки)
Ставим якорную ссылку на той же странице:
Ставим якорную ссылку на другую страницу:
Пройдите интерактивный тренажёр по якорным ссылкам, чтобы узнать наверняка, как это делается.
Что будет, если ошибиться
Файл, на который вы ссылаетесь, не загрузится — появится ошибка 404. Если так случилось, можно посмотреть через Chrome DevTools, что с адресом.
Ещё можно по незнанию поставить ссылку на файл на своём компьютере, а потом удивляться, почему не грузятся картинки. Такое в 1998 произошло на сайте Microsoft Game Studios. Разработчики оставили ссылку на файл на диске H:/ .
Сейчас, конечно, такого никто в больших компаниях не допустит — но если вы сначала делаете страничку на своём компьютере, могут быть нюансы. Поэтому пользуйтесь нашей шпаргалкой, чтобы избежать ошибок.
Не делайте плохо, делайте хорошо
Разберитесь в нюансах вёрстки с HTML Academy — знакомство с HTML и CSS бесплатное.
Читайте также: