Как включить несколько файлов css в html

Обновлено: 21.11.2024

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

< /tr>

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

Применение CSS к HTML

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

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

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

Вы ссылаетесь на внешнюю таблицу стилей CSS из элемента HTML:

Файл таблицы стилей CSS может выглядеть следующим образом:

Внутренняя таблица стилей

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

HTML для внутренней таблицы стилей может выглядеть следующим образом:

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

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

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

Встроенные стили — это объявления CSS, влияющие на один элемент HTML, содержащийся в атрибуте стиля. Реализация встроенного стиля в документе HTML может выглядеть следующим образом:

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

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

Игра с CSS в этой статье

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

index.html:

стили.css:

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

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

Читайте и получайте удовольствие!

Селекторы

Селектор ориентируется на HTML, чтобы применить стили к содержимому. Мы уже познакомились с множеством селекторов в учебнике «Начало работы с CSS». Если CSS не применяется к содержимому должным образом, ваш селектор может не совпадать с тем, что, по вашему мнению, он должен совпадать.

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

Попробуйте создать несколько правил CSS, использующих указанные выше селекторы. Добавьте HTML для стилизации селекторами. Если какой-либо из приведенных выше синтаксисов вам не знаком, попробуйте поискать в MDN.

Примечание. Вы узнаете больше о селекторах в следующем модуле: Селекторы CSS.

Конкретность

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

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

В языке CSS есть правила, определяющие, какой селектор сильнее в случае конфликта.Эти правила называются каскадом и специфичностью. В блоке кода ниже мы определяем два правила для селектора p, но текст абзаца будет синим. Это связано с тем, что объявление, которое устанавливает синий цвет текста абзаца, появляется позже в таблице стилей. Более поздние стили заменяют конфликтующие стили, появившиеся ранее в таблице стилей. Это каскадное правило.

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

Проведите этот эксперимент сами! Добавьте HTML, затем добавьте два p < . > правила для вашей таблицы стилей. Затем измените первый селектор p на .special, чтобы посмотреть, как изменится стиль.

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

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

Свойства и значения

На самом базовом уровне CSS состоит из двух компонентов:

Свойства: это удобочитаемые идентификаторы, которые указывают, какие стилистические особенности вы хотите изменить. Например, размер шрифта, ширина, цвет фона.
Значения. Каждому свойству присваивается значение. Это значение указывает, как стилизовать свойство.

В приведенном ниже примере выделено одно свойство и значение. Имя свойства — цвет, а значение — синий .

Когда свойство связано со значением, это соединение называется объявлением CSS. Объявления CSS находятся в блоках объявлений CSS. В приведенном ниже примере выделение определяет блок объявления CSS.

Наконец, блоки объявлений CSS объединяются с селекторами для создания наборов правил CSS (или правил CSS). Пример ниже содержит два правила: одно для селектора h1 и одно для селектора p. Цветное выделение указывает на правило h1.

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

Свойства и значения CSS нечувствительны к регистру. Свойство и значение в паре свойство-значение разделяются двоеточием ( : ).

Поищите различные значения свойств, перечисленных ниже. Напишите правила CSS, применяющие стили к различным элементам HTML:

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

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

Функции

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

Функция calc()

Примером может служить функция calc(), которая может выполнять простые математические операции в CSS:

Это выглядит так:

Функция состоит из имени функции и круглых скобок, в которых заключены значения функции. В случае с приведенным выше примером calc() значения определяют ширину этого поля как 90% от ширины содержащего блока минус 30 пикселей. Результат вычисления нельзя вычислить заранее и ввести как статическое значение.

Функции преобразования

Другим примером могут быть различные значения для transform , такие как rotate() .

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

трансформировать
background-image , в частности значения градиента
цвет , в частности значения rgb/rgba/hsl/hsla

@правила

CSS @rules (произносится как «at-rules») содержит инструкции о том, что должен делать CSS или как он должен себя вести. Некоторые @rules просты и содержат только ключевое слово и значение. Например, @import импортирует таблицу стилей в другую таблицу стилей CSS:

Одним из распространенных @rule, с которым вы, вероятно, столкнетесь, является @media , которое используется для создания медиа-запросов. Медиа-запросы используют условную логику для применения стилей CSS.

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

В этих руководствах вы столкнетесь с другими @rules.

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

Сокращения

Некоторые свойства, такие как font , background , padding , border и margin, называются сокращенными свойствами. Это связано с тем, что сокращенные свойства задают несколько значений в одной строке.

Например, вот эта строка кода:

эквивалентен этим четырем строкам кода:

соответствует этим пяти строкам:

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

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

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

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

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

