Как оформить файл css

Обновлено: 21.11.2024

Что есть на этой странице

.CSS вариант №

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

Краткая история

CSS1 был выпущен в 1996 году с Бертом Босом в качестве соавтора. Рабочая группа CSS начала работать над проблемами, которые не были учтены в CSS1. Это привело к созданию CSS2 в ноябре 1997 года, который был опубликован в качестве рекомендации W3C 12 мая 1998 года. В этой версии добавлена ​​поддержка устройств, специфичных для медиа, таких как принтеры, загружаемые шрифты, таблицы и позиционирование элементов. В июне 1999 года CSS3 стал рекомендацией W3C. Это разделило документацию на модули, где каждый модуль имел функции расширения, определенные в CSS2.

Как использовать файлы CSS

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

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

Синтаксис CSS

Правило CSS состоит из двух компонентов: селектора и объявления. Селектор указывает на элемент в документе HTML. Это может быть либо тег элемента, имя класса, имя идентификатора, несколько тегов, показывающих иерархию, и т. д. Объявление содержит определение стиля, состоящее из свойства и значения. Свойство определяет свойство элемента, которое вы хотите изменить, а значение определяет его новое значение. Каждое правило CSS может иметь несколько объявлений. Ниже приведен пример правила CSS.

В приведенном выше примере у нас есть h1 в качестве селектора, который выбирает все теги h1 в документе HTML. Правило имеет два объявления: одно для веса шрифта, а другое для цвета. font-weight и color — это свойства, а 700 и forestgreen — их значения соответственно.

Пример использования CSS

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

HTML-документ Таблица стилей CSS Сравнение выходов

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

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

Требования: Базовая компьютерная грамотность, установленное базовое программное обеспечение, базовые знания работы с файлами, основы HTML (изучение Introduction to HTML), и представление о том, как работает CSS (изучите первые шаги CSS).
Цель: Изучить несколько советов и рекомендаций по организации таблиц стилей и узнайте о некоторых соглашениях об именах и инструментах, которые обычно используются для организации CSS и совместной работы.

Советы по поддержанию порядка в CSS

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

Есть ли в вашем проекте руководство по стилю написания кода?

Если вы работаете с командой над существующим проектом, прежде всего проверьте, есть ли в проекте существующее руководство по стилю для CSS. Руководство по командному стилю всегда должно преобладать над вашими личными предпочтениями. Часто не бывает правильного или неправильного способа делать что-то, но важна последовательность.

Сохраняйте последовательность

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

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

Форматирование читаемого CSS

Есть несколько способов отформатировать CSS. Некоторые разработчики помещают все правила в одну строку, например:

Другие разработчики предпочитают разбивать все на новую строку:

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

Прокомментируйте свой CSS

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

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

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

Возможно, вы использовали свойство CSS особым образом, чтобы обойти несовместимость старых браузеров, например:

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

Создавайте логические разделы в таблице стилей

Хорошей идеей будет сначала указать все общие стили в таблице стилей. Это означает, что все стили, которые обычно применяются, если вы не сделаете что-то особенное с этим элементом. Обычно у вас есть правила, настроенные для:

  • тело
  • п
  • h1, h2, h3, h4, h5
  • ul и ol
  • Свойства таблицы
  • Ссылки

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

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

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

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

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

Избегайте слишком конкретных селекторов

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

с классом box внутри с классом main .

Если вы затем захотите применить те же правила к чему-то за пределами main или к чему-то другому, кроме a

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

Бывают моменты, когда имеет смысл сделать что-то более конкретное; однако, как правило, это скорее исключение, чем обычная практика.

Разбивайте большие таблицы стилей на несколько меньших

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

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

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

Другие полезные инструменты

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

Методологии CSS

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

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

ООКСС

Большинство подходов, с которыми вы столкнетесь, в чем-то обязаны концепции объектно-ориентированного CSS (OOCSS), которая стала популярной благодаря работам Николь Салливан. Основная идея OOCSS состоит в том, чтобы разделить ваш CSS на многократно используемые объекты, которые можно использовать в любом месте вашего сайта. Стандартным примером OOCSS является шаблон, описанный как The Media Object. Это шаблон с изображением, видео или другим элементом фиксированного размера с одной стороны и гибким содержимым с другой. Это шаблон, который мы видим на всех веб-сайтах для комментариев, списков и т. д.

Если вы не используете подход OOCSS, вы можете создать собственный CSS для разных мест, где используется этот шаблон, например, создав два класса, один из которых называется comment с набором правил для составных частей, а другой называется list-item почти с теми же правилами, что и класс comment, за исключением небольших отличий. Разница между этими двумя компонентами заключается в том, что элемент списка имеет нижнюю границу, а изображения в комментариях имеют границу, а изображения элементов списка — нет.

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

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

К элементу списка будут применены медиа и элемент списка:

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

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

Дополнительные классы аналогичны используемым в примере OOCSS; однако они используют строгие соглашения об именах БЭМ.

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

Узнайте больше об этой системе BEM 101 в CSS Tricks.

Другие распространенные системы

Используется большое количество таких систем. Другие популярные подходы включают Масштабируемую и модульную архитектуру для CSS (SMACSS), созданную Джонатаном Снуком, ITCSS от Гарри Робертса и Atomic CSS (ACSS), изначально созданную Yahoo!. Если вы столкнетесь с проектом, в котором используется один из этих подходов, то преимущество в том, что вы сможете искать и находить множество статей и руководств, которые помогут вам понять, как программировать в том же стиле.

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

Создание систем для CSS

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

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

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

Определение переменных

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

Если бы мы создали переменную с именем $base-color , как в первой строке ниже, мы могли бы затем использовать ее в таблице стилей везде, где требуется этот цвет.

После компиляции в CSS вы получите следующий CSS в окончательной таблице стилей.

Компиляция таблиц стилей компонентов

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

Так, например, с партиалами у вас может быть несколько файлов стилей внутри каталога, например, Foundation/_code.scss , Foundation/_lists.scss , Foundation/_footer.scss , Foundation/_links.scss и т. д. Вы можете затем используйте роль Sass @use, чтобы загрузить их в другие таблицы стилей:

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

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

Постобработка для оптимизации

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

Подведение итогов

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

Чтобы узнать больше о макете в CSS, см. раздел «Изучение макета CSS».

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

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

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

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