Почему не подключается css к jsp
Перейти к содержимому

Почему не подключается css к jsp

  • автор:

Почему не подключается файл со стилями к jsp?

введите сюда описание изображения

Каталог проекта: Пытался также подключить стили из resources но из-за того, что web-папка не лежит в src их вообще не видно оттуда. Если можно указать папку с ресурсами в spring-mvc, то подскажите как? Я пытался указать ресурсы через , но значение location выделяется красным и все, опять же из-за расположения WEB-INF.

Отслеживать

задан 3 мар 2019 в 14:42

Maksim Ohotnikov Maksim Ohotnikov

258 3 3 серебряных знака 21 21 бронзовый знак

вы хоть в какой jsp подключаете?

3 мар 2019 в 15:13

Очевидно, что такого пути href=»$/WEB-INF/css/styles.css» быть не может ! Может быть например такой href=»css/styles.css» . Собери варник и посмотри куда твои ресурсы кладутся (может и не кладутся вовсе)

3 мар 2019 в 16:15

@michael_best, в bookmarks.

3 мар 2019 в 17:19

@keekkenen, href=»css/styles.css» я сначала так и написал, но мне компилер начал подчеркивать. Такой путь — href=»$/WEB-INF/css/styles.css» (я же беру как бы корень web-папки и прописываю абсолютный путь) не подчеркивает, но стили не подключаются. Я прописывал относительный путь от bookmarks ../css/styles.css , но стили так же не подключались, но компилятор пропускал

Как работает CSS

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

Необходимые знания: Основы компьютерной грамотности, базовое программное обеспечение, умение умение работать с файлами и начальные знания HTML (рекомендуется изучить Введение в HTML).
Задача: Понимать основы того, как браузер анализирует CSS и HTML и что происходит когда браузер встречает неизвестные CSS стили

Как работает CSS?

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

  1. Браузер получает HTML-страницу (например, из Интернета)
  2. Преобразует HTML в DOM (Document Object Model). DOM (или DOM-дерево) — это представление страницы в памяти компьютера. Подробнее на DOM мы остановимся чуть позже.
  3. Затем браузер забирает все ресурсы и описания, связанные с HTML-документом, например: встроенные картинки, видео . и стили CSS! JavaScript присоединяется чуть позже и мы пока не будем говорить об этом, чтобы все не усложнять.
  4. После этого браузер анализирует полученный CSS код, сортирует описанные там правила в зависимости от их селекторов и раскладывает их в различные «корзины»: элементы, классы, идентификаторы(ID) и т.п. Основываясь на найденных селекторах браузер понимает какие правила относятся к определённым «узлам» в DOM-дереве и применяет их по мере необходимости (этот промежуточный шаг называют «формированием дерева представления» или «формированием дерева рендеринга»)
  5. Дерево представления (render tree) формируется в том порядке, в каком оно затем должно будет отображаться, когда все правила будут применены.
  6. Затем происходит визуальное отображение контента на странице (этот этап называется «отрисовкой»)

Диаграмма демонстрирует этот процесс.

DOM-дерево

DOM напоминает дерево. Каждый элемент, атрибут, отрывок текста становится DOM node (en-US) в разметке. DOM-узлы определяются их отношением с другими узлами. Некоторые родительские элементы имеют дочерние, а у дочерних элементов есть братские.

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

Как представлено DOM-дерево

Вместо длинного, нудного объяснения взглянем лучше на пример, чтобы понять, как HTML-код преобразуется в DOM.

Возьмём следующий пример:

p> Let's use: span>Cascadingspan> span>Stylespan> span>Sheetsspan> p> 

В DOM-дереве узел, соответствующий элементу

, — это родительский элемент. Его дочерние элементы — текст и три элемента . Узлы SPAN также будут родителями — с текстом в качестве дочерних элементов:

P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets"

Вот как браузер преобразует HTML-код — он загружает DOM-дерево, и в результате мы получим это:

p  margin: 0; > 

Добавление CSS в DOM

Допустим, мы добавили таблицу стилей к нашему примеру:

p> Let's use: span>Cascadingspan> span>Stylespan> span>Sheetsspan> p> 
span  border: 1px solid black; background-color: lime; > 

Браузер загрузит HTML-код, преобразует его в DOM и только потом загрузит CSS. Так как у нас всего одно правило, браузер загрузит CSS очень быстро! Это правило будет добавлено к каждому из трёх элементов . После этого информация будет отображена на экране.

В статье Отладка CSS мы будем использовать браузер DevTools для отладки CSS.

Что происходит, когда браузер не понимает CSS?

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

— Да ничего: браузер просто пропустит это!

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

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

Ниже я использовал британское написание слова color, что делает свойство некорректным. Поэтому текст не будет синим. Однако всё остальное будет работать; пропущено только недействительное свойство.

p>I want this text to be large, bold and blue.p> 
p  font-weight: bold; colour: blue; /* некорректное написание свойства цвета */ font-size: 200%; > 

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

Это хорошо применяется, если вы хотите использовать величину, не использующуюся везде в документе. К примеру, некоторые старые браузеры не поддерживают calc() как значение. Я добавлю резерв — значение в px, затем задам ширину с помощью функции calc() , равной 100% — 50px . Старые браузеры используют пиксельное значение, потому что не распознают calc() . Новые браузеры используют calc() так как эта строка появляется позже в каскаде.

.box  width: 500px; width: calc(100% - 50px); > 

Завершение

Вы почти закончили модуль; осталось только одно. В следующей статье вы попрактикуетесь в использовании ваших новых знаний.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 2 дек. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Загрузка внешнего CSS-файла в body вместо head: допустимо ли?

Если требуется подключить внешний CSS-файл внутри тега , рекомендуется использовать JavaScript для динамического создания элемента link :

Скопировать код

// Всё на самом деле проще, чем может показаться на первый взгляд var cssLink = document.createElement('link'); cssLink.rel = 'stylesheet'; cssLink.href = 'stylesheet.css'; // Укажите путь до вашего файла document.body.appendChild(cssLink);

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

Преимущества и недостатки использования в теле документа

Традиционные подходы

Стандартной практикой является расположение тега внутри HTML-документа для загрузки CSS. Это служит защитой от возникновения FOUC (вспышки неоформленного содержимого).

Отход от стандартов и осторожность

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

Гибкость и компромиссы

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

Исследование новых подходов

Усложнение картины

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

Влияние на производительность

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

Обоснованное отклонение от правил

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

Рассмотрение альтернативных вариантов для динамического изменения стилей

Async и defer

Атрибуты async или defer в тегах script предоставляют возможность асинхронной загрузки CSS и позволяют избежать замедления отображения страницы при загрузке стилей.

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

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

Обновлено: 2023-06-12 20:05:38 Вадим Дворников автор материала

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

Рассмотрим некоторые из наиболее часто используемых методов подключения 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. Но у каждого из них есть свои достоинства и свои недостатки.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *