Просмотр уровня приоритета стиля CSS

Каскадная таблица стилей (CSS) Я думаю, что это самый простой язык по сравнению с другими языками, связанными с Интернетом, поэтому неудивительно, что многие люди, которые только начинают изучать, как создать сайт, в основном изучают этот язык и HTML в первую очередь..

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

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

Стили браузера по умолчанию

Firefox, Chrome, Safari, Opera и Internet Explorer в настоящее время входят в пятерку лучших настольных браузеров на рынке. Эти браузеры и все другие браузеры следуют стандартному правилу, чтобы включить встроенные стили по умолчанию для отображения элементов HTML.

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

Но, если мы тщательно проверяем эти элементы, каждый из браузеров имеет (немного) разные значения для своих “дефолт” декларация, которая приводит к несогласованности между браузерами, особенно в старых, таких как IE6, 7 и Firefox 3.0.

Например, как вы можете видеть на приведенном выше снимке экрана, новейший Firefox отобразил BLOCKQUOTE по умолчанию с маржа: 16px 40px 16px 40px, в то время как на другой стороне Internet Explorer 7 окажет BLOCKQUOTE с маржа: 0px 40px.

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

Доступно множество сбросов CSS, но вот три моих самых любимых:

Normalize.css
CSS Reset
HTML5 Сбросить таблицу стилей

Селекторы

Вы, вероятно, часто читаете этот термин в блогах веб-дизайна / разработки, которые вы посетили; Селекторы.

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

Тип выбора

Как мы уже упоминали выше, селектор типа нацеливается на любые указанные элементы HTML в документе. Например:

 p / ** декларация ** /

будет соответствовать всем п или параграф элементы и использование его в конечном итоге перезапишет стили по умолчанию, заданные в браузерах.

Класс выбора

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

 .коробка / ** декларация ** /

Приведенный выше фрагмент будет соответствовать всем элементам, которые имеют класс box, или мы также можем выбрать более конкретно.

 p.box / ** объявление ** /

Он будет нацелен только на п элемент, который имеет коробка учебный класс.

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

Селектор идентификаторов

Я БЫ это очень ограничительный атрибут, мы можем иметь только один Я бы на элемент, и он также должен быть уникальным.

 содержание

Если у нас есть Я бы в элементе, мы можем использовать селектор идентификаторов нацелиться на этот элемент; селектор идентификатора определяется с помощью хэша # параметр.

 #uniqueID / ** объявление ** /

Так как Я БЫ является уникальным, он имеет самый сильный уровень приоритета типа селектора. Итак, когда мы объявляем стили с Я БЫ селектор это в конечном итоге перезапишет все то же объявление из Учебный класс, Тип селекторы и тому Браузер по умолчанию стили.

Встраивание стилей

Мы прошли все основные базовые селекторы и теперь рассмотрим, как эти стили встроены в HTML-документ..

Внешние стили

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

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

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

Таким образом, стилями также будет легко управлять, например, вы можете разделить CSS-файлы на несколько файлов в зависимости от их конкретной роли, например typography.css, чтобы контролировать все стили, связанные с типографикой и т. Д..

Внутренние стили

Внутренние стили - это стили, встроенные непосредственно в документ HTML, как правило, внутри тег.

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

В зависимости от уровня приоритета внутренний стиль выше, поэтому он будет перезаписывать внешние стили.

Встроенные стили

Встроенные стили - это стили, которые непосредственно встроены в элемент HTML.

Это абзац

Этот пример выше добавит 5px поле для элемента абзаца, и оно также перезапишет поля, объявленные для этого элемента, как во внутреннем, так и во внешнем стилях..

Но избегайте этого, поскольку ваша разметка будет загромождена всеми этими объявлениями стиля; если у вас есть набор стилей, это даже станет кошмаром, чтобы увидеть и поддерживать все ваши HTML и стили.

дальнейшее чтение: Три способа вставить CSS - W3CSchools.

Важное правило!

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

У нас есть следующий тег привязки со встроенными стилями

 Это ссылка

И у нас также есть отдельный стиль для этого тега привязки в таблице стилей.

 граница: 1px solid # 333; цвет фона: # 555;

В этом примере мы можем использовать !важный правило, заставляющее браузер использовать стили в таблице стилей вместо стиля в элементе.

 border: 1px solid # 333! важный; цвет фона: # 555! важно;

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

дальнейшее чтение:! Важные CSS-объявления: как и когда их использовать - Smashing Magazine.

Заключение

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

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

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

демонстрация
Скачать исходный код

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