Как сделать ссылку на файл css

Обновлено: 02.07.2024

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

< /p>

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

TL;DR — внешняя таблица стилей CSS означает, что вы загружаете все свойства и значения стилей в отдельный файл .css. Затем вы связываете документ со своим веб-сайтом. Узнайте, как связать CSS с HTML, чтобы повысить производительность веб-сайта и легко обновлять правила CSS.

Содержание

Как связать CSS с HTML: основные советы

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

Простой дизайн (без лишней информации).
Качественные курсы (даже бесплатные)
Разнообразие функций

Нанодипломные программы
Подходит для предприятий
Платные сертификаты об окончании

Простая навигация
Технических проблем нет
Кажется, заботится о своих пользователях.

Огромный выбор курсов
Политика возврата средств в течение 30 дней
Бесплатные сертификаты об окончании

Отличный пользовательский интерфейс
Предлагает качественный контент.
Очень прозрачные цены.

Бесплатные сертификаты об окончании
Сосредоточены на навыках работы с данными.
Гибкий график обучения

Стиль нескольких HTML-страниц

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

Совет. Файлы .css не могут содержать теги HTML.

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

Примечание: изменения и обновления файла .css будут применяться ко всему веб-сайту. Связывание HTML с CSS — лучший вариант для упрощения обслуживания веб-сайта.

rel описывает отношения между HTML-документом и связанным документом.
type определяет, какой тип данных должен принимать элемент ввода.
href указывает на конкретный загружаемый файл.

Примечание: вы можете создать файл .css в любом текстовом редакторе. Документ должен иметь расширение .css.

В приведенном ниже примере показано, как выглядит файл .css из первого внешнего примера CSS:

Примечание: никогда не оставляйте пробел между значением свойства и единицей измерения. Пишите 10 пикселей, а не 10 пикселей.

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

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

Что такое CSS?

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

Как создать файл CSS?

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

Давайте приступим к созданию вашего первого файла CSS. Вы можете назвать его «style.css».

Полный курс веб-разработчика

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

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

Это приведет к следующему результату:

Давайте рассмотрим еще один пример добавления изображения с помощью CSS.

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

Это приведет к следующему результату:

Хотели бы вы стать полноценным разработчиком?

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

Курс Simplelearn Full Stack Java Developer предлагает все необходимое для освоения мира веб-разработки. Курс охватывает широкий спектр технологий Java для веб-разработчиков, от базовых принципов до продвинутых методов. В конце курса вы получите готовые к работе навыки, необходимые для создания комплексного приложения, быстрого и точного тестирования и развертывания кода, хранения данных с помощью MongoDB и многого другого с помощью практических проектов и упражнений.< /p>

Если вы начинающий веб- и мобильный разработчик, обучение HTML расширит ваши навыки и возможности карьерного роста. У вас есть к нам вопросы? Не стесняйтесь, дайте нам знать, упомянув их в разделе комментариев, и наши эксперты ответят на них прямо сейчас!

Найдите наш онлайн-учебный курс Full Stack Java Developer в ведущих городах:

< /tr>

Имя	Дата	Место
Full Stack Java Разработчик	Когорта начинается 7 апреля 2022 г., Группа выходного дня	Ваш город	Подробнее
Full Stack Java Developer	Когорта начинается 13 апреля 2022 г., группа выходного дня	Ваш город	Подробнее
Полный стек разработчиков Java	Когорта начинается 14 апреля 2022 г., группа выходного дня	Ваш город	Просмотреть Детали

Об авторе

Простое обучение

Simplilearn — один из ведущих мировых поставщиков онлайн-обучения по цифровому маркетингу, облачным вычислениям, управлению проектами, науке о данных, ИТ, разработке программного обеспечения и многим другим новым технологиям.

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