Как связать файл css с html

Обновлено: 21.11.2024

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

Существует три распространенных способа присоединения таблиц стилей:

Внешние стили

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

В приведенном ниже примере мы ссылаемся на документ CSS с именем styles.css . href, точно так же, как мы сделали со ссылками, использующими тег. -->

Внешние таблицы стилей используют тег внутри элемента head.

rel Атрибут объясняет отношение ссылки к нашему документу. Значением в этом случае всегда будет таблица стилей, поскольку именно на нее мы создаем ссылку. href Атрибут является ссылкой на нашу таблицу стилей. Это работает точно так же, как href, используемый в тегах. media Атрибут описывает, к какому типу носителя должны применяться наши таблицы стилей. Существует ряд возможных значений, включая screen и print. Чаще всего вы будете использовать screen .

Встроенные/внутренние стили

Вы также можете добавить стили CSS вверху HTML-страницы внутри элемента head.

Это отличный способ быстро протестировать новый стиль на своей странице. Зарезервируйте внутренние стили для тестирования и экспериментов с новыми правилами CSS.

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

Последний способ – добавить стили CSS в код HTML.

Для этого вам просто нужно использовать атрибут стиля и добавить объявление CSS в качестве значения атрибута.

Хотя это очень просто, это также не очень расширяемо.

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

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

Когда браузер читает таблицу стилей, он форматирует 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?

Каскадные таблицы стилей (CSS) используются для форматирования макета веб-страницы.

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

Подсказка. Слово "каскад" означает, что стиль, примененный к родительскому элементу, также будет применяться ко всем дочерним элементам родительского элемента. Таким образом, если вы установите цвет основного текста на «синий», все заголовки, абзацы и другие текстовые элементы в теле также получат тот же цвет (если вы не укажете что-то другое)!

Использование CSS

CSS можно добавить в документы HTML тремя способами:

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

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

Встроенный CSS

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

Встроенный CSS использует атрибут стиля HTML-элемента.

В следующем примере цвет текста элемента задается синим, а цвет текста

элемента — красным:

Пример

Внутренний CSS

Внутренний CSS используется для определения стиля отдельной HTML-страницы.

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

В следующем примере цвет текста ВСЕХ элементов (на этой странице) устанавливается синим, а цвет текста ВСЕХ

элементов — красным. Кроме того, страница будет отображаться с фоновым цветом "голубого цвета":

Пример

Внешний CSS

Внешняя таблица стилей используется для определения стиля многих HTML-страниц.

Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на нее в разделе каждой HTML-страницы:

Пример

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

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

"styles.css":

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

Цвета, шрифты и размеры CSS

Здесь мы продемонстрируем некоторые часто используемые свойства CSS. Вы узнаете о них больше позже.

Свойство CSS color определяет используемый цвет текста.

Свойство CSS font-family определяет используемый шрифт.

Свойство CSS font-size определяет используемый размер текста.

Пример

Использование свойств CSS color, font-family и font-size:

Граница CSS

Свойство CSS border определяет границу вокруг элемента HTML.

Совет. Вы можете определить границу практически для всех элементов HTML.

Пример

Использование свойства границы CSS:

Заполнение CSS

Свойство CSS padding определяет отступ (пробел) между текстом и границей.

Пример

Использование свойств границ и отступов CSS:

Маржа CSS

Свойство CSS margin определяет поле (пробел) за пределами границы.

Пример

Использование свойств CSS border и margin:

Ссылка на внешний CSS

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

Пример

В этом примере используется полный URL-адрес для ссылки на таблицу стилей:

Пример

Этот пример ссылается на таблицу стилей, расположенную в папке html на текущем веб-сайте:

Пример

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

Подробнее о путях к файлам можно прочитать в главе Пути к файлам HTML.

Резюме главы

  • Используйте атрибут стиля HTML для встроенного стиля
  • Используйте элемент HTML для определения внутреннего CSS
  • Используйте элемент HTML для ссылки на внешний файл CSS
  • Используйте элемент HTML для хранения элементов и
  • Используйте свойство цвета CSS для цветов текста
  • Используйте свойство CSS font-family для текстовых шрифтов
  • Используйте свойство CSS font-size для размеров текста.
  • Используйте свойство границы CSS для границ
  • Используйте свойство CSS padding для пространства внутри границы.
  • Используйте свойство margin CSS для отступа за границей

Совет. Вы можете узнать больше о CSS в нашем учебнике по CSS.

HTML-упражнения

Теги стиля HTML

Тег Описание
Определяет информацию о стиле для документа HTML
Определяет связь между документом и внешним ресурсом

Полный список всех доступных тегов HTML см. в нашем справочнике по тегам HTML.

Основная цель CSS — позволить веб-дизайнеру определять объявления стилей, а затем применять эти стили к HTML-страницам с помощью селекторов.

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

Стили могут быть связаны с HTML-документом одним из трех способов:

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

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

3. Внешний стиль

Как подключить таблицу стилей CSS к HTML-странице?

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

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

Например, если вы хотите добавить стили, вы можете использовать следующий код:

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

вывод

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

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

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

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

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

Вы должны начать с открывающего тега стиля, как показано ниже:

вывод

3. Внешний стиль

Внешняя таблица стилей — это обычный текстовый файл, содержащий только форматы стилей CSS. Расширение внешнего файла должно заканчиваться расширением .css (например, pagestyle.css). Этот внешний файл называется внешней таблицей стилей.

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

Значением атрибута rel должна быть таблица стилей. Атрибут href указывает расположение и имя файла таблицы стилей. В приведенном выше коде имя внешнего файла — «style.css», и оно хранится в том же каталоге, что и ваш HTML-файл. Если вы хотите сохранить файл .css в другом месте каталога, вам следует указать путь к вашему файлу css в href.

Связывание веб-страницы с таблицей стилей CSS

Для тестирования внешней таблицы стилей необходимо создать один файл CSS и один файл HTML.

Шаги по созданию файла CSS

Откройте обычный текстовый файл, скопируйте и вставьте следующие правила css.

Сохраните файл как "styles.css"

Шаги по созданию файла HTML

Откройте обычный текстовый файл, скопируйте и вставьте следующий HTML-код.

Сохраните файл как «external.html» в той же папке, что и «styles.css». Обратите внимание, что тег соединяет этот файл HTML с внешним файлом CSS "styles.css".

После сохранения обоих файлов (html и css) в одной папке откройте файл «external.html» в веб-браузере. При открытии браузера вы можете увидеть стили, примененные к тегам H1 и H2, как на следующем изображении:

Вы можете связать один файл .css с любым количеством файлов HTML одновременно, и любые изменения, внесенные вами в определения стилей в этом файле (.css), повлияют на все страницы HTML, которые ссылаются на него .

Считается, что таблицы стилей 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 идут на наши образовательные инициативы и помогают оплачивать серверы, услуги и персонал.

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