html — Как правильно подключить стили для мобильной версии сайта
Есть сайт который написан для десктопов, теперь нужно сделать его респонсив для мобильных устройств, я делаю
@media screen and (max-width: 800px) {
* {
display: block; /* просто проверка */
}
}
Моя проблема в том, что такие стили не применяюся без !important, я понимаю, так происходит поскольку стили которые я пишу с медиа-запросом не «покрывают» стили десктопной версии, а отображаются вместе с ними. Как правильно подключить .css для мобильной версии сайта чтобы подключались только они, а не вместе со стилями десктопа? Подключаю стили вот так: <link rel="stylesheet" href="css/style.css"> style.css выглядит так:
... Код для десктопа
@media screen and (max-width: 800px) {
* {
display: block; /* просто проверка */
}
}
Вот весь файл стилей style.css. Стили на 500 строк, поэтому подумал, что файл на хостинге будет лучше
P.
S. Я пишу стили с медиа запросом в файле с десктопными стилями, понимаю что плохо, но как сделать иначе не знаю
P.S.S. Ответы которые я находил гуглив свой вопрос были 3-8 летней давности, я подумал что что-то да могло поменяться
- html
- css
4
Если нужно в одном файле всё написать, и чтобы десктопные стили не применялись на мобильнике, то сделайте ограничение стилей для десктопа:
@media screen and (min-width: 801px) {
... тут десктопные стили
}
@media screen and (max-width: 800px) {
... тут мобильные стили
}
Если же нужно только некоторые стили перебить, а не отключить десктопные совсем, то вам в любом случае придётся делать их более специфичными — добавлять вложенность в селектор или делать !important.
Если нужно не в одном файле, то подключайте стили в шапке HTML-страницы сразу с указанными условиями:
<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 801px)"> <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 800px)">
css" rel="stylesheet" media="screen and (min-width: 801px)">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 800px)">
2
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Внешние таблицы стилей CSS — как подключить
Мы создаем внешние каскадные таблицы стилей в отдельных документах, давая им расширение «.
css». Внешняя каскадная таблица стилей представляет собой простой список правил.
Она не содержит HTML-тегов. CrashCourse/Demos/Stylesheet.css — пример.
.warning {color:#ff0000}
h2.warning {text-decoration:underline}
p.warning {font-weight:bold}
Мы можем подключить указанный CSS-файл к любому количеству страниц HTML. Тег <link>, который размещается в верхней части HTML-страницы, ссылается на внешнюю каскадную таблицу стилей.
Пример кода
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>External Style Sheet</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> </head> <body> <h2>WARNING</h2> <p>Don't go there!</p> </body> </html>
| Атрибуты | Описание |
|---|---|
| href | указывает на местонахождение внешней каскадной таблицы стилей |
| rel | атрибут должен устанавливать значение “stylesheet” для ссылки на таблицу стилей |
| type | должно быть установлено “text/css” для ссылки на таблицу |
Количество внешних каскадных таблиц, которые может использовать страница HTML, неограниченно.
Более того, мы можем объединять внешние таблицы стилей, используя технику внедрения стилевых таблиц.
Встроенные стили
Мы создаем встроенные стили, добавляя тегам атрибуты стиля. Так же как и в случае с классом или атрибутами идентификатора (id), большинство элементов могут иметь стилевые атрибуты.
Значения атрибута стиля разделяются точкой с запятой. Образец кода ниже демонстрирует применение встроенного стиля:
Образец
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Inline Styles</title> </head> <body> <p>Common Greetings</p> <ul> <li>Hello</li> <li>Hi</li> <li>Howdy</li> </ul> </body> </html>
[ads-pc-1]
[ads-mob-1]
youtube.com/embed/8hV7YMfVApw» frameborder=»0″ allowfullscreen=»»/>Оцени статью
Средняя оценка 0 / 5. Количество голосов: 0
Видим, что вы не нашли ответ на свой вопрос.
Помогите улучшить статью.
Напишите комментарий, что можно добавить к статье, какой информации не хватает.
Найти:Сайдбар
Комментарии (0)
Импорт таблиц стилей | Стиль и темы | Поток
- Предпосылки
- Пример
- Глобальные стили
- Стили компонентов
Импорт дополнительных таблиц стилей для настройки тем компонентов и стилей представлений приложений.
Предварительные условия
Вы должны быть знакомы с областями стилей, чтобы знать, нужно ли импортировать таблицу стилей в глобальную область или в область компонента.
Чтобы узнать, как обрабатываются статические ресурсы, в том числе о том, где в проекте следует размещать файлы CSS, см. раздел Хранение и загрузка ресурсов.
Пример
В представлениях на стороне сервера (Java) используйте аннотацию @CssImport для импорта локальных/связанных таблиц стилей и аннотацию @StyleSheet для импорта внешних/связанных таблиц стилей.
Аннотацию @CssImport также можно использовать для импорта таблиц стилей для конкретных компонентов.
// Импорт таблицы стилей в глобальную область видимости
@CssImport("./styles/shared-styles.css")
// Импортируем таблицу стилей в локальную область видимости компонента TextField
@CssImport (значение = "./styles/text-field.css",
themeFor = "ваадин-текстовое поле")
// Ссылка на внешние таблицы стилей
@StyleSheet("контекст://custom-font.css")
@StyleSheet("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css")
открытый класс MyApplication расширяет Div {
} Глобальные стили
Существует два способа импорта таблиц стилей в глобальную область:
Локальные/связанные таблицы стилей, которые загружаются вместе с интерфейсным пакетом приложения вместе со всем JavaScript.
Внешние/связанные таблицы стилей, которые не связаны с интерфейсным пакетом приложения, но загружаются и кэшируются браузером отдельно.
Локальные таблицы стилей
Локальные/связанные таблицы стилей встраиваются в пакет приложения во время производственной сборки вместе с другими ресурсами на стороне клиента. Объединение рекомендуется для стилей, которые изменяются вместе с логикой приложения или реализацией компонентов, поскольку браузер может кэшировать их как единое целое, состоящее из тесно связанных ресурсов.
В представлениях на стороне сервера (Java) аннотация @CssImport будет обрабатывать весь шаблон для вас, вам нужно только сослаться на обычный файл CSS.
Осторожно | Аннотация @CssImport не работает в режиме совместимости Vaadin 14 (импорт Bower и HTML). |
// Импорт таблицы стилей в глобальную область видимости
@CssImport(". /styles/shared-styles.css")
открытый класс MyApplication расширяет Div {
} 
/styles/shared-styles.css")
открытый класс MyApplication расширяет Div {
} Внешние таблицы стилей
Внешние/связанные таблицы стилей можно использовать для импорта стилей без встраивания содержимого в комплект приложения. Это позволяет браузеру загружать и кэшировать таблицу стилей отдельно от остального приложения.
Внешние таблицы стилей должны быть доступны по URL-адресу и, следовательно, должны быть помещены в общую папку ресурсов в вашем веб-приложении. Они также могут поступать извне вашего веб-приложения, например, из другого домена или сети доставки контента (CDN).
В представлениях на стороне сервера (Java) аннотацию @StyleSheet можно использовать для импорта таблиц стилей с внешнего URL-адреса или с URL-адреса в вашем приложении. URL-адреса последнего типа имеют префикс context:// , который указывает на корень папки общедоступных ресурсов вашего приложения.
// Ссылка на внешние таблицы стилей
@StyleSheet("контекст://custom-font. css")
@StyleSheet("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css")
открытый класс MyApplication расширяет Div {
} 
css")
@StyleSheet("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css")
открытый класс MyApplication расширяет Div {
} Осторожно | Правила CSS во внешних таблицах стилей не защищены от переопределения стилей, специфичных для компонентов, в браузерах без встроенной инкапсуляции стилей (теневой DOM), а именно в Internet Explorer 11. Используйте локальные таблицы стилей в тех случаях, когда это может быть проблемой, например при включении CSS, который не поддерживается вами. |
Стили компонентов
Эти инструкции относятся к компонентам, использующим ThemableMixin , включая все компоненты Vaadin.
Стили компонентов ограничены областью действия каждого компонента и позволяют настраивать компоненты, не беспокоясь о побочных эффектах для других частей приложения.
Стили компонентов всегда встроены в пакет приложения — они не могут быть внешними/связанными таблицами стилей.
Таблицы стилей на уровне компонента применяются ко всем экземплярам компонента во всем приложении.
В представлениях на стороне сервера используйте @CssImport аннотация.
Обратитесь к файлу .css и укажите имя тега/элемента компонента, к которому вы хотите применить таблицу стилей.
// Импортируем таблицу стилей в локальную область видимости компонента TextField
@CssImport (значение = "./styles/text-field.css",
themeFor = "vaadin-text-field") Вы можете использовать одну и ту же таблицу стилей для нескольких компонентов одновременно, предоставив список имен компонентов, разделенных пробелами, вместо одного имени компонента. Также поддерживаются имена элементов с подстановочными знаками, например, vaadin-*-оверлей .
@CssImport (значение = "./styles/shared-overlays.css",
themeFor = "vaadin-select-overlay vaadin-combo-box-overlay") C8AD563D-0B35-4BA2-B81F-C73BD3FC488E
Как использовать CSS для оформления R Shiny Dashboards
6 Обновлено февраль:6 , 2022.
Сколько раз вы открывали веб-сайт только для того, чтобы тут же закрыть его из-за ужасных визуальных эффектов? Слишком много. Как разработчик, вы несете ответственность за то, чтобы ваши приложения было легко просматривать. В этой статье вы узнаете, как использовать CSS для оформления панелей мониторинга R Shiny.
CSS — это мощный инструмент для улучшения ваших приложений R Shiny, и его довольно легко освоить. Самое сложное — придумать удивительный дизайн пользовательского интерфейса, так что именно на это вы потратите большую часть своего времени.
Вы опытный пользователь CSS? Прочтите эту статью, чтобы узнать, как использовать SASS в приложениях R Shiny.
Содержание:
- Что такое CSS и почему вы должны заботиться о нем как о разработчике R Shiny?
- Зачем использовать CSS? Сравнение до и после
- Как использовать CSS в R Shiny?
- Заключение
Хотите узнать больше о CSS в Shiny и предпочитаете видео? Вам повезло:
youtube.com/embed/nl0LBU9qbuc» frameborder=»0″ allowfullscreen=»»> Что такое CSS и почему вы должны заботиться о нем как о разработчике R Shiny?
CSS означает каскадных таблиц стилей . Он описывает, как HTML-элементы должны отображаться на веб-сайте или в веб-приложении. Каждый документ CSS (либо в отдельном файле .css , либо встроенный в элемент заголовка HTML-документа) представляет собой серию инструкций или утверждений.
Каждый оператор CSS состоит из двух частей — селекторов для элементов и соответствующего набора правил. Часть вне скобок указывает, какие элементы будут затронуты, а часть внутри скобок перечисляет правила, которые будут применяться.
Концепция лучше всего представлена на следующем изображении:
Изображение 1. Как работает CSS
Самое большое преимущество использования CSS заключается в том, что вы можете один раз написать набор правил и применить его к нескольким HTML-документам.
Например, в Изображение 1 вы видели элемент .vestColor . Вы можете добавить атрибут класса .vestColor к любому тегу HTML в любом документе HTML, и будут применяться те же стили, если вы добавили ссылку на этот документ CSS.
Легко, правда? Правильно.
Frontend-разработчики — не единственные ИТ-специалисты, которые должны заботиться о CSS. Каждый разработчик R Shiny также должен знать основы CSS/SCSS. Никто не хочет использовать нестилизованную панель инструментов — это ужасный опыт для ваших пользователей. Обязательно используйте CSS с умом, чтобы выделить нужные элементы, структурировать приложение, а также сделать его удобным для мобильных устройств.
Зачем использовать CSS? Сравнение до и после
Теперь вы знаете, что такое CSS и почему он важен для информационных панелей и приложений R Shiny. Но как насчет реальных примеров? Мы покажем вам разницу между панелью инструментов со стилями CSS и без них.
Вот выбранная панель инструментов — наша демонстрационная панель Shiny Enterprise — сначала без CSS:
Изображение 2 — демонстрационная панель Shiny Enterprise без CSS
Диаграммы выглядят нормально, но только потому, что они оформлены и настроены в отдельном файле R, и не в CSS. Другие элементы, такие как выпадающие списки, текст и значки, выглядят ужасно. Добавление стилей сильно помогает:
Изображение 3. Демо-панель Shiny Enterprise с CSS
Уверяем вас — это та же самая панель. Очевидно, что CSS позволяет нам создавать гораздо более визуально привлекательные продукты. CSS так же стар, как и сам HTML, но он по-прежнему остается очень полезным, вносит порядок в процесс разработки и экономит время.
Как использовать CSS в R Shiny?
Теперь остается вопрос: как я могу добавить CSS на свои информационные панели R Shiny? В настоящее время существует три способа добавления CSS в ваши приложения Shiny:
- Добавление стилей непосредственно в HTML-теги
- Добавление CSS в заголовок HTML
- Добавление таблиц стилей в каталог
www
Последний вариант предпочтительнее.
Вы всегда должны добавлять файлы CSS в каталог www при создании приложений R Shiny . Однако два оставшихся способа могут быть полезны в определенных ситуациях и знать их не помешает, как для личных проектов, так и при обзоре работ других разработчиков.
1. Добавляйте стили непосредственно в теги HTML
Этот подход работает, но есть два недостатка. Во-первых, в больших проектах с большим количеством кода легко потерять стили CSS. Во-вторых, вы не можете повторно использовать их для разных объектов. Если вы планируете использовать элемент более одного раза, вам придется повторить стиль.
2. Добавить CSS в заголовок HTML
Небольшое улучшение по сравнению с первым подходом, но не оптимальное решение. Вы определяете стили вне реальных HTML-элементов. Однако, поскольку вы все еще делаете это в коде, а не используете отдельный файл, вы не можете использовать кеш и оптимизировать приложение. Поэтому вам все еще не хватает некоторых опций, которые делают CSS особенно полезным.