Как подключить html к css и js

Редактирование стилей для платформ CSS-in-JS

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

Копирование объявлений правил стилей для их вставки с помощью синтаксиса JavaScript

В области Стили можно скопировать объявления для правила стиля таким образом, чтобы он был отформатирован для JavaScript и готов к вставке в файл JavaScript.

При использовании библиотек CSS-in-JS можно скопировать объявления CSS (свойство и значение CSS), чтобы они автоматически форматировались для JavaScript. Вам не нужно вручную изменять скопированный CSS в соответствии с синтаксисом JavaScript. Вы можете скопировать одно объявление CSS или все объявления в правиле стиля, а затем вставить их непосредственно в файл JavaScript без проблем с синтаксисом.

Чтобы скопировать правило стиля как JavaScript, выполните следующие действия:

В DevTools откройте инструмент Элементы и перейдите на вкладку Стили .
Щелкните правой кнопкой мыши объявление в правиле стиля и выберите Копировать объявление как JS или Копировать все объявления как JS.
Вставьте скопированный CSS-файл в файл JavaScript в текстовом редакторе, например Visual Studio Code. Пример: ‘—more-link’: ‘lime’ .

Дополнительные сведения о просмотре и изменении CSS см. в справочнике по функциям CSS.

Изменение правил стиля, изначально определенных функцией CSSOM

Панель «Стили» поддерживает редактирование стилей, созданных с помощью API-интерфейсов CSS Object Model (CSSOM). Многие платформы и библиотеки CSS-in-JS используют API объектной модели CSS для создания стилей.

Вы можете изменять стили, добавленные в JavaScript, с помощью CSSStyleSheet интерфейса , который является способом создания и распространения повторно используемых стилей при использовании Теневой модели DOM. См. раздел Интерфейс CSSStyleSheet в объектной модели CSS (CSSOM).

Пример

В этом примере кода правила стиля сначала определяются путем вызова функции CSS Object Model (CSSOM), а затем правила стиля редактируются с помощью области Стили . Объект CSSStyleSheet содержит API CSSOM, например insertRule() . Стили h1 , которые были изначально добавлены CSSStyleSheet функцией, затем можно редактировать в области Стили .

//Add CSS-in-JS button function addStyle() < const sheet = new CSSStyleSheet(); sheet.insertRule(`h1 < background: pink; text-transform: uppercase; >`); document.adoptedStyleSheets = [sheet]; >

В этом примере показано изменение background свойства стилей h1 , добавленных функцией insertRule() объектной модели CSS . Цвет background сначала задается путем вызова функции объектной модели CSS, а затем его можно изменить с pink lightblue на с помощью области Стили .

Изменение свойства фона стилей h1, добавленных с

Что такое CSS-in-JS?

Этот раздел является фрагментом из записи блога о поддержке CSS-in-JS в DevTools.

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

В контексте средств разработки CSS-in-JS означает, что содержимое CSS внедряется на страницу с помощью API объектной модели CSS. Обычный CSS внедряется с помощью элементов или и имеет статический источник (например, узел DOM или сетевой ресурс). Напротив, CSS-in-JS часто не имеет статического источника.

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

Если вы используете любую библиотеку CSS-in-JS (например, styled-component, Emotion или JSS), библиотека может внедрять стили с помощью API объектной модели CSS в зависимости от режима разработки и браузера.

Давайте рассмотрим некоторые примеры того, как можно внедрить таблицу стилей с помощью API объектной модели CSS, аналогичному подходу, используемому некоторыми библиотеками CSS-in-JS.

// Insert new rule to an existing CSS stylesheet const element = document.querySelector('style'); const stylesheet = element.sheet; stylesheet.replaceSync('.some < color: blue; >'); stylesheet.insertRule('.some < color: green; >');

Вы также можете создать совершенно новую таблицу стилей:

// Create a completely new stylesheet const sheet = new CSSStyleSheet(); stylesheet.replaceSync('.some < color: blue; >'); stylesheet.insertRule('.some < color: green; >');

// Apply constructed stylesheet to the document document.adoptedStyleSheets = [. document.adoptedStyleSheets, sheet];

Поддержка CSS в средствах разработки

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

