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

  1. Стили браузера по умолчанию
  2. Селекторы
  3. Тип выбора
  4. Класс выбора
  5. Селектор идентификаторов
  6. Встраивание стилей
  7. Внешние стили
  8. Внутренние стили
  9. Встроенные стили
  10. Важное правило!
  11. Заключение

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

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

Рекомендуемое чтение: CSS Вернуться к основам: объяснение терминологии

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

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

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

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

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

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

Но, если мы тщательно проверяем эти элементы, у каждого из браузеров есть (немного) разные значения для их декларации «по умолчанию», что приводит к несогласованности между браузерами, особенно в старом, таком как IE6, 7 и Firefox 3

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

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

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

Селекторы

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

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

Тип выбора

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

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

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

Класс выбора

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

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

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

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

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

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

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

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

<div id = "content"> Content </ div>

В случае, если у нас есть идентификатор в элементе, мы можем использовать селектор идентификатора, чтобы предназначаться для этого элемента; Селектор идентификатора определяется параметром hash #.

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

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

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

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

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

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

<link rel = "stylesheet" href = "css / style.css">

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

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

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

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

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

<head> <style type = "text / css"> h1 {/ ** объявление ** /} p {/ ** объявление ** /} </ style> </ head>

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

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

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

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

<p style = "margin: 5px;"> Это абзац </ p>

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

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

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

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

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

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

<a style="color: #border: 1px solid #156E8E; background-color: #389ABE;"> Это ссылка </a>

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

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

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

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

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

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

Заключение

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

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

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

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