Как поместить css в отдельный файл

Обновлено: 21.11.2024

Какова цель или, когда абсолютно необходимо использовать CSS как отдельный файл для поддержки страницы HTML?

Ответ 53c6ee7f80ff33d6a9004616

Когда необходимо использовать внешние файлы CSS? Всегда. Какова цель? Для предотвращения ошибок повторения и клонирования.

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

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

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

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

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

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

Когда браузер читает таблицу стилей, он форматирует HTML-документ в соответствии с информацией, содержащейся в таблице стилей.

Три способа вставки CSS

Существует три способа вставки таблицы стилей:

  • Внешний CSS
  • Внутренний CSS
  • Встроенный CSS

Внешний CSS

С помощью внешней таблицы стилей вы можете изменить внешний вид всего веб-сайта, изменив всего один файл!

Каждая HTML-страница должна содержать ссылку на внешний файл таблицы стилей внутри элемента, внутри раздела заголовка.

Пример

Внешние стили определяются внутри элемента внутри раздела HTML-страницы:

Внешняя таблица стилей может быть написана в любом текстовом редакторе и должна быть сохранена с расширением .css.

Внешний файл .css не должен содержать тегов HTML.

Вот как выглядит файл mystyle.css:

"mystyle.css"

тело <
цвет фона: голубой;
>

цвет h1: темно-синий;
поле слева: 20 пикселей;
>

Примечание. Не добавляйте пробел между значением свойства и единицей измерения:
Неверно (пробел): поле слева: 20 пикселей;
Правильно (без пробела): поле слева: 20 пикселей;

Внутренний CSS

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

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

Пример

Внутренние стили определяются внутри элемента внутри раздела HTML-страницы:

Встроенный CSS

Встроенный стиль можно использовать для применения уникального стиля к одному элементу.

Чтобы использовать встроенные стили, добавьте атрибут стиля к соответствующему элементу. Атрибут стиля может содержать любое свойство CSS.

Пример

Встроенные стили определяются в атрибуте "style" соответствующего элемента:

Совет. Встроенный стиль теряет многие преимущества таблицы стилей (из-за смешивания содержимого с представлением). Используйте этот метод экономно.

Несколько таблиц стилей

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

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

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

Пример

Если внутренний стиль определен после ссылки на внешнюю таблицу стилей, элементы будут "оранжевыми":

Пример

Однако, если внутренний стиль определен до ссылки на внешнюю таблицу стилей, элементы будут "темно-синими":

Каскадный порядок

Какой стиль будет использоваться, если для элемента HTML указано более одного стиля?

Все стили на странице будут "каскадироваться" в новую "виртуальную" таблицу стилей по следующим правилам, где номер один имеет наивысший приоритет:

  1. Встроенный стиль (внутри HTML-элемента)
  2. Внешние и внутренние таблицы стилей (в разделе заголовка)
  3. Браузер по умолчанию

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

Вы когда-нибудь слышали о W3Schools Spaces? Здесь вы можете бесплатно создать свой собственный веб-сайт или сохранить фрагменты кода для дальнейшего использования.

Считается, что таблицы стилей CSS рекомендуется хранить во внешнем файле. Итак, как вы можете связать этот CSS с вашим файлом HTML?

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

Как связать файл CSS с файлом HTML

Вы можете связать свой файл CSS с файлом HTML, добавив элемент ссылки в элемент заголовка вашего файла HTML, например:

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

Атрибут rel

Первым из двух обязательных атрибутов является атрибут rel. Вы будете использовать этот атрибут, чтобы сообщить браузеру, какова связь с импортированным файлом.

Вы должны написать rel="stylesheet", чтобы сообщить браузеру, что вы импортируете таблицу стилей.

Атрибут src

Второй обязательный атрибут — это атрибут src, указывающий файл для импорта.

Часто бывает, что файл CSS и файл HTML находятся в одной папке. В таком случае вы можете написать src="https://www.freecodecamp.org/news/external-css-stylesheets-how-to-link-css-to-html-and-import-into-head/style. css".

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

Например, часто бывает так, что файл CSS находится в папке, родственной файлу HTML, например:

В этом случае вам нужно будет указать путь, например, "css/styles.css".

Атрибут типа

Атрибут type используется для определения типа контента, на который вы ссылаетесь. Для таблицы стилей это будет text/css. Но поскольку css — единственный язык таблиц стилей, используемый в Интернете, его не только необязательно, но даже лучше не включать.

Атрибут мультимедиа

Атрибут media не виден в примере. Это необязательный атрибут, который вы можете использовать, чтобы указать, когда импортировать определенную таблицу стилей. Его значение должно быть типом мультимедиа/медиа-запросом.

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

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

Из этой статьи вы узнали, как добавить внешнюю таблицу стилей на веб-страницу с помощью элемента link и атрибутов rel и src.

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

Наслаждайтесь созданием веб-страниц!

Модератор и штатный автор freeCodeCamp. Руководство усилиями по локализации для итальянского языка.

Если вы дочитали до этого места, отправьте твит автору, чтобы показать, что вам не все равно. Твитнуть спасибо

Научитесь программировать бесплатно. Учебная программа freeCodeCamp с открытым исходным кодом помогла более чем 40 000 человек получить работу в качестве разработчиков. Начать

freeCodeCamp – это поддерживаемая донорами некоммерческая организация, освобожденная от налогов в соответствии со статьей 501(c)(3) (идентификационный номер федерального налогоплательщика США: 82-0779546)

Наша миссия: помочь людям научиться программировать бесплатно. Мы достигаем этого, создавая тысячи видеороликов, статей и интерактивных уроков по кодированию — все они находятся в свободном доступе. У нас также есть тысячи учебных групп freeCodeCamp по всему миру.

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

Файл CSS – это обычный текстовый файл, сохраненный с расширением .css.

Начало работы с CSS

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

Без дальнейших церемоний, давайте приступим к работе с каскадными таблицами стилей (CSS).

Включение CSS в документы HTML

CSS можно прикрепить как отдельный документ или встроить в сам HTML-документ. Существует три метода включения CSS в HTML-документ:

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

В этом руководстве мы рассмотрим все эти три метода вставки CSS один за другим.

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

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

Встроенные стили используются для применения правил уникального стиля к элементу путем размещения правил CSS непосредственно в открывающем теге. Его можно прикрепить к элементу с помощью атрибута стиля.

Пример

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

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

Встроенные таблицы стилей

Встроенные или внутренние таблицы стилей влияют только на документ, в который они встроены.

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

Пример

Совет. Атрибут type тега and (например, type="text/css" ) определяет язык таблицы стилей. Этот атрибут является чисто информативным. Вы можете опустить это, так как CSS является стандартным языком таблицы стилей по умолчанию в HTML5.

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

Внешняя таблица стилей идеальна, когда стиль применяется ко многим страницам веб-сайта.

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

Вы можете прикрепить внешние таблицы стилей двумя способами — связать и импортировать.

Связывание внешних таблиц стилей

Перед связыванием нам нужно сначала создать таблицу стилей. Давайте откроем ваш любимый редактор кода и создадим новый файл. Теперь введите следующий код CSS внутри этого файла и сохраните его как «style.css».

Пример

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

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

CSS определяет объявления стилей и применяет их к документам HTML. Существует три разных способа связать CSS с HTML на основе трех разных типов стилей CSS:

  • Встроенный – использует атрибут стиля внутри HTML-элемента.
  • Внутренний – записывается в разделе HTML-файла.
  • Внешний – связывает документ HTML с внешним файлом CSS.

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

Как связать файл CSS с файлом HTML — видеоурок

Ищете визуальное руководство? Посмотрите это видео.

Подключение внешней таблицы стилей CSS к файлу HTML

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

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

Начните связывать таблицы стилей с файлами HTML, создав внешний документ CSS с помощью текстового редактора HTML и добавив правила CSS. Например, вот правила стиля для example.css:

Не добавляйте пробел между значением свойства. Например, вместо margin-right: 30px напишите margin-right: 30 px .

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

Для лучшего понимания приведем разбивку атрибутов, содержащихся в теге:

  • rel — определяет отношение между связанным документом и текущим. Используйте атрибут rel только при наличии атрибута href.
  • type — определяет содержимое связанного файла или документа между тегами и. Он имеет текст или css в качестве значения по умолчанию.
  • href — указывает расположение файла CSS, который вы хотите связать с HTML. Если файлы HTML и CSS находятся в одной папке, введите только имя файла. В противном случае укажите имя папки, в которой хранится файл CSS.
  • media — описывает тип носителя, для которого оптимизированы стили CSS. В этом примере мы поместили screen в качестве значения атрибута, чтобы подразумевать его использование для экранов компьютеров. Чтобы применить правила CSS к печатным страницам, установите значение print .

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

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

Кроме того, если вы хотите отредактировать определенный элемент HTML, лучше использовать метод встроенного стиля. Между тем внутренний или встроенный стиль может идеально подойти для применения правил CSS к одной странице.

Причины использования CSS

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

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

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

С другой стороны, у CSS есть несколько недостатков, например:

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

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

Заключение

Встраивание правил CSS в элементы HTML может отнимать много времени и энергии. К счастью, внешние таблицы стилей делают этот процесс более эффективным.

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

Мы надеемся, что знание того, как легко связать CSS с HTML, сэкономит вам время при создании веб-сайта, чтобы больше сосредоточиться на увеличении трафика.

Если вам интересно узнать больше о программировании, ознакомьтесь с нашим руководством по обучению программированию.

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

Читайте также: