Важнейшая концепция CSS для изучения

1656561619 vazhnejshaya konczepcziya css dlya izucheniya

The Каскад это то, как CSS был разработан с самого начала, и есть причина, почему он называется CSS – каскадные таблицы стилей!

К сожалению, CSS имеет плохую репутацию за ту же фундаментальную концепцию, на которой он построен.

Но что же такое Cascade, и так ли он плох, как звучит большинство людей?

Введение

Скажем, Джон пишет кучу CSS, а затем переходит в браузер, чтобы проверить его. К его удивлению, стили, которые он написал, не применяются к элементу, который он только что стилизовал, а некоторые другие стили!

Видишь ли это здесь? Это одна из самых плохих вещей, на которые все жалуются, когда говорят «CSS отстойный».

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

Это как имеющая глобальную переменную JavaScript, которой можно управлять любой функцией в коде. Кажется, рецепт крушения.

Но опять же Cascade формирует фундаментальное обоснование того, как CSS был создан в первую очередь.

Принять это?

Ну, вы не можете изменить это.

QbB17Bt142xYZ-jJhnWY6obhbVf4NUnVBB6p
Вы бывали там раньше, не правда ли?

Что такое каскад?

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

К счастью, кошмары, связанные с каскадом, можно понять, поскольку он руководствуется только двумя факторами:

  1. Специфика селекторов элементов
  2. Порядок написания стилей

Давайте быстро рассмотрим их.

Специфика селектора

Вы можете сравнить специфичность селектора с тем, как человеческий разум интерпретирует инструкции.

Например, рассмотрим следующий график:

Ns6cVPSUw99PFiQDIwswHX22V4GRGsb4BTeP

Если бы я сказал тебе: передай мне красную коробку, что бы ты передал мне? Их двое!

Вы можете задать следующий вопрос: «Какая из квадратов, a или b?».

Или вы даже можете захватить обе коробки! Разве они обе не красные коробки?

Именно в такой ситуации оказывается браузер, когда сталкивается со спецификой.

Когда вы говорите, стиль абзаца красный цвет фона…

p {   background-color: red;}

Поскольку на странице может быть много элементов абзаца, браузер спрашивает какой абзац?

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

Однако если вы уже сказали, стилизуйте абзац с названием класса reddy с красным фоном:

p.reddy {  background-color: red;}

Это более конкретная просьба!

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

Это!

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

Способ вычисления баллов прост.

Предположим, что браузер – во время интерпретации вашего CSS – имел 4 цели.

WGT1q9oEHZrKY1R0C2neEvZb45AIN6faLSs5
  1. Для каждого встроенного стиля, нацеленного на элемент с помощью style атрибута, 1 гол предназначен для стойки ворот (a).
  2. Для каждого id селектор, 1 гол назначен к посту(b).
  3. Для каждого class селектор, селектор атрибутов и имеющиеся псевдоклассы, в публикацию назначена 1 цель(c).
  4. Для каждого селектора элементов и псевдоэлемента для публикации назначается 1 цель (d).

Я помню это, используя аббревиатуру SICAPEP:

etustqZiytNdLrK6wF1nHWeWzVebiWS11SS4

После присвоения баллов общее количество баллов рассчитывается по конкатенациякак цифры 4-значного числа.

Быстрый пример конкретности

Рассмотрим следующие объявления стилей:

#nav .removed > a:hover {}
li:last-child h3 .title {}

Как браузер вычисляет специфичность баллов для этих селекторов?

#nav .removed > a:hoвер

Вот разбивка:

(a) Нет встроенного стиля, поэтому счет за первую стойку ворот равен 0.

(б) Есть один id селектор, #navэто счет 1 за второй гл.

(c) Есть также один class селектор, .removed и один селектор псевдоклассов, :hoverчто суммирует счет 2 за третью стойку ворот.

(d) Есть один селектор элементов, aэто оценка 1 в четвертом посту.

Вот графическое изображение баллов.

irhfWjR4Pr7OAMpUq8w3jwehB-N8mMV12WSA

Общая оценка специфичности объединена как 0121.

Как и с обычной математикой, 0001 меньше чем 0005и 0121 больше чем 0021.

Теперь вы понимаете, как рассчитывается специфичность.

Можете ли вы попытаться вычислить специфичность для другого селектора, li:last-child h3 .title ?

Дайте мне знать, к чему вы пришли в разделе комментариев 🙂

Порядок стиля

Вторым фактором, влияющим на каскад, является порядок стилей. Действительно простой пример можно увидеть из стилизации одного и того же элемента в 2 разных блоках кода.

Например:

p.reddy {  background: red;}p.reddy {   background: blue;}

Несмотря на то, что оба селектора имеют одинаковую специфику, 0011порядок набора правил вступает в действие.

Вторая декларация отменит предыдущую, а абзац будет синим и нет красный.

Коварный вопрос

Какой будет цвет текста ссылки, учитывая приведенный ниже документ?

<!doctype html> <html><head><title>Inline Styles and Specificity</title> <style type="text/css">    #nav-force &gt; ul > li > a.nav-link { 	color: blue;     };</style> </head>   <body>      <nav id="nav-force">	<;ul> 	 <li>	  <a href=" class="nav-link" style="color: red;">		Link          </a> 	 </li>	</ul>       </nav>  </body> </html>

Синий или красный?

Заметьте, что ссылка стилизована как встроенная, так и внутри <style>&lt;/style> блок.

О, если вы чувствуете себя уверенно, просто скажите ответ громко — о себе.

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

Почему?

Окончательная конкретность будет примерно тысячи – 1000 – и это превышает 9 голов во второй посту. 1000 больше чем 0900.

ПРИМЕЧАНИЕ: Как отметил Пол Макканн в разделе комментариев, вышеприведенный абзац является чрезмерным упрощением. Посмотрите, что он говорит.

Вывод

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

Увидимся позже!

Готовы стать профессионалами?

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

K5WjZdNM7UT-fafz5nc2H8q-cRcH0Dc36Aja
Семь секретов CSS, о которых вы не знали

Добавить комментарий

Ваш адрес email не будет опубликован.