Подключить файлы style css и normalize css в правильном порядке
Человеку с таким кодом работать удобно, а вот браузеру стилистика ни к чему. И стилистикой можно пожертвовать в угоду минификации. Минификация - это процесс удаления всего лишнего кода - пробелов и других символов. После минификации наш пример превращается в
Нам с таким кодом взаимодействовать сложно, но он и не для нас сделан, а для браузера. Также такой код весит гораздо меньше. Поэтому мы работаем форматированной версией, а браузеру отдаём минимизированную.
Для минификации можно использовать онлайн-минификатор, например
Расскажите о Normalize.css, как его использовать в проекте
Нормалайз - это сборник рецептов для улучшения кроссбраузерности стилей по умолчанию. Призван привести, визуально, разметку к одному виду во всех браузерах. Он это делает хорошо, но всегда нужно дорабатывать и полностью полагаться на normalize.css нельзя. Обязательно зайдите внутрь файла и попробуйте прочитать всё, что в нём написано. Также помните, что нормалайз нужно подключать правильно, до ваших стилей.
Чем псевдокласс лучше того же тега ?
Многим, но вы скорее всего имели ввиду псевдоэлементы. Различий на самом деле не много. В span вы можете положить много текстового контента, а в псевдоэлементы не получится сделать какую структуру, кроме как один span
Что такое адаптивный макет?кроссбраузерный?резиновый?
К макетам на самом деле ни один из этих терминов не подходит, а вот к вёрстке да.
Адаптивный - это значит, что ваша разметка и стили буду подстраиваться под устройство - смартфон, планшет, ноутбук, и т.д.
Кроссбраузерный - сайт выглядит идентивно во различных браузерах - Firefox, Safari, Chrome, и т.д.
Можно ли задать размер шрифта в зависимости от ширины экрана?
Да, можно, но так редко кто делает. Для этого используют относительные единицы измерения vw . vw - vieport width, те самые единицы, которые работают относительно отображаемой области экрана.
Повторюсь, так редко кто делает, так как шрифт увеличивается в зависимости от ширины экрана и может так получится, что он станет очень большой и регулировать его гораздо сложнее.
Можно ли писать в css что-то наподобие if..else?
Нет. В целом вы можете приставить себе этакий бинарный класс. Например, .active если он есть на элементе, то сделать что-то дополнительное.
"Чистый" и "Плоский" CSS? Прошу показать на примерах плохой стиль кодирования.
Плохим считается разнородный CSS. Обычно таким CSS-код становится, когда в команде не договорились о стандартах кодирования и все пишут как угодно.
Именование разное. Сортировка свойств разная. В целом, как только один кусок css-кода стилистически становится не похож на кусок сss-кода рядом, то этот код становится плохим.
Обычно в командах уже есть правила форматирования кода. Также есть много инструментов автоматизации, чтобы приводить код в единообразный вид с остальной командой. И поэтому таких проблем в современной вёрстке практически нет.
Псевдоэлементы ::after и ::before добавляют Строчные или Блочные элементы?
Почему не рекомендуется использовать свойства !important.
От такой записи проблем куда больше, чем полезности. Ведь такой свойство с !important куда сложнее переопределить. !important - стараются избегать, а если без него никак, то ещё несколько раз думают как сделать без него.
Что делать, если normalize.css конфликтует с моими стилями сайта?
Что делать, если normalize.css конфликтует с моими стилями сайта? Столкнулась с тем, что задаю размер шрифта для h1 21 px, но применяется значение 2em из normalize. Не нашла другого выхода, как закомментировать это правило в нормалайзе. Правильно ли так делать?
Обычно селеторы нормалайза достаточно просто переопределить. Ведь у нормалайза они со слабой специфичность. В вашей примере нужно было указать новое правило
Если у вас не получилось, значит вы не правильно подключили нормалайз. Его нужно подключить до вашего стилевого файла
CSS – это таблица стилей. От нее зависит то, как будет выглядеть ваш сайт, цвета в оформлении, шрифты, расположение элементов и т.п. Поэтому обойтись без CSS при создании сайтов и веб-приложений не получится. Важно уметь правильно использовать этот инструмент в ходе разработки своего проекта.
Вместо заключения
CSS бывает разным, и в некоторых ситуациях лучше использовать внешние стили, а в некоторых – прописывать их прямо в тегах с HTML-элементами. Вы поймете с опытом, какой метод лучше, и сможете варьировать методики в зависимости от используемых технологий. Главное – писать корректный CSS-код.
Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрим их подробнее.
Стандартное подключение к HTML
Нужно в HTML-файле добавить метатег link. Метатег link – тип ссылки – адрес файла со стилями.
HTML-файл автоматически соберет все стили из подключенного файла, опираясь на классы и другие параметры, указанные в разметке.
Другие способы
Некоторые фреймворки подразумевают использование CSS без CSS-файлов в их привычном виде. По такому принципу работает фреймворк TailwindCSS. Сразу после установки он автоматически становится доступен в приложении на глобальном уровне, а вам лишь остается использовать добавленные классы в любой части приложения без необходимости отдельно подключать CSS.
Также некоторые компонентные библиотеки, такие как Vue и Svelte, не требуют хранить стили в отдельной директории и двигают пользователя к использованию стилей внутри блоков .
Связанные стили
При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег . Данный тег помещается в контейнер , как показано в примере 3.1.
Пример 3.1. Подключение связанных стилей
HTML5 CSS 2.1 IE Cr Op Sa Fx
Значение атрибута тега — rel остаётся неизменным независимо от кода, как приведено в данном примере. Значение href задаёт путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.
Содержимое файла mysite.css подключаемого посредством тега приведено в примере 3.2.
Пример 3.2. Файл со стилем
Как видно из данного примера, файл со стилем не хранит никаких данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит только ссылку на файл со стилем, т. е. таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него.
Внутренние стили
Внутренний или встроенный стиль является по существу расширением для одиночного тега используемого на текущей веб-странице. Для определения стиля используется атрибут style , а его значением выступает набор стилевых правил (пример 3.4).
Пример 3.4. Использование внутреннего стиля
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере стиль тега
задаётся с помощью атрибута style , в котором через точку с запятой перечисляются стилевые свойства (рис. 3.2).
Рис. 3.2. Использование внутренних стилей для изменения вида текста
Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объём файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.
Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым имеет приоритет внутренний стиль, затем глобальный стиль и в последнюю очередь связанный стиль. В примере 3.5 применяется сразу два метода добавления стиля в документ.
Пример 3.5. Сочетание разных методов
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере первый заголовок задаётся красным цветом размером 36 пикселов с помощью внутреннего стиля, а следующий — зелёным цветом через таблицу глобальных стилей (рис. 3.3).
Рис. 3.3. Результат применения стилей
Вопросы для проверки
1. Сайт имеет более ста HTML-документов, имеющих одинаковое стилевое оформление. Какой способ подключения CSS подходит лучше всего?
- Связанные стили.
- Глобальные стили.
- Блочные стили.
- Внутренние стили.
- Экспорт стиля.
2. В данном примере, какой цвет будет у текста на веб-странице?
3. Какой HTML-код применяется для подключения внешнего CSS-файла?
4. Какой атрибут используется для определения внутреннего стиля?
Знаете, это как отвёртка и молоток — что лучше? Все хороши.
HTML хорош тем, что вы набросали тегов и всё — они сразу выглядят. И во всех браузерах всё примерно одинаково: чёрным Таймсом по белому , да с синими ссылками. Эх, красота! Но в том и дело, что почти: точные стили для всех элементов хоть и рекомендованы сегодня в HTML5, но в каждом браузере свои.
В HTML 4 было всего 78 строк стилей по умолчанию, вроде head < display: none >или text-decoration: underline для ссылок. В WebKit, Chrome и Firefox сегодня около 1000 строк стилей, в которые смело можно снаряжать археологическую экспедицию. Но мы не будем, у нас и так дел хватает.
Разработчикам долго не мешало это примерное соответствие стилей, к тому же браузеры старались их изредка улучшать и унифицировать. Проблема была в другом: все эти отступы, рамки, подчёркивания всегда не по дизайну и приходится их снова и снова отменять для каждого элемента. Но потом кто-то придумал ластик, первый сброс стилей.
Звёздочка выбирает все элементы, а дальше начинается: margin: 0 , padding: 0 , border: 0 , джоффри , серсея , фрей и все остальные свойства, которые мешают вам жить. Способ довольно варварский: не только потому, что выбирает элементы, которым ничего не нужно сбрасывать, но и потому, что некоторые стили лучше не трогать, иначе всё развалится — например, элементы форм.
Следующей попыткой сделать из HTML стерильный набор кубиков, стал CSS Reset из Yahoo UI, который сбрасывал стили только там, где это было нужно. Ещё большую популярность получил Reset CSS Эрика Мейера, сделанный по мотивам Yahoo UI. Эти ресеты не только сбрасывали отступы, но и приводили к единому значению размер и семейство шрифта, выравнивание для текста и другие свойства.
Между ресетами Yahoo и Мейера были различия: Эрик, например, разумно не трогал элементы форм. Было много других решений, но все они решали единую задачу — сделать из сложных стилей по умолчанию простой констуктор, чтобы вы сразу могли писать свои стили, не сбрасывая встроенные.
Эти ресеты никогда не были чистыми сбросами браузерных стилей: нет-нет, да назначались цвета, выравнивание, начиналась борьба за кроссбраузерность. В итоге все проекты несли печать предпочтений конкретных авторов. Самым нейтральным из ресетов до сих пор остаётся Reset CSS Мейера, но даже он убрал вредный :focus < outline: 0 >— и правильно сделал.
Многих ресеты раздражали: для внутренних блоков с содержимым приходилось восстанавливать стили не только для списков, но и базовых текстовых элементов вроде , , ``` и других. У Yahoo даже был CSS Base, который назначал правильные базовые стили. После ресета, который отменял неправильные. Почему бы и нет.
Николас Галлахер и Джонатан Нил зашли с другой стороны: вместо того, чтобы сбрасывать примерно одинаковые браузерные умолчания, они подробно изучили все различия и проблемы — и сделали Normalize.css. Он делает везде одинаково и решает много проблем по пути.
С Normalize вам снова приходится убирать отступы со списков. Многих это провоцирует использовать элементы попроще, но будьте внимательны — это чревато диватозом. Зато Normalize берёт на себя сложности оформления элементов форм, поведение мобильных браузеров и много мелких багов.
Видите? Совсем другую задачу решает проект. Я на днях видел сайт, на котором после Normalize.css подключают Reset CSS, чтобы оставить нормализацию, но при этом получить нейтральный конструктор. Это конечно глупости, которые приводят к распуханию глобальных стилей. Уж лучше собрать свой гибрид — кода там всего ничего.
Благо Normalize.css дотошно документирован: у каждого свойства стоит объяснение зачем оно нужно. В сомнительных местах, которые не нормализуют, а назначают более подходящие (по мнению авторов) умолчания — стоят пометки. Это помогает не просто слепо копировать его из проекта в проект, а использовать только нужные части.
Представьте, что вы в рамках проекта делаете модуль, который потом будет использоваться на другом сайте. У вас есть Normalize, а у них? Или наоборот: на ваш проект приходит сторонний модуль — а там нет Normalize и всё подогнано под браузерные баги, ну или особенности. Или даже есть Normalize, но другой версии. Так себе модульность получается.
А вот если бы вы сразу пошли в Normalize и скопировали нужные кусочки для каждой сложной ситуации — модуль бы вышел хороший, независимый. Normalize — это ещё и самая полная энциклопедия кроссбраузерных сложностей Да, это провоцирует лёгкое дублирование, но дарит гибкость — притом, что сжатие повторяющихся фрагментов — это хлеб с маслом для gzip.
Reset CSS не обновлялся с 2011 года, хотя до сих пор отлично работает. Но его эпоха уже прошла — на смену спешит новое свойство all со значением unset. Оно сбрасывает браузерные умолчания, где это нужно — почитайте на MDN. Normalize.css сейчас в моде и хорошо решает проблемы кроссбраузерности, но попробуйте использовать его как справочник. Ну так Reset или Normalize? Танцуйте от задачи.
Normalize мешает верстать. Кто нибудь верстает с ним? Он вообще нужен в наше время когда уже нет необходимости в IE?
Этот мой код не переписывает правила Normalize.
Даже когда написано вот так:
- Вопрос задан более года назад
- 331 просмотр
Простой 5 комментариев
Зачем? По вашему это удобнее стало? Чем? Зачем убивать дефолтные значения у всего?
Денис Инешин, дело в том что я делаю главную страницу с полным на всю экран контентом, а normalize оказывается добавляет к каждому h1,h2,h3,h4 свой margin 0.67em и делает мне расстояние на экране и дико этим раздражает.
А так я убиваю чтобы я сам смог бы поставить те значения какие мне нужны.
Alexander Lamdan, ну вот и ставь для своих h1,h2,h3,h4 эти стили. не нужно через * их ставить.
лучше всего оберни все свое творение в какую-то обертку и только внутри этой обертки обнуляй стили
Никто не мешает вам оставить в normalize только то, что вам нравится.
Или можете написать свои начальные стили.
не очень разумно, потому что совсем не всем элементам нужен 0.
Ещё хуже сначала брать нормалайз, а потом перебивать его нулями, а еще потом задавать свои стили. И браузеру развлечение и вы тратите время на странное.
Не использовать Normilize.
Кто-то верстает. Кто-то нет. Какая Вам разница? Решайте задачи так как удобнее именно Вам.
А так, если смотреть по тенденции, то сейчас всё меньше и меньше ими пользуются.
Дело было не только в ИЕ.
Никогда так не делайте. Это очень плохо по ряду причин. Допустимо только для box-sizing, но и то нужно задавать его правильно.
Вы вольны использовать любой ресеттер css, какой вам может показаться удобным. Их великое множество. Нет нужды зацикливаться на одном. В зависимости от задач и выдвинутых клиентом условий можно делать выбор в пользу того или иного решения.
Использовать normalize.css нормально, если вам нравится его философия. Если вам кажется, что вы начинаете с ним бороться, наверное, лучше сделать другой выбор.
Давайте посмотрим на верстку профессионально.
1. Мы подключаем нормалайз для того, чтобы получить одинаковые дефолтные значения во всех браузера (десктопных и мобильных)
2. Теперь можно начинать верстать.
Но! В мире профессиональной разработки вы не можете писать стили вида:
Если вы работаете в команде, такими стилями вы испоганите жизнь всем остальным да и себе в будущем.
По этому, профессионалы используют классы чтобы задавать стили только тем элементам, которым это нужно. Например используя концепцию BEM
тем самым сохраняя дефолтные значения не тронутыми, упрощая поддержку и разработку в дальнейшем и делая верстку предсказуемой.
inline-стили
Необязательно прописывать стили в отдельном блоке. Можно вовсе не использовать тег . Можно использовать одноименный атрибут.
Атрибуты представляют собой параметры, указываемые в HTML-элементах. class или id являются атрибутами. Если вы захотите поменять стиль для блока div, то после его класса нужно написать style и поочередно указать стили в формате CSS. В реальном коде это может выглядеть так:
Мы указали свойство flex у div-элемента и поменяли цвет текста внутри на синий.
Такой подход очень удобен, если нужно быстро скорректировать дизайн какого-то элемента или в череде одинаковых блоков с контентом выделить конкретный и стилизовать иначе. Применив стиль к одному div, все остальные вы не затронете. Если нужно более широко настроить стили, то придется все-таки использовать блок или отдельный файл с CSS-разметкой.
Настраиваем стили в отдельном CSS-файле
Это наиболее распространенный метод подключения CSS к сайту или приложению. Он используется как при работе с классическим стеком HTML/CSS/JavaScript, так и при подключении фреймворков в духе React.
Подключение производится по-разному в зависимости от используемых технологий.
Глобальные стили
При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте, в данном случае прямо на той же странице с помощью контейнера , как показано в примере 3.3.
Пример 3.3. Использование глобального стиля
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере задан стиль тега , который затем можно повсеместно использовать на данной веб-странице (рис. 3.1).
Рис. 3.1. Вид заголовка, оформленного с помощью стилей
Подключаем чужие CSS-стили
При желании чужие стили тоже можно использовать. В теге , например, вы указываете локальный адрес сайта, но можно туда вставить и ссылку.
Это может понадобиться в том случае, если вы хотите использовать нормализатор (специальный файл с CSS-кодом, который удаляет специфичные теги и свойства, пытаясь устранить все расхождения в работе разных браузеров).
Также внешние стили могут применяться с целью добавить единый стиль из какой-то общепринятой дизайн-системы (часто компонентной).
Деление стилей на группы
Размещение стилей в отдельных CSS-файлах не только упрощает редактирование стилей и управление ими, но и позволяет не увеличивать количество кода в одном документе.
Чтобы это сделать, можно воспользоваться любым из описанных выше методов, но повторить его несколько раз. Например, написать директиву import несколько раз, указав разные адреса. Или же добавить в список метатегов дополнительные ссылки на CSS-документы.
Подключение к фреймворку React
В React используется стандарт ECMAScript2015. Для работы с CSS используется директива import.
Импорт CSS
В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import . Этот метод допускается использовать совместно со связанными или глобальными стилями, но никак не с внутренними стилями. Общий синтаксис следующий.
После ключевого слова @import указывается путь к стилевому файлу одним из двух приведенных способов — с помощью url или без него. В примере 3.6 показано, как можно импортировать стиль из внешнего файла в таблицу глобальных стилей.
Пример 3.6. Импорт CSS
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере показано подключение файла header.css , который расположен в папке style.
Аналогично происходит импорт и в файле со стилем, который затем подключается к документу (пример 3.7).
Пример 3.7. Импорт в таблице связанных стилей
В данном примере показано содержимое файла mysite.css , который добавляется к нужным документам способом, показанным в примере 3.1, а именно с помощью тега .
Настраиваем стили в HTML
В HTML есть несколько глобальных тегов:
– в него оборачивается вся страница.
– в нем может храниться логика приложения или ссылка на отдельные скрипты.
– блок, где можно прописать CSS-разметку.
В блоке вы можете использовать все существующие свойства CSS. Менять цвет отдельных элементов страницы, обращаться к селекторам и менять их размер, делать медиа-запросы для создания адаптивной верстки и выполнять массу других задач.
В коде это может выглядеть так:
Мы применили CSS к странице. Дополнительно прикреплять стили к нашему сайту не нужно.
Подключение при помощи Webpack
Если в ходе разработки вы задействуете сборщик пакетов, то нужно зарегистрировать в нем специальный плагин. Например, css-loader, который преобразует все добавленные в него CSS-файлы в единый набор стилей, используемых в приложении.
Читайте также: