CSS3 — мобильные интерфейсы
Если вы когда-либо работали в Интернете более-менее продолжительное время с мобильного устройства, то, несомненно, обнаружили, что крохотный экранчик (каким бы большим он не был для мобильного устройства) — не лучшее окно в Интернет.
Конечно же, практически любую веб-страницу можно просмотреть, прокручивая ее во всех направлениях и масштабируя ее туда и обратно. Но вряд ли такой процесс будет способствовать получению положительного восприятия этой страницы. Ситуация намного улучшается, если вы заходите на сайт, разработанный специально для мобильных устройств, размер содержимого которого масштабируется под размеры экрана вашего устройства.
Опять же, создание отдельных версий сайта для каждого типа мобильного устройства не является единственным способом решения проблемы разных мобильных устройств. Другой подход — разработать код веб-сервера, который исследует каждый запрос, вычисляет, какой браузер подал этот запрос, и отправляет содержимое соответствующего формата. Такое решение, безусловно, великолепно, но только если у вас есть время и необходимые навыки.
Но было бы замечательно иметь простой механизм, который бы подстраивал стили вашей веб-страницы под разные типы устройств, не требуя для этого ни инфраструктуры веб-приложения, ни серверного кода.
Представляем . Эта возможность CSS3 предоставляет простой способ изменять стили веб-страницы для разных устройств и разных настроек просмотра. Аккуратное использование таких запросов может помочь вам предоставить свою веб-страницу любому устройству — от сверхширокого экрана домашнего компьютера до экрана смартфона iPhone. И все это без изменения ни единой строчки кода HTML.
Запросы о возможностях отображения
Принцип работы запросов о возможностях основан на получении ключевой информации об устройстве, на котором просматривается веб-страница, такой как, например, размер экрана, его разрешающая способность, возможности цветовоспроизведения и т.п. На основе этих сведений можно применять разные стили форматирования или даже подключать совершенно другие таблицы стилей. Результаты работы запросов о возможностях показаны на рисунках ниже:
Довольно интересно, создатели CSS пытались решить проблему разных типов устройств воспроизведения в CSS 2.2 с помощью типов носителей (media types). Вы, возможно, уже пользуетесь этим стандартом, чтобы предоставлять разные таблицы стилей для вывода содержимого на разные устройства, как показано в следующем коде:
Атрибут media также принимает значение handheld, предназначенное для мобильных устройств с экраном небольшого размера и низкоскоростным подключением. Большинство мобильных устройств пытаются обращать внимание на атрибут media и использовать таблицу стилей handheld, если такая имеется. Но этот подход изобилует разными огрехами, и возможности атрибута media весьма ограничены для работы с широким диапазоном устройств, подключенных к Интернету в настоящее время.
При использовании запросов о возможностях первое, что необходимо сделать, — это выбрать свойство, которое нужно исследовать. На рисунке выше ключевой информацией является свойство max-width, которое получает текущий размер страницы в окне браузера. Еще более полезным будет свойство max-device-width, которое проверяет максимальную ширину экрана. Если это значение небольшое, очевидно, что мы имеем дело со смартфоном или другим подобным устройством небольшого размера.
Чтобы использовать запросы о возможностях, легче всего начать со стандартной версии веб-сайта, а потом замещать определенные части разметки. В примере на рисунке выше содержимое страницы разбито на два блока:
А таблица стилей начинается с двух правил, по одному для каждого блока:
article < border: solid 1px black; padding: 15px; margin: 5px; background: yellow; float: left; width: 330px; >aside
Эти правила реализуют стандартную двухстолбцовую компоновку страницы, где колонка фиксированной ширины в 330 пикселов располагается слева, а плавающая боковая панель занимает все оставшееся пространство справа.
Фокус заключается в определении отдельной части таблицы стилей, которая активируется для определенного значения запроса о возможностях. Синтаксис этого определения следующий:
@media (имя-свойства-запроса-о-возможностях: value) < /* Новые стили вставляются сюда. */ >
В данном примере этот новый набор стилей активируется, когда ширина окна браузера становится 480 пикселов или меньше. Это означает, что в нашей таблице стилей нам требуется раздел, который выглядит так:
@media (max-width: 480px)
В настоящее время самыми популярными свойствами запросов о возможностях являются max-device-width (для создания мобильных версий веб-страниц), max-width (для применения разных стилей в зависимости от текущего размера окна браузера) и orientation (для изменения компоновки страницы, в зависимости от расположения устройства — горизонтального или вертикального).
Хотя внутри блока запроса о возможностях можно вставить все, что угодно, в этом примере просто добавляются новые правила таблицы стилей для элементов И :
@media (max-width: 480px) < article < float: none; width: auto; >aside < position: static; float: none; background: pink; margin-left: 5px; >>Эти стили применяются в дополнение к уже определенным обычным стилям. Поэтому может потребоваться сбросить уже измененные свойства в их значения по умолчанию. В этом примере стили запроса о возможностях присваивают свойству position значение static, свойству float — значение none, а свойству width — значение auto. Это значения по умолчанию, которые были изменены исходным правилом стиля для боковой панели.
Браузеры, которые не понимают запросов о возможностях, такие как Internet Explorer, просто игнорируют новые стили и применяют исходные стили независимо от размера окна браузера.
При желании можно добавить другой раздел запроса о возможностях, который замещает эти правила еще меньшим размером. Например, следующий блок активирует применение новых правил, когда окно браузера сужается до 250 пикселов:
@media (max-width: 250px)
Но не забывайте, что эти правила замещают все, что было применено до этого, иными словами, совокупный набор свойств, установленный обычными стилями и блоком стилей запросов о возможностях для ширины окна менее 450 пикселов. Если это кажется слишком заумным, не впадайте в отчаяние — мы научимся обходить это с помощью более точно определенных запросов о возможностях в следующем разделе.
Для определения мобильных устройств наподобие смартфонов нужно использовать свойство max-device-width, а не свойство max-width, т.к. свойство max-width использует размер окна просмотра (viewport) телефона, т.е. блока веб-страницы, который пользователь веб-фона может просматривать с помощью прокруток. Типичное окно просмотра вдвое шире собственно экрана устройства.
Продвинутые запросы о возможностях
Иногда желательно применить даже более специфичные стили, зависящие от нескольких условий, как показано в этом примере:
@media (min-width: 600px) and (max-width: 700px) < /* Замещаем стили для окон шириной 600-700 пикселов. */ >@media (min-width: 400px) and (max-width: 599.99px) < /* Замещаем стили для окон шириной 400-600 пикселов. */ >@media (max-width: 399.99px) < /* Замещаем стили для окон шириной до 400 пикселов. */ >Теперь для окна браузера шириной 380 пикселов будут применяться два набора стилей: стандартные стили и стили в последнем блоке @media. Ответ на вопрос, упрощает или усложняет этот подход работу разработчика, зависит от того, чего именно он желает добиться. Если вы используете сложные таблицы стилей и часто меняете их, показанный здесь подход неперекрывающихся стилей часто будет самым простым способом.
Обратите внимание, что необходимо быть осторожным, чтобы правила неожиданно не перекрывали друг друга. Например, если в одном правиле установить максимальную ширину в 400 пикселов, а в другом правиле указать те же 400 пикселов, но для минимальной ширины, то в одной точке обе настройки стилей будут совмещены. Слегка неуклюжим решением этой проблемы будет использование дробных значений, как значение 399.99 пикселов в примере выше.
Можно еще использовать ключевое слово not. Функционально, по сути, это такая же таблица стилей, но, может быть, более понятная:
@media (not min-width: 600px) and (max-width: 700px) < /* Замещаем стили для окон шириной 600-700 пикселов. */ >@media (not min-width: 400px) and (max-width: 600px) < /* Замещаем стили для окон шириной 400-600 пикселов. */ >@media (max-width: 400px) < /* Замещаем стили для окон шириной до 400 пикселов. */ >В этих примерах есть еще один уровень замещения стилей, который нужно иметь в виду, т.к. каждый раздел @media начинается не с правил стилей для запросов о возможностях, а с обычных правил таблиц стилей. В зависимости от ситуации, может быть предпочтительней полностью разделить логику стилей (например, чтобы мобильное устройство получило свой, полностью независимый набор стилей). Для этого нужно использовать запросы о возможностях с внешними таблицами стилей, как рассматривается далее.
Полная замена таблицы стилей
Блок @media удобен для небольших корректировок, т.к. он позволяет содержать все стили вместе в одном файле. Но для более значительных изменений может быть легче просто создать полностью отдельную таблицу стилей, а потом с помощью запроса о возможностях создать ссылку на нее:
Хотя браузер загрузит со страницей и вторую таблицу стилей, она не будет применена, если только ширина окна браузера не отвечает указанному минимуму.
Как и в предыдущем примере, новые стили будут замещать уже установленные стили. В некоторых случаях уместно использовать полностью отдельные, независимые таблицы стилей. Сначала к обычной таблице стилей нужно добавить запрос о возможностях, чтобы она применялась только для окон с большой шириной:
Проблема с этим подходом состоит в том, что браузеры, которые не понимают запросов о возможностях, будут игнорировать обе таблицы стилей. Эту проблему можно решить для старых версий Internet Explorer, опять добавив основную таблицу стилей, но в условных комментариях:
Но все равно остается один небольшой пробел — версии Firefox более ранние, чем 3.5, не понимают запросов о возможностях и не используют раздел условных комментариев. Этот пробел можно было бы заполнить, определяя браузер в коде страницы, а потом подменяя новую страницу посредством кода JavaScript, но это будет очень громоздкое решение. К счастью, старые версии Firefox встречаются все реже и реже.
Распознавание мобильных устройств
Как мы уже узнали, выяснить, где просматривается веб-страница — на экране обычного компьютера или мобильного устройства, можно с помощью запроса о возможностях отображения, содержащего свойство max-device-width. Но какие значения ширины следует использовать для этого свойства?
Если вы пытаетесь идентифицировать смартфоны, проверяйте свойство max-device-width на значение, равное 480 пикселам. Это наилучшее, общеприменимое правило, которое определяет существующие сегодня телефоны iPhone и Android:
Но если вы фанат железа, это правило может вызвать у вас подозрение, т.к. современные мобильные устройства оснащены крохотными экранами со сверхвысокой разрешающей способностью. Например, размер экрана Samsung Galaxy S4 — 1920×1080 пикселов. В связи с этим можно подумать, что для этих устройств нужно использовать большее значение ширины экрана. Но, как это ни удивительно, это не так. Большинство смартфонов продолжает сообщать, что ширина их экрана — 480 пикселов, даже если они в действительности оснащены экраном высокого разрешения. Это объясняется применением этими устройствами поправочного коэффициента, который называется соотношением пикселов (pixel ratio).
Например, в iPhone 4 каждому пикселу CSS соответствует в ширину два физических пиксела, т.е. соотношение пикселов равно 2. В действительности можно создать запрос о возможностях, который определяет iPhone 4, но игнорирует более старые версии iPhone:
A iPad представляет особую проблему: пользователи могут поворачивать его, сориентировав экран горизонтально или вертикально. Но хотя это меняет значение ширины окна max-width, значение ширины экрана max-device-width не меняется. Как и книжной, так и альбомной ориентации экрана iPad сообщает, что его ширина экрана равна 768 пикселов. К счастью, если требуется менять стили в зависимости от ориентации экран iPad, в запросах о возможностях свойство max-device-width можно применять совместно со свойством orientation:
Конечно же, это правило можно применять не только с устройствами iPad, но и с другими устройствами с подобными размерами экрана (в данном случае 768 пикселов или меньше).
Не подключаются стили .css к .html файлу при переносе проекта на смартфон с компьютера
Дело обстоит следующим образом: Я создал небольшой .html файл, подключил к нему .css стили. Реализовывал всё это на компьютере. Открывал файл через Yandex Browser, Mozilla Firefox — всё работает исправно, все стили подключены. Прописывал внутри .css файла @media запросы, которые применяют соответственные стили под ширину экрана. Собственно, решил проверить, как это всё будет работать на смартфоне. (К слову, все файлы скинул туда в том порядке и папках, как и на компьютере, значит всё подключено по правильным путям). Но когда уже на смартфоне я открываю этот .html документ через любой браузер (Yandex Browser для мобильных, Google Chrome для мобильных), то никакие стили там не отображаются (выглядит файл, как просто вёрстка на html, без css. Значит стили не подключены). Как это понимать и как решить данную проблему: ведь просто перенёс всё на смартфон, но уже нету подключения. Если я не полностью описал проблему, то скажите, что нужно дополнить в комментариях. Заранее спасибо Путь к .css файлу:
Только что все стили из .css файла на смартфоне помещал в:
Работает так то всё хорошо, но оставлять такие стили очень не хотелось бы. Да и вообще проблему решить хочется не таким способом. Не желательно бы все стили держать в одном файле .html. Как минимум это неудобно и не эргономично.
Как подключить css на телефоне
Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core
Последнее обновление: 31.10.2015
Учитывая особенности мобильных устройств — размеры, поддержку тех или иных стилей CSS и т.д. — может потребоваться определить какой-то особенный стиль для мобильных устройств.
В CSS2 уже было решение в виде правила media , которое позволяет указать устройство, для которого используется данный стиль:
Мобильный сайт .
Правило media=»handheld» указывает, что стили в mobile.css будут применяться к мобильным устройствам, в то время как правило media=»screen» применяется к десктопным сайтам.
Однако многие современные мобильные браузеры по умолчанию считают, что страница предназначена для десктопов, поэтому в любом случае применяет правило media=»screen» . Поэтому на подобное решение не стоит полагаться.
Для решения этой проблемы в CSS3 были введен механизм CSS3 Media Query. Например, чтобы применить стиль только к мобильным устройствам мы можем написать так:
Мобильный сайт .
Значение атрибута media screen and (max-device-width:480px) говорит нам о том, что стили из файла mobile.css будут применяться к тем устройствам, максимальная ширина экрана которых составляет 480 пикселей — то есть фактически это и есть мобильные устройства.
Как вариант, можно использовать правила CSS3 Media Query в самом файле css:
@media screen < body < background-color: red; >/*Далее остальные стили*/ > @media screen and (max-device-width:480px) < body < background-color: blue; >/*Далее остальные стили*/ >
К примеру настройка стилей под смартфоны, планшеты и десктопы может выглядеть так:
/*Стили только для смартфонов*/ @media screen and (max-device-width:480px) < body < background-color: blue; >/*Далее остальные стили*/ > /*Стили только для планшетов*/ @media screen and (min-device-width:481px) < body < background-color: red; >/*Далее остальные стили*/ > /*Стили только для десктопов*/ @media screen and (min-width:769px) < body < background-color: yellow; >/*Далее остальные стили*/ >
Применяемые функции в CSS3 Media Query:
- aspect-ratio : отношение ширины к высоте области отображения (браузера)
- device-aspect-ratio : отношение ширины к высоте экрана устройства
- max-width/min-width и max-height/min-height : максимальная и минимальная ширина и высота области отображения (браузера)
- max-device-width/min-device-width и max-device-height/min-device-height : максимальная и минимальная ширина и высота экрана мобильного устройства
- orientation : ориентация (портретная или альбомная)
Например, мы можем задать разные стили для разных ориентаций мобильных устройств:
/*Стили для портретной ориентации*/ @media only screen and (orientation: portrait) < >/*Стили ландшафтной ориентации*/ @media only screen and (orientation: landscape)
Таким образом, мы меняем лишь определение стилей в зависимости от устройства, а сами стили css по сути остаются теми же, что мы используем для создания обычных сайтов. Теперь посмотрим, как мы можем создавать мобильные приложения непосредственно на платформе ASP.NET MVC 4.
Как подключить css-файл: разбираемся в деталях
Как? Существуют разные способы подключения CSS-файла для добавления стилей на HTML-странице. Можно использовать тег style, написать отдельный файл или использовать JavaScript.
На что обратить внимание? От способа подключения зависит быстродействие страницы и еще ряд параметров. Отдельно стоит отметить, что при подключении нескольких стилей возможен конфликт приоритизации, поэтому важно сделать все правильно.
В статье рассказывается:
- Задачи подключения файла CSS
- Добавление CSS файла через теги
- Подключение CSS-файла через внешние таблицы
- Приоритеты стилей CSS
- Другие способы подключения CSS-файла
Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.
Бесплатно от Geekbrains
Задачи подключения файла CSS
HTML используется для разработки общего вида веб-страницы, а язык программирования каскадных стилей CSS определяет, как будут вести себя те или иные элементы. Сценарий CSS может быть размещен в виде отдельного файла или включен непосредственно в HTML .
Выбранный вариант размещения CSS влияет на скорость загрузки страницы, при этом существуют особенности для случаев использования нескольких решений. В частности, применение одновременно внешнего и инлайн-стиля, в которых указаны разные параметры, приведет к отображению свойств, прописанных в последнем. Он имеет более высокий приоритет, поэтому указание других значений тех же параметров во внешнем варианте сделает его неработоспособным.
Добавление CSS файла через теги
Подключение CSS при помощи внешнего файла стилей через тег link
Оптимальным вариантом формирования общего стиля страницы является указание параметров во внешнем сценарии CSS через тег . Для этого необходимо указать в разделе head страницы следующие значения:
В параметре href следует прописать URL адрес файла, в котором хранятся параметры CSS. Значения rel=»stylesheet» и type=»text/css» говорят о том, что соответствующий файл содержит таблицу стиля в виде CSS.
В принципе, для одной страницы можно задать несколько сценариев, хранящихся в разных файлах. Однако в этом случае возрастает как общий размер данных, который пользователю необходимо загрузить с сервера для отображения страницы, так и время для этого действия.
Подключение CSS через тег style
Такой алгоритм используется в случае, когда определённый стиль должен быть применён к отдельным частям страницы, и он не нужен для других разделов сайта.
Узнай, какие ИТ — профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Павел Симонов
Исполнительный директор Geekbrains
Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.
Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!
Скачивайте и используйте уже сегодня:
Павел Симонов
Исполнительный директор Geekbrains
Топ-30 самых востребованных и высокооплачиваемых профессий 2023
Поможет разобраться в актуальной ситуации на рынке труда
Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка
Только проверенные нейросети с доступом из России и свободным использованием
ТОП-100 площадок для поиска работы от GeekBrains
Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽
Получить подборку бесплатно
Уже скачали 23672
В произвольной области блока и HTML нужно включить тег , и уже в нем непосредственно прописываются необходимые параметры:
CSS стили для отдельного тега со значением style
Значение style применяется в том случае, когда требуется указать параметры стиля для отдельного элемента страницы. Инструкция выглядит следующим образом:
Такие варианты иначе еще именуют inline-стилями. В общем случае они получают более высокий приоритет в сравнении с параметрами, указанными в отдельном CSS через тег , однако есть частные случаи.
Применение Inline-стилей характерно и для тех случаев, когда содержание страницы корректируется при помощи визуальных редакторов WYSIWYG.
Стили CSS при помощи JavaScript
Сценарии, созданные на основе языка программирования JavaScript, можно встретить на всех современных сайтах. С помощью этого языка на основе библиотеки jQuery можно задать множество параметров, позволяющих подключить CSS-файл к HTML-элементам. Так, параметр .css() оправляет CSS-стиль для отдельного объекта, .hide() указывает на CSS-свойство display: none; (то есть скрытие объекта) и т. д.
При указании функции таким способом установки сценария указываются в style-атрибуте тега.
Внимательнее ознакомьтесь с примечаниями к коду, в которых объясняется, в связи с чем для каждого частного случая используется тот, а не иной способ подключения.
Сценарий для ряда моделей телефонов от Samsung.
Для вас подарок! В свободном доступе до 05.11 —>
Скачайте ТОП-10
бесплатных нейросетей
для программирования
Помогут писать код быстрее на 25%
Чтобы получить подарок, заполните информацию в открывшемся окне
Подключение CSS-файла через внешние таблицы
Внешние сценарии стилей указываются в файле с расширением .css. Их можно написать даже в стандартном Notepad. Для подключения файла стилей CSS нужно лишь указать корректное расширение. Инструкции, указанные в нем, аналогичны тем, которые заданы для инлайн-стиля и содержатся в разделе между открывающим тегом
:
Таким образом, в файле CSS можно указывать инструкции, заданные в инлайн-стиле. Аналогичным образом параметры, написанные для приукрашивания, дублируются в файле сценария CSS. Стили, указанные в отдельном файле, при этом могут использоваться для указания параметров, предназначенных для нескольких страниц или даже для всего сайта.
В HTML-файле необходимо указать вместо тегов путь, по которому размещается внешний файл CSS. Он пишется сразу после тега (), где в предыдущем случае указывались внутренние параметры стиля.
Инструкция будет иметь следующий вид:
Дарим скидку от 60%
на обучение «Инженер-программист» до 05 ноября
Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей
В описываемом случае отсутствует путь к сценарию styles.css, так как последний размещен в одной директории с HTML. В других случаях нужно обязательно указывать полный либо относительный path к файлу стилей в другой директории или на ином сервере. В нашем примере можно ограничиться путём, в котором прописывается лишь название папки со сценарием.
Огромное преимущество внешних таблиц стилей состоит в том, что они могут использоваться для неограниченного числа веб-страниц и сайтов. Следовательно, можно изменением одной инструкции в файле .css задать новые параметры для десятков разделов ресурса. Это гораздо быстрее и удобнее, чем в каждой странице указывать собственный инлайн-стиль.
Чтобы применить параметры стороннего файла стиля к своей странице, напишите в ней абсолютный путь к соответствующему сценарию:
Несмотря на все удобства, очевидно, что при таком способе пользователь оказывается зависим от автора указанного в HTML сценария. Если скрипт будет изменен или удален, ссылка на таблицу окажется неработоспособной. Рекомендуется копировать файл .css на собственный сервер, тогда дизайн страницы не будет зависеть от действий сторонних пользователей.
Приоритеты стилей CSS
Вопрос о приоритетах актуален постольку, поскольку разные значения одной и той же функции могут быть указаны в сценарии на стороннем либо на собственном сервере, в блоке в head страницы, в стиле style в самом документе. Чтобы понять, какое из значений будет использовано, рассмотрим условный вес каждого параметра. Если стиль указан:
- непосредственно в теге (inline-способ): 1 000 условных единиц.
- в или в стороннем файле, обращение по id: 100 у. е.
- в или в стороннем файле, запрос по class: 10 условных единиц.
- в или в стороннем файле, запрос по наименованию тэга (p, h1 и так далее): 1 у. е.
Только до 2.11
Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней
Список документов:
ТОП-100 площадок для поиска работы от GeekBrains
20 профессий 2023 года, с доходом от 150 000 рублей
Чек-лист «Как успешно пройти собеседование»
Чтобы зарегистрироваться на бесплатный интенсив и получить в подарок подборку файлов от GeekBrains, заполните информацию в открывшемся окне
В случае, когда селектор имеет несколько указаний (допустим, класс + тег), то условные веса суммируются, в нашем случае – 10 + 1 = 11. Когда браузер получает инструкции от нескольких сценариев, то применяется тот, который имеет больший условный вес. При равенстве показателей используется тот, который описан позднее других.
Таким образом, при использовании двух сценариев:
Если в каждом содержится запрашиваемый браузером параметр, будет использовано значение в файле на собственном ресурсе. А когда в одном сценарии есть два равнозначных значения, применится то, которое указано ниже.
Освойте новую интересную профессию Frontend-разработчика. Всё, что нужно для старта: основы веб-разработки и создания пользовательских интерфейсов для сайтов и приложений. Вы научитесь проектировать, разрабатывать и тестировать фронтенд-часть проектов, используя современные технологии и инструменты. Присоединяйтесь к команде преподавателей и студентов. Ваш профессиональный успех начинается здесь и сейчас.
Изменить значения приоритетов поможет приложение !important. Можно принять вносимые им изменения за + 10 000 условных единиц к весу. Однако здесь есть важный нюанс. При использовании нескольких стилей с !important, их приоритет может выглядеть как 10 001 и 10 010, то есть сформируется собственная их система, помимо уже установленной.
Соответственно, нужно очень осторожно делать эти манипуляции, если требуется исправить только одну ошибку. Если же возникает необходимость в использовании !important для более чем одного бага, можно с уверенностью заключить, что какие-то исходные параметры заданы неверно.
Другие способы подключения CSS-файла
Существуют фреймворки, которые используют CSS без применения CSS-сценариев в их традиционном формате. Одним из примеров таких стилей является TailwindCSS. По завершении инсталляции он сразу может использоваться в приложении на глобальном уровне. Пользователю нужно лишь указать добавленные классы в произвольной области приложения, отдельного подключения сценария не требуется.
Ряд компонентных библиотек, в частности, Vue и Svelte, не нуждаются в хранении стилей в собственной папке и ориентируют на использование сценариев непосредственно в разделе
Как видите, нельзя однозначно сказать, как лучше подключить CSS-файл к сайту. В одних случаях целесообразней использование инлайн-стиля, в других – ссылки на внешний файл. В любом случае для работоспособности кода следите за тем, чтобы все инструкции указывались правильно, а наилучший инструмент для себя вы выберете сами по мере накопления опыта.