Комментирование кода также полезно для временного отключения разделов кода для тестирования. В приведенном ниже примере правила для .special отключаются путем «закомментирования» кода.

Добавьте комментарии к вашему CSS.

Пробел

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

В приведенном ниже примере каждое объявление (и начало/конец правила) имеет свою собственную строку. Возможно, это хороший способ написания CSS. Это упрощает поддержку и понимание CSS.

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

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

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

Например, следующие объявления являются допустимыми для CSS:

Но эти объявления недействительны:

Вы видите ошибки с интервалами? Во-первых, 0auto не распознается как допустимое значение свойства margin. Запись 0auto предназначена для двух отдельных значений: 0 и auto. Во-вторых, браузер не распознает padding- как допустимое свойство. Правильное имя свойства ( padding-left ) разделено ошибочным пробелом.

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

Чтобы узнать, как интервалы могут нарушить работу CSS, попробуйте поиграть с интервалами в тестовом CSS.

Что дальше?

Полезно понимать, как браузер использует HTML и CSS для отображения веб-страницы. В следующей статье «Как работает 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 указано более одного стиля?

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

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

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

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

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

DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.

Столько файлов CSS должно быть загружено на любой веб-сайт.

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

Я полагаю, что три файла CSS — это максимальное количество файлов CSS, необходимых для любой страницы.

Это развернутый CSS

Когда я говорю "один", "два" или "три", я имею в виду файлы CSS, на которые есть ссылки в главе развернутых веб-сайтов. Я не говорю о файлах CSS, которые вы редактируете как разработчик. Для этого вы должны работать с любыми модулями, которые имеют для вас смысл. Затем эти модульные фрагменты объединяются в окончательный набор развернутых файлов. Вы можете сделать это с помощью таких вещей, как Rails Asset Pipeline, с помощью препроцессора CSS или с помощью таких приложений, как CodeKit.

Global = main.css + grid.css + typography.css + buttons.css + print.css
Раздел сайта A = tabs.css + editor.css
Раздел сайта B = forms.css + видео.css + детали.css

Что загружается в «редакторскую» часть сайта = global.css и site-section-a.css
Что загружается в «подробную» часть сайта = global.css и site-section-b. CSS

Разве один всегда лучше?

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

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

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

Теперь вы можете троллить меня за упрощение. =)

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

Лично я использую один файл css для большинства своих сайтов, однако были случаи, когда я чувствовал необходимость в двух или более файлах. Было приятно узнать, что вы делаете и почему вы делаете это так, как делаете.

Все равно спасибо, что поделились.

Мне просто интересно, какие могут быть ваши предложения, когда вы используете несколько подключаемых модулей jQuery со связанными с ними определенными файлами css. Например, я часто использую qTip2, fancybox и jQuery UI и даже могу добавить плагин ротатора вместе в веб-приложение.

Загружать локально и объединять их?

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

Можете ли вы уточнить, как вы можете объединить их? @импорт? Меньше? И стали бы вы обрабатывать таблицы стилей для печати таким же образом?

Теоретически, думаю, мы все можем с этим согласиться. Но, с точки зрения WordPress, как вам удается уместить все эти css-файлы, сгенерированные плагинами, в 1 или 2 файла, сохраняя при этом простоту обслуживания и обновлений?
Спасибо за ответ :-)

Для этого я использую W3TotalCache. Он объединяет все css-файлы на стороне сервера, и вы также можете сделать то же самое для js-файлов (если это не сломает ваш сайт).

Лучшее в W3TC то, что его можно отключить для вошедших в систему пользователей, что помогает мне при отладке.

Мой МО в последнее время был 3.

1) Bootstrap min
2) Bootstrap min responsive
3) Style.css со всеми моими настройками.

Возможно, мне удастся объединить первые два.

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

вы должны использовать атрибут media с отзывчивым бутстрапом, поэтому вы вообще используете 2 таблицы стилей

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

Я бы не советовал этого делать, так как вы не получите всех преимуществ кэширования.

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

Извините, я неправильно прочитал/неверно истолковал фразу «Если бы у меня была одна единственная страница».

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

Очень хорошая тема, Крис, и очень хорошо объяснил.
В идеале лучше всего использовать один файл css. Идея состоит в том, чтобы иметь как можно меньше вызовов сервера, чтобы загружать HTML-страницу как можно быстрее.
Еще один способ ускорить загрузку страницы — использовать как можно меньше изображений, группируя изображения css в спрайты изображений. Таким образом, вместо, например, 20 вызовов сервера для 20 изображений css, вы можете иметь один вызов сервера для одного спрайта изображения.

Что касается темы, я бы хотел, чтобы ResourceLoader (компонент MediaWiki) был автономным. Это сделало бы WordPress, Drupal и ваше собственное приложение на базе php отличным внешним интерфейсом.

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