Панель Стили поддерживает правила CSS, которые можно изменить с помощью API объектной модели CSS. Стили CSS-in-JS иногда описываются как созданные, чтобы указать, что эти стили были созданы с помощью веб-API.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Оригинальная страница находится здесь и автор Алекс Руденко (Технический писатель, Chrome DevTools & Lighthouse).

Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.

Подключение CSS к HTML

Существует несколько способов подключения CSS к HTML. Рассмотрим их:

Внешние таблицы стилей. Создайте в блокноте файл style.css и сохраните его. Чтобы подключить style.css к уже существующей html-странице используется тег:

Внутренние таблицы стилей, которые задаются внутри HTML-документа при помощи атрибута style. К примеру:

>hello!

Встроенные таблицы стилей (таблица стилей встраивается в заголовок HTML-страницы):

«color:red

Также рекомендуем почитать:

Рубрики

of your page —>

Взаимодействие JavaScript и CSS

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

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

Управление встроенными стилями

Самый простой способ управления стилями CSS — это манипулирование атрибутом style отдельных элементов документа. Как и для большинства HTML-атрибутов, атрибуту style соответствует одноименное свойство объекта Element, и им можно манипулировать в сценариях на языке JavaScript. Однако свойство style имеет одну отличительную особенность: его значением является не строка, а объект CSSStyleDeclaration. Свойства этого объекта представляют CSS-свойства, определенные в HTML-атрибуте style.

Например, чтобы вывести содержимое текстового элемента e крупным, полужирным шрифтом синего цвета, можно выполнить следующие операции для записи желаемых значений в свойства, которые соответствуют свойствам стиля font-size, font-weight и color:

e.style.fontSize = "24px"; e.style.fontWeight = "bold"; e.style.color = "blue";

При работе со свойствами стиля объекта CSSStyleDeclaration не забывайте, что все значения должны задаваться в виде строк. В таблице стилей или атрибуте style можно написать:

position: absolute; font-family: sans-serif; background-color: #ffffff;

Чтобы сделать то же самое для элемента e в JavaScript, необходимо заключить все значения в кавычки:

e.style.position = "absolute"; e.style.fontFamily = "sans-serif"; e.style.backgroundColor = "#ffffff";

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

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

e.style.left = 300; // Неправильно: это число, а не строка e.style.left = "300"; // Неправильно: отсутствуют единицы измерения e.style.left = "300px"; // Правильно

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

Многие CSS-свойства стиля, такие как font-size, содержат в своих именах дефис. В языке JavaScript дефис интерпретируется как знак минус, поэтому нельзя записать выражение, приведенное ниже:

e.style.font-size = "24px"; // Синтаксическая ошибка!

Таким образом, имена свойств объекта CSSStyleDeclaration слегка отличаются от имен реальных CSS-свойств. Если имя CSS-свойства содержит дефисы, имя свойства объекта CSSStyleDeclaration образуется путем удаления дефисов и перевода в верхний регистр буквы, непосредственно следующей за каждым из них. Другими словами, CSS-свойство border-left-width доступно через свойство borderLeftWidth, а к CSS-свойству font-family можно обратиться через свойство fontFamily.

Кроме того, когда CSS-свойство, такое как float, имеет имя, совпадающее с зарезервированным словом языка JavaScript, к этому имени добавляется префикс «css», чтобы создать допустимое имя свойства объекта CSSStyleDeclaration. То есть, чтобы прочитать или изменить значение CSS-свойства float элемента, следует использовать свойство cssFloat объекта CSSStyleDeclaration.

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

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

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

Иногда бывает проще прочитать или записать единственную строку во встроенный стиль элемента, чем обращаться к объекту CSSStyleDeclaration. Для этого можно использовать методы getAttribute() и setAttribute() объекта Element или свойство cssText объекта CSSStyleDeclaration:

// Обе инструкции, следующие ниже, записывают в атрибут style // элемента e строку s: e.setAttribute("style", s); e.style.cssText = s; // Обе инструкции, следующие ниже, получают значение атрибута style // элемента e в виде строки: s = e.getAttribute("style"); s = e.style.cssText;

Создание анимационных эффектов средствами CSS

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

Ниже показан пример, который демонстрирует две такие функции, shake() и fadeOut(). Функция shake() перемещает, или «встряхивает» (shakes), элемент из стороны в сторону. Ее можно использовать, например, для привлечения внимания пользователя в случае ввода некорректных данных. Функция fadeOut() уменьшает непрозрачность элемента в течение указанного периода времени (по умолчанию 500 миллисекунд), вызывая эффект его растворения до полного исчезновения:

// Делает элемент e относительно позиционируемым и перемещает его влево и вправо. // Первым аргументом может быть объект элемента или значение атрибута id требуемого // элемента. Если во втором аргументе передать функцию, она будет вызвана с элементом e // в виде аргумента по завершении воспроизведения анимации. Третий аргумент определяет // величину смещения элемента e. По умолчанию принимает значение 5 пикселов. // Четвертый аргумент определяет, как долго должен воспроизводиться эффект. // По умолчанию эффект длится 500 мсек. function shake(e, oncomplete, distance, time) < // Обработка аргументов if (typeof e === "string") e = document.getElementByld(e); if (!time) time = 500; if (!distance) distance = 5; var originalStyle = e.style.cssText; // Сохранить оригинальный стиль e e.style.position = "relative"; // Сделать относит. позиционируемым var start = (new Date()).getTime(); // Запомнить момент начала анимации animate(); // Запустить анимацию // Эта функция проверяет прошедшее время и изменяет координаты e. // Если анимацию пора завершать, восстанавливает первоначальное состояние // элемента e. Иначе изменяет координаты e и планирует следующий свой вызов. function animate() < var now = (new Date()).getTime(); // Получить текущее время var elapsed = now-start; // Сколько прошло времени с начала? var fraction = elapsed / time; // Доля от требуемого времени? if (fraction < 1) < // Если рано завершать анимацию // Вычислить координату x элемента e как функцию от доли общего // времени анимации. Здесь используется синусоидальная функция, // а доля общего времени воспроизведения умножается на 4pi, // поэтому перемещение взад и вперед выполняется дважды. var x = distance * Math.sin(fraction*4*Math.PI); e.style.left = x + "px"; // Попробовать вызвать себя через 25 мсек или в конце запланированного // отрезка общего времени воспроизведения. Мы стремимся сделать // анимацию гладкой, воспроизводя ее со скоростью 40 кадров/сек. setTimeout(animate, Math.min(25, time-elapsed)); >else < // Иначе анимацию пора завершать e.style.cssText = originalStyle; // Восстановить первонач. стиль if (oncomplete) oncomplete(e); // Вызвать ф-цию обратного вызова >> > // Растворяет e от состояния полной непрозрачности до состояния полной прозрачности // за указанное количество миллисекунд. Предполагается, что, когда вызывается // эта функция, e полностью непрозрачен. oncomplete - необязательная функция, // которая будет вызвана с элементом e в виде аргумента по завершении анимации. // Если аргумент time не задан, устанавливается интервал 500 мсек. // Эта функция не работает в IE, но ее можно модифицировать так, чтобы // в дополнение к свойству opacity она использовала нестандартное // свойство filter, реализованное в IE. function fadeOut(e, oncomplete, time) < if (typeof e === "string") e = document.getElementByld(e); if (!time) time = 500; // В качестве простой "функции перехода", чтобы сделать анимацию немного // нелинейной, используется Math.sqrt: сначала растворение идет быстро, // а затем несколько замедляется. var ease = Math.sqrt; var start = (new Date()).getTime(); // Запомнить момент начала анимации animate(); // И запустить анимацию function animate() < var elapsed = (new Date()).getTime()-start; // Прошедшее время var fraction = elapsed/time; // Доля от общего времени if (fraction < 1) < // Если не пора завершать var opacity = 1 - ease(fraction); // Вычислить непрозрачн. e.style.opacity = String(opacity); // Установить ее в e setTimeout(animate, Math.min(25, time-elapsed)); >else < // Иначе завершить e.style.opacity = "0"; // Сделать e полностью прозрачным if (oncomplete) oncomplete(e); // Вызвать ф-цию обратного вызова >> >

Обе функции, shake() и fadeOut(), принимают необязательную функцию обратного вызова во втором аргументе. Если эта функция указана, она будет вызвана по завершении воспроизведения анимационного эффекта. Элемент, к которому применялся анимационный эффект, будет передан функции обратного вызова в виде аргумента. Следующая разметка HTML создает кнопку, для которой после щелчка на ней воспроизводится эффект встряхивания, а затем эффект растворения:

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

Вычисленные стили

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

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

Получить вычисленный стиль элемента можно с помощью метода getComputedStyle() объекта Window. Первым аргументом этому методу передается элемент, вычисленный стиль которого требуется вернуть. Второй аргумент является обязательным, и в нем обычно передается значение null или пустая строка, но в нем также может передаваться строка с именем псевдоэлемента CSS, таким как «::before», «::after», «:first-line» или «:first-letter»:

var title = document.getElementById("section1title"); var titlestyles = window.getComputedStyle(element, null);

Возвращаемым значением метода getComputedStyle() является объект CSSStyleDeclaration, представляющий все стили, применяемые к указанному элементу (или псевдоэлементу). Между объектами CSSStyleDeclaration, представляющими встроенные стили и вычисленные стили, существует множество существенных отличий:

Свойства вычисленного стиля доступны только для чтения.
Свойства вычисленных стилей имеют абсолютные значения: относительные единицы измерения, такие как проценты и пункты, преобразуются в абсолютные значения. Любое свойство, которое определяет размер (например, ширина поля или размер шрифта) будет иметь значение, выраженное в пикселах. То есть его значением будет строка с суффиксом «px», поэтому вам необходимо будет реализовать ее синтаксический анализ, зато не придется беспокоиться об определении и преобразовании единиц измерений. Значения свойств, определяющих цвет, будут возвращаться в формате «rgb(#,#,#)» или «rgba(#,#,#,#)».
Свойства, являющиеся краткой формой записи, не вычисляются — только фундаментальные свойства, на которых они основаны. Например, не следует пытаться получить значение свойства margin, вместо этого нужно обращаться к свойствам marginLeft, marginTop и т.д.
Свойство cssText вычисленного стиля не определено.

Работа с вычисленными стилями может оказаться весьма непростым делом, и обращение к ним не всегда возвращает ожидаемую информацию. Рассмотрим в качестве примера свойство font-family: оно принимает список разделенных запятыми имен семейств шрифтов для совместимости. При чтении свойства fontFamily вычисленного стиля вы ждете значение наиболее конкретного стиля font-family, применяемого к элементу. А в этом случае может вернуться такое значение, как «arial,helvetica,sans-serif», которое ничего не говорит о гарнитуре фактически используемого шрифта.

Управление таблицами стилей

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

Читать:

Как установить nupkg в visual studio

При работе с самими таблицами стилей вам придется столкнуться с двумя типами объектов. Первый тип — это объекты Element, представляющие элементы и , которые содержат или ссылаются на таблицы стилей. Это обычные элементы документа, и если в них определить атрибут id, вы сможете выбирать их с помощью метода document.getElementById().

Второй тип объектов — объекты CSSStyleSheet, представляющие сами таблицы стилей. Свойство document.styleSheets возвращает доступный только для чтения объект, подобный массиву, содержащий объекты CSSStyleSheet, представляющие таблицы стилей документа. Если в элементе или , определяющем или ссылающемся на таблицу стилей, определить атрибут title, этот объект будет доступен как свойство объекта CSSStyleSheet с именем, указанным в атрибуте title.

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

Включение и выключение таблиц стилей

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

Это наглядно демонстрирует функция disableStylesheet(), представленная ниже. Если передать ей число, она будет интерпретировать его как индекс в массиве document.styleSheets. Если передать ей строку, она будет интерпретировать ее как селектор CSS, передаст ее методу document.querySelectorAll() и установит в значение true свойство disabled всех полученных элементов:

function disableStylesheet(ss) < if (typeof ss === "number") document.styleSheets[ss].disabled = true; else < var sheets = document.querySelectorAll(ss); for(var i = 0; i < sheets.length; i++) sheets[i].disabled = true; >>

Получение, вставка и удаление правил из таблиц стилей

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

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

Объекты CSSStyleSheet хранятся в массиве document.styleSheets[]. Объект CSSStyle Sheet имеет свойство cssRules[], хранящее массив правил стилей:

var firstRule = document.styleSheets[0].cssRules[0];

В IE это свойство носит имя rules, а не cssRules.

Элементами массива cssRules[] или rules[] являются объекты CSSRule. В стандартном API объект CSSRule может представлять CSS-правила любого типа, включая @-правила, такие как директивы @import и @page. Однако в IE массив rules[] может содержать только фактические правила таблицы стилей.

Объект CSSRule имеет два свойства, которые могут использоваться переносимым способом. (В стандартном API правила, не относящиеся к правилам стилей, не имеют этих свойств, и потому, возможно, вам потребуется пропускать их при обходе таблицы стилей.) Свойство selectorText — это CSS-селектор для данного правила, а свойство style — это ссылка на доступный для записи объект CSSStyleDeclaration, который описывает стили, связанные с этим селектором. Напомню, что CSSStyleDeclaration — это тот же самый тип, который используется для представления встроенных и вычисленных стилей.

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

В дополнение к возможности получения и изменения существующих правил таблиц стилей имеется возможность добавлять правила в таблицу стилей и удалять их из таблицы. Стандартный прикладной интерфейс определяет методы insertRule() и deleteRule(), позволяющие добавлять и удалять правила:

document.styleSheets[0].insertRule("H1 < text-weight: bold; >", 0);

Браузер IE не поддерживает методы insertRule() и deleteRule(), но определяет практически эквивалентные им функции addRule() и removeRule(). Единственное существенное отличие (помимо имен функций) состоит в том, что addRule() ожидает получить селектор и стиль в текстовом виде в двух отдельных аргументах.

Создание новых таблиц стилей

Наконец, имеется возможность создавать совершенно новые таблицы стилей и добавлять их в документ. В большинстве браузеров эта операция выполняется с помощью стандартных приемов, реализованных в модели DOM: создается новый элемент и вставляется в документ в раздел , затем с помощью свойства innerHTML добавляется содержимое таблицы стилей. Однако в IE8 и в более ранних версиях новый объект CSSStyleSheet необходимо создавать с помощью нестандартного метода document.createStyleSheet(), а текст таблицы стилей добавлять с помощью свойства cssText.

Пример ниже демонстрирует создание новых таблиц:

// Добавляет таблицу стилей в документ и заполняет ее указанными стилями. // Аргумент styles может быть строкой или объектом. Если это строка, // она интерпретируется как текст таблицы стилей. Если это объект, то каждое // его свойство должно определять правило стиля, добавляемое в таблицу. // Именами свойств являются селекторы, а их значениями соответствующие стили function addStylesheet(styles) < // Сначала необходимо создать новую таблицу стилей var styleElt, styleSheet; if (document.createStyleSheet) < //Если определен IE API, использовать его styleSheet = document.createStyleSheet(); >else < var head = document.getElementsByTagName("head")[0]; styleElt = document.createElement("style"); // Новый элемент head.appendChild(styleElt); // Вставить в // Теперь новая таблица находится в конце массива styleSheet = document.styleSheets[document.styleSheets.length-1]; > // Вставить стили в таблицу if (typeof styles === "string") < // Аргумент содержит текстовое определение таблицы стилей if (styleElt) styleElt.innerHTML = styles; else styleSheet.cssText = styles; // IE API >else < // Аргумент объект с правилами для вставки var i = 0; for(selector in styles) < if (styleSheet.insertRule) < var rule = selector + " "; styleSheet.insertRule(rule, i++); > else < styleSheet.addRule(selector, styles[selector], i++); >> > >

Подключение css и javascript к сайту

Если это возможно то в каком теге лучше это делать и вообще могут ли быть проблемы с таким подключением?

Отслеживать
задан 3 янв 2013 в 18:48
Kirpich643 Kirpich643
505 4 4 золотых знака 16 16 серебряных знаков 38 38 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

JavaScript работает с DOM моделью документа html, модель DOM формируется пока не загрузится весь html, Вы можете подключать JS в любом месте, но это не рекомендуется, а если на то пошло, то подключать нужно перед закрывающим тегом body. То есть после всего содержимого, так как оно должно загрузится, чтобы сформировать DOM модель.

UPD: Забыл про стили.

Стили можно подключать только в теге head. Так, как это определено в спецификации.

Отслеживать
ответ дан 3 янв 2013 в 18:57
1,097 5 5 серебряных знаков 14 14 бронзовых знаков

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

3 янв 2013 в 21:16
Лучше опишите Вашу задачу. Изначально что-то не то в Ваших планах =)
3 янв 2013 в 21:19

делаю сайт по типу десктопа и там накапливается дафига стилей и и библиотек и мне пришла в голову идея убирать не нужные стили и библиотеки это плохо ?

3 янв 2013 в 21:26

Это отлично! Используйте условия (if,else,switch) для вывода нужных стилей и библиотек в зависимости от страницы. =)

Распространенные способы подключения CSS в JavaScript-приложения

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

Доступные варианты подключения

Рассмотрим некоторые из наиболее часто используемых методов подключения CSS в JavaScript.

Вариант 1: таблица стилей

Мы начнем с привычного подхода – ссылка на один общий файл CSS.

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

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

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

Вариант 2: Модули CSS

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

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

Модули CSS предлагают различные способы управления сгенерированными именами классов. Более подробно об этом можно узнать из документации по модулям .

Представьте, что вы хотите использовать глобальный класс .screen-reader-text, который можно применить к любому компоненту приложения. При использовании CSS-модулей вам придется обратиться к псевдоселектору :global, который определяет размещенные внутри него стили как глобально доступные.

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

Вот пример псевдоселектора :global в действии.

// typography.css :global < .aligncenter < text-align: center; >.alignright < text-align: right; >.alignleft < text-align: left; >>

А с помощью таких инструментов, как PostCSS Nested или Sass, вы можете импортировать шаблоны непосредственно в селектор.

// main.scss :global

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

// ./css/Button.css .btn < background-color: blanchedalmond; font-size: 1.4rem; padding: 1rem 2rem; text-transform: uppercase; transition: background-color ease 300ms, border-color ease 300ms; &:hover < background-color: #000; color: #fff; >> // ./Button.js import styles from "./css/Button.css"; const Button = () => (  ); export default Button;

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

Также модули CSS можно комбинировать с препроцессорами. Sass, Less, PostCSS могут быть интегрированы в процесс сборки с использованием модулей CSS.

Вариант 3: CSS in JS

Есть несколько пакетов, которые делают создание кода CSS-in-JS максимально безболезненным. JSS, Emotion и Styled Components — это лишь некоторые из них.

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

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

При навигации пользователя по приложению стили невостребованных компонентов будут удалены из раздела . На их место будут добавлены стили входящих компонентов. Это повышает производительность приложения, позволяет обойтись без HTTP- запроса и не блокирует рендеринг. Также CSS-in-JS позволяет ссылаться на состояния компонентов и функции для рендеринга стилей CSS.

Основные аспекты использования данного подхода:

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

Пример компонента React с использованием библиотеки Styled Components:

// ./Button.js import styled from 'styled-components'; const StyledButton= styled.button` background-color: blanchedalmond; font-size: 1.4rem; padding: 1rem 2rem; text-transform: uppercase; transition: background-color ease 300ms, border-color ease 300ms; &:hover < background-color: #000; color: #fff; >`; const Button = () => ( Click Me! ); export default Button;

Заключение

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

Подключение style.css в javascript файле?

Привет!
Есть cтраница index.html и к ней подключается много файлов (css, js).
Как можно организовать подключение всех файлов одной строкой?
Возможен ли вариант прописать все подключения в js файле и вместо большой бороды указывать только одну строку типа
?
p.s. Это нужно, когда много html сайтов и ко всем нужно прицепить свои стили и настройки и не надо копировать бороду, вставил всего 1 подключение и все. Т.е. упор на не на качество кода, а на скорость подключения своих заранее подготовленных файлов.

Вопрос задан более трёх лет назад
5765 просмотров

Комментировать
Решения вопроса 1
spoiler

let head = window.document.getElementsByTagName('head')[0] function includeCSS(aFile, aRel)

дальше сами думайте как автоматизировать процесс.
Ответ написан более трёх лет назад
Нравится 2 6 комментариев

Александр Сорокин,
head — это переменная секции head документа html
includeCSS — это JS функция которая подключает указанный файл к html документу

пример использования
includeCSS(‘MyPage.css’); // это подключит к текущему html документу файл стилей MyPage.css
эту функцию вы можете вызывать в цикле где будете подключать из списка css файлы.

для подключения JS файла к документу необходима другая функция

spoiler

function loadJS(aFile, aAsync)< let script = window.document.createElement('script') script.type = 'text/javascript' script.src = aFile script.async = aAsync || false head.appendChild(script) >

spoiler

function includeCSS(aFile) < let style = window.document.createElement('link') style.href = aFile style.rel = aRel || 'stylesheet' head.appendChild(style) >includeCSS('style.css') includeCSS('main/style.css') includeCSS('www.site.ru/style.css')

с подключением js аналогично как и с css

Подключение файлов CSS и JavaScript в теме WordPress

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

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

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

Пример подключения файла CSS и файла JS

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

add_action( 'wp_enqueue_scripts', 'true_enqueue_js_and_css' ); function true_enqueue_js_and_css() { // CSS wp_enqueue_style( 'misha_css', // идентификатор стиля get_stylesheet_directory_uri() . '/css/misha.css', // URL стиля array(), // без зависимостей '5.0' // версия, это например ". /misha.css?ver=5.0" ); // JavaScript wp_enqueue_script( 'misha_js', // идентификатор скрипта get_stylesheet_directory_uri() . '/js/misha.js', // URL скрипта array( 'jquery' ), // зависимости от других скриптов time(), // версия каждую секунду разная, чтоб не кэшировать во время разработки true // true - в футере, false – в хедере ); }

При разработке своих тем вставляем код подключения JS / CSS в functions.php , либо в какой-либо произвольный файл, подключаемый также к functions.php через include() / require() .
Можете также почитать документацию функций wp_enqueue_style() и wp_enqueue_script().
Не переживайте так из-за того, что я записал функцию не в одну строчку, а в 7 – согласно кодгайду WordPress, мы можем записывать функцию, чтобы каждый её параметр был на новой строке.

Хуки wp_enqueue_scripts, admin_enqueue_scripts и login_enqueue_scripts

И хотя в уроке мы использовали только хук wp_enqueue_scripts , но есть и другие, а вот их полный список:

wp_enqueue_scripts – для подключения на страницах сайта.
admin_enqueue_scripts – для подключения на страницах админки WordPress /wp-admin/.
login_enqueue_scripts – для подключения на странице авторизации / восстановления пароля / регистрации (wp-login.php).

Есть ещё enqueue_block_editor_assets , но давайте немного притормозим, ладно? ��

Что делать с кэшированием?

Конечно же обновлять кэш браузера после каждого изменения в style.css вообще не особо вариант?

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

В уроке мы использовали функцию time() , потому что каждый раз она возвращает нам новое значение, каждую следующую секунду.

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

add_action( 'wp_enqueue_scripts', 'misha_js_and_css' ); function misha_js_and_css(){ wp_enqueue_script( 'scripts', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), filemtime( dirname( __FILE__ ) . '/js/scripts.js' ), // или filemtime( get_stylesheet_directory() . '/js/scripts.js' ), true ); }

Но как же работает filemtime() ?

Как вы возможно догадались, мы передали в неё что-то вроде пути до файла? Да, это именно путь к файлу на сервере, а не URL. Для того, чтобы убедиться наглядно, можете прямо в index.php попробовать вывести echo dirname( __FILE__ );

Перенос уже зарегистрированного в WordPress jQuery в футер сайта

Вообще главный аргумент здесь – что, когда мы переносим наши JS файлы в футер, мы делаем наш сайт чуточку быстрее (да, это не влияет сильно (!) на скорость загрузки сайта, однако Google PageSpeed будет счастлив).

Для того, чтобы это сделать, мы производим следующие манипуляции:

add_action( 'wp_enqueue_scripts', function() { wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', includes_url('/js/jquery/jquery.js'), array(), null, true ); wp_enqueue_script( 'jquery' ); } );

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

В уроке, для того, чтобы сильно вас не загружать, я не стал использовать includes_url() – она возвращает динамически путь к директории wp-includes .

Также обратите внимание, что в этом примере я не стал создавать какую-то отдельную функцию, а прописал её сразу внутри хука! Типа такая анонимная функция – подобная запись, насколько я знаю, не соответствует WordPress кодгайду, но позволит вам каждый раз не напрягать воображение для придумывания названий функций. Такая возможность записи появилась в PHP 5.3, поэтому, если вдруг каким-то чудесный образом у вас более старая версия, не рекомендую так делать.

Ну а главная суть в этом примере – это 5-й параметр функции wp_register_script(), который равен true, а значит скрипт должен подключиться в футере! Этот параметр есть только у функций скриптов, потому что, что бы там не говорил пейджспид, перенос CSS в футер – это бред.

Купить курс

21 видеоурок
Можно скачать готовый код после каждого урока
Можно начать проходить курс сразу же после оплаты
Достаточно базовых знаний HTML и CSS, чтобы пройти курс
Единоразовый платёж
Доступ навсегда
Уроки актуальны в 2023-м году