хороший пост, Крис!
Лично я использую больше файлов css при разработке и объединяю их в один, когда мне нужно публиковать.

Я полностью согласен — однако, когда мы пытались сжать и объединить наш CSS на большом клиентском сайте, мы обнаружили, что IE7 имеет ограничение на размер файла для таблиц стилей, за пределами которого он не будет читать содержимое. Поэтому нам пришлось разбить две наши самые большие объединенные таблицы стилей на два файла меньшего размера. Очень неприятно, особенно в сочетании с другими ограничениями IE:

IE (все версии): максимальное количество файлов CSS, загружаемых IE, равно 32 (в некоторых источниках указывается даже 31). Любой файл CSS выше этого предела будет проигнорирован.
IE (все версии): Internet Explorer ограничивает вложенные операторы CSS @import тремя из первой связанной внешней таблицы стилей. исходный код
IE6/IE7: ограничение размера файла CSS около 285 КБ (зависит от конкретной таблицы стилей)

Я действительно не знал об этой проблеме. Позор тебе ИИ! У тебя плохой браузер.

Но приятно знать, что bless есть (в закладках). Я очень надеюсь, что мне никогда не придется его использовать.

Как вы относитесь к использованию встроенного CSS на веб-сайте, на котором всего одна страница? Я изучал HTML-код веб-сайта Humble Indie Bundle и понял, что они используют встроенный CSS.

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

У меня всегда есть один файл css для всего веб-сайта.
Если многие страницы выглядят одинаково, я включу для них вторую таблицу стилей.
Затем, если мне нужны стили для конкретной страницы, я добавляю их в тег.

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

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

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

Спасибо, что позволили мне поныть ;)

Я использую четыре.
Всегда есть мой единый файловый фреймворк.
И еще три: tags.css, ids.css, class.css

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

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

Привет, Кзкай, я вообще не понимаю, чем это плохо! Я постоянно делаю такие быстрые и грязные вещи, даже встроенные стили, пока мои «клиенты» (фактически мои боссы) не договорятся о том, чего они хотят. Если это временно, и над этим работаете только вы, кого это волнует? :)

Я работаю над многими сайтами, у которых есть главная страница и максимум 3-4 подстраницы. Я склонен помещать весь свой CSS в один файл, так как это заставляет меня придумывать простые повторно используемые шаблоны проектирования. В душе я редукционист :-)

Aunque estoy de acuerdo con la mayoría de los comentarios expuestos, учтите, что си deseas desarrollar sistemas es mejor aplicar nivel tres para facilitar el desarrollo de la aplicación a corto y mediano plazo.

Si el objetivo es reducir el tiempo de respuesta exists otros métodos más eficientes de lograr aquello, comenzando con la cache de los archivos base.

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

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

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

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

Я вижу, что этот подход проблематичен для сайтов с *огромным* объемом трафика, где на счету каждый килобайт. Но для 99 % сайтов это кажется самым быстрым и простым способом.

Немного сложно говорить о таких вещах абстрактно, но я попытаюсь. В приведенном выше примере с «тремя» я имею в виду сайты, где сайт настолько велик и существует так много разных разделов, что сводить их все в одну таблицу стилей нецелесообразно. Может быть, тогда размер таблицы стилей был бы 3 МБ или что-то в этом роде (я видел это не раз). Но, по крайней мере, он кешируется для каждой страницы сайта, верно? Ну, может быть. Это слишком много для кэширования на мобильных устройствах, так что не там. И этот первоначальный удар настолько велик, что, вероятно, он того не стоит. При разделении на три эти 3 МБ больше не являются 3 МБ, они настолько нацелены, что, вероятно, НАМНОГО меньше. Скажем, 100 000, потому что он загружает только то, что ему нужно, а не все на этом гигантском сайте. И он лучше использует кеш. Global.css используется повсеместно и, вероятно, довольно мал (подходит для мобильных устройств) и кешируется. Site-section.css аналогичен, и затем, когда люди просматривают больше всего, что им нужно, это загрузить любой (также, вероятно, очень маленький) CSS для конкретной страницы.

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

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

Какое решение вы используете и рекомендуете ли вы его?

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

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

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

reset
print
общий css
зависит от страницы
зависит от пользовательского элемента управления
зависит от библиотеки (jquery, treeview…)
зависит от браузера

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

Я должен чрезмерно анализировать вещи. Я использую одну таблицу стилей на каждой странице, разные таблицы стилей для каждого раздела. Это связано с тем, что люди, получающие доступ к разным частям сайта, над которым я работаю, вероятно, не увидят другие части сайта. Студенты никогда не увидят администратора учителя, поэтому им никогда не нужна эта информация о таблицах стилей. Им нужна студенческая таблица стилей. Оба дизайна имеют общие элементы, но вместо того, чтобы спрятать эти общие черты в «глобальном» файле css (который на самом деле не был бы глобальным, просто был бы общим для этих двух пользователей — общедоступный сайт совершенно другой, опять же!), я просто включите его в Sass и скомпилируйте на каждый лист.

По-моему, умно.

99 % моей работы приходится на готовые CMS (Drupal, EE, WP). В основном Drupal и EE. Drupal имеет встроенную настройку для объединения файлов CSS и javascript. Но почему-то при этом обычно не получается. И давайте будем честными, Drupal известен своей мощью и гибкостью, а не эффективностью. Количество запросов браузера на загрузку одной страницы ошеломляет.

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

Я не знал об ошибке ограничения селектора IE. К счастью, я не думаю, что когда-либо создавал сайт, на котором использовалось бы столько селекторов.

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

Чтобы объединить их, я использую один файл LESS с @imports, затем пользовательский файл php для минимизации, gzip и кэширования вывода в один файл.

Я занимаюсь созданием относительно большого сайта, и пока у меня есть только 147 селекторов, так что я хорошо справляюсь с ошибками IE. Я ожидаю, что их будет гораздо больше, когда я начну скинить его, но я не думаю, что буду приближаться к ~4000 от порога ошибки.

Звучит так… чертовски… элегантно! Я завидую вашему рабочему процессу!

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

Чем меньше вы загружаете, тем быстрее работает сайт и тем лучше SEO.

У меня всегда есть CSS-файл сброса… так что для меня всегда требуется как минимум 2 CSS-файла.

Почему бы не включить сброс в вашу «обычную» таблицу стилей? Просто интересно, почему, без язвительности: D Я обычно держу свой стиль в основной таблице стилей.

Обычно я поднимаюсь до 3, но никогда не поднимался выше этого уровня.

Моя структура обычно такая:

Основной макет (структура)
Стили (типографика, градиенты, границы и т. д. – основное)
Конкретные элементы страницы (например, для оформления ползунка или уникального элемента).

Мои сбросы и т. д. находятся на основном листе макета, так как я предпочитаю хранить их отдельно.

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

W3TotalCache выглядит очень интересно, похоже, он нужен каждому сайту WP :). Я не использую WP, и я решил эту «проблему» в своем шаблонизаторе. Каждый файл шаблона может вставлять несколько файлов CSS, LESS или JS в раздел заголовка. Сценарий на стороне сервера оценивает каждый файл и (повторно) компилирует его при необходимости. Затем он добавляет все файлы в один файл кеша. Ключ кэша уникален для каждой комбинации файлов. Таким образом, каждая страница имеет минимальное количество css, но все по-прежнему аккуратно разбивается на несколько файлов для разработки. В системе также есть режим разработки, в котором все файлы встраиваются отдельно. (Очевидно, что LESS все еще скомпилирован).

Это позволяет легко создавать повторно используемые модули и сохранять небольшой размер их js/css.

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

Я бы поспорил с использованием четвертого слоя для аудиторий (подписки, языки, права и т. д.). Примеры: free_trial.css, year_subscription.css, german.css, canadain_fr.css, admin.css, read_only.css

Интернет становится все быстрее, браузеры все быстрее и быстрее выполняют рендеринг. Недавно я закончил проект на основе twitter bootstrap. Во время разработки я просто включил все файлы меньшего размера и файлы JS, которые может предложить загрузчик. В конце почистил. Но я не мог заметить никакой разницы в скорости (хорошо, я человек). Так зачем хлопоты?

Или вас волнуют 10 КБ, которые вы можете здесь сэкономить? Возможно, вы сначала посмотрите на свои изображения.

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

Не могу не согласиться с этой статьей: модульный CSS используется на платформах электронной коммерции с 2006 года. Базовая таблица стилей отображается на каждой странице, а затем ряд @imports объединяется и минимизируется на стороне сервера перед внедрением в .
Простые :)

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

Классный пост. Мы в Яндексе тоже об этом думаем. У нас есть некий прототип инструмента, который может создавать CSS (и другие статические файлы, например, JS) для страниц, но на основе реальной статистики сеансов пользователей на сайте. Это позволяет обрабатывать ситуации, когда изменяется структура сайта или используемые блоки, поэтому инструмент может определить, в каких комбинациях стили блоков должны быть объединены в отдельные связанные файлы.

Связанные сообщения выше были сгенерированы алгоритмически и отображены здесь без какой-либо нагрузки на наши серверы благодаря Jetpack.

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

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