[{"data":1,"prerenderedAt":1328},["ShallowReactive",2],{"$fHsvU35tw9JZe23kaH91MRNqAmMvDUDIpoSiYRQOJd0c":3,"$fMMUdSFktwQFqMVGPrTtt3EC5yheBp7PzwIqznamFcMo":77,"$f1Prj1xEczHja_-L7FyIGgRHd5_cSWHo7r6AE5aheAik":80,"$fc0LoAJgqXDLbKKd2JS_NpM4SuzBK8EycUXINSg09CKU":406,"$fM3ea55k6lKMPOTM84llDB26VSQDVVbxiQuSBFQw9P_c":409,"$fI5fDmvm-5tr9wcH0eHaKZa1j3y_FQIQaHHPqbZxAHJE":653,"mdc-g5h9bk-key":673,"mdc-9u41-key":704,"mdc-jvnm5m-key":712,"mdc--23clcd-key":720,"mdc-pzfzbz-key":744,"mdc-vftp7t-key":752,"mdc--6dcswk-key":760,"mdc-iym6oy-key":838,"mdc-v28k1k-key":896,"mdc-w7phhy-key":904,"mdc-82nb6c-key":1024,"mdc-kem0hj-key":1161,"mdc-ti71s6-key":1190,"mdc--fj78kz-key":1291},{"content":4,"quizQuestionContent":47,"type":66,"pageMeta":67},[5,9,13,16,20,24,27,31,34,37,41,44],{"id":6,"value":7,"isTypeH1":8},"1893","Наследование в CSS",true,{"id":10,"value":11,"anchor":12,"isTypeH2":8},"4325","Теория: наследование и currentColor","theory-inheritance-and-currentcolor",{"id":14,"value":15,"isTypeParagraph":8},"9946","Если для наследуемого свойства на элементе не задано собственное значение, берётся вычисленное значение этого свойства у родителя (это и называется наследованием).  \nСвойство `color` — один из основных примеров наследуемого свойства, поэтому потомки обычно получают цвет текста от ближайшего предка, у которого он явно определён.  \n`currentColor` означает «текущее значение `color` у этого элемента» и часто используется в других свойствах (например, в `border-color`), чтобы рамка и текст совпадали по цвету.  \nНачальное (initial) значение `color` задаётся браузером (и может зависеть от темы/настроек), поэтому «по умолчанию чёрный» — не строгое правило для всех сред.",{"id":17,"description":18,"titleAlert":19,"isTypeAlertWarning":8},"679","Начальные цвета, выбираемые браузером, могут отличаться в зависимости от тёмной/светлой темы и пользовательских настроек, поэтому ожидать один и тот же «чёрный» во всех случаях некорректно.",null,{"id":21,"value":22,"anchor":23,"isTypeH2":8},"4326","Разбор данного HTML по шагам","step-by-step-analysis",{"id":25,"value":26,"isTypeParagraph":8},"9947","Исходный фрагмент (ключевой момент — `color: red` на `\u003Cbody>`):\n\n```\n\u003Chtml>\n  \u003Chead>\n    \u003Ctitle>CSS test 2\u003C/title>\n  \u003C/head>\n  \u003Cbody style=\"color: red; font-weight: bold; display: block; background: url('bg.jpg');\">\n    \u003Cdiv>\n      Some test text\n      \u003Cdiv>\n        Lorem ipsum etc..\n        \u003Cspan>\n          One more dummy text\n        \u003C/span>\n      \u003C/div>\n    \u003C/div>\n  \u003C/body>\n\u003C/html>\n```\n\nШаг 1. На `\u003Cbody>` явно задано `color: red`, значит базовый цвет текста внутри `body` — красный (если ниже по дереву он не переопределён).  \n\nШаг 2. Внутренние элементы `\u003Cdiv>` и `\u003Cspan>` не имеют собственных правил `color`, поэтому срабатывает наследование: берётся цвет у родителя.  \n\nШаг 3. Путь наследования в дереве выглядит так (упрощённо):\n\n```\nbody (color: red)\n└── div (color: наследуется → red)\n    └── div (color: наследуется → red)\n        └── span (color: наследуется → red)\n```\n\nШаг 4. Следовательно, текст внутри `\u003Cspan>` («One more dummy text») будет красным, то есть правильный вариант — `3. red`.",{"id":28,"value":29,"anchor":30,"isTypeH3":8},"4328","Мини-таблица: что именно наследуется здесь","mini-table-what-is-inherited-here",{"id":32,"value":33,"isTypeParagraph":8},"9948","| Свойство | Задано на `\u003Cbody>` | Наследуется потомками | Влияет на «One more dummy text» |\n|---|---|---|---|\n| `color` | `red` | Да | Да, делает текст красным |\n| `font-weight` | `bold` | Да | Да, делает текст жирным |\n| `background` | `url('bg.jpg')` | Нет | Нет, не меняет цвет текста |",{"id":35,"description":36,"titleAlert":19,"isTypeAlertInfo":8},"623","Фон (`background`) не изменяет `color` текста; это разные свойства: фон рисуется «под» содержимым, а цвет текста задаётся `color`.",{"id":38,"value":39,"anchor":40,"isTypeH2":8},"4327","Примеры, ловушки и подсказка","examples-pitfalls-and-hint",{"id":42,"value":43,"isTypeParagraph":8},"9949","Частая ловушка 1: принудительно сбросить цвет у потомка к начальному значению.  \nЕсли добавить дочернему элементу `color: initial`, текст перестанет наследовать красный и возьмёт начальное значение `color`, выбранное браузером.\n\n```\n\u003Cbody style=\"color: red;\">\n  \u003Cspan style=\"color: initial;\">One more dummy text\u003C/span>\n\u003C/body>\n```\n\nЧастая ловушка 2: перепутать `currentColor` с «именем цвета».  \n`currentColor` — это ссылка на текущее значение `color` на этом же элементе и часто применяется для синхронизации цветов.\n\n```\n.button {\n  color: red;\n  border: 2px solid currentColor;\n}\n```\n\nЧастая ловушка 3: браузерные стили некоторых элементов.  \nНапример, у ссылок (`\u003Ca>`) часто есть собственный цвет по умолчанию, из‑за чего может казаться, что цвет «не наследуется», хотя фактически происходит конкуренция правил каскада (у элемента появляется собственное значение `color` из других правил).",{"id":45,"value":46,"isTypeParagraph":8},"9950","Кратко: на `\u003Cbody>` задан `color: red`, `color` наследуется, у `\u003Cspan>` переопределения нет, поэтому «One more dummy text» будет красным (вариант 3).",{"id":48,"options":49,"hint":63,"solution":64,"description":65},"1132",[50,54,57,60],{"id":51,"label":52,"isCorrect":53},"4660","black",false,{"id":55,"label":56,"isCorrect":53},"4661","white",{"id":58,"label":59,"isCorrect":8},"4662","red",{"id":61,"label":62,"isCorrect":53},"4663","currentColor","Следует найти ближайшего предка, у которого задан `color`, и проверить, переопределяется ли `color` на пути до нужного элемента; если переопределения нет — значение будет унаследовано.","**Правильный ответ: 3** - red\n\nЦвет текста «One more dummy text» будет `red`, потому что свойство `color` является наследуемым, а на элементе `\u003Cbody>` задано `style=\"color: red\"`, и вложенный `\u003Cspan>` наследует это значение.  \nКлючевое слово `currentColor` — это не «отдельный цвет», а способ сослаться на текущее вычисленное значение `color` у того же элемента, поэтому итоговый цвет в данном HTML остаётся красным.","Есть шаблон вложенного HTML кода:\n\n```\n\u003Chtml>\n  \u003Chead>\n    \u003Ctitle>CSS test 2\u003C/title>\n  \u003C/head>\n  \u003Cbody style=\"color: red; font-weight: bold; display: block; background: url('bg.jpg');\">\n    \u003Cdiv>\n      Some test text\n      \u003Cdiv>\n        Lorem ipsum etc..\n        \u003Cspan>\n          One more dummy text\n        \u003C/span>\n      \u003C/div>\n    \u003C/div>\n  \u003C/body>\n\u003C/html>\n```\n\nКакой будет цвет у текста «One more dummy text»?","quizQuestion",{"title":68,"description":69,"ogTitle":7,"ogDescription":69,"ogImageUrl":70,"canonical":19,"ogLocale":71,"ogSiteName":72,"ogImageType":73,"ogImageWidth":74,"ogImageHeight":75,"ogType":76,"ogUrl":19},"Есть шаблон вложенного HTML кода. Какой будет цвет у текста?","Разбор каскада и наследования CSS на примере: какой цвет получит текст внутри вложенного span при color.","/og-image.png","ru_RU","goodwebjob.ru","image_jpeg","1200","630","article",{"siteName":78,"siteUrl":79},"GOOD WEB JOB!","https://goodwebjob.ru",{"slugs":81},[82,85,88,91,94,97,100,103,106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247,250,253,256,259,262,265,268,271,274,277,280,283,286,289,292,295,298,301,304,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403],{"name":83,"value":84},"Теоретические задания","theoretical-tasks",{"name":86,"value":87},"Что вернёт этот код: typeof (function(){})()","what-this-code-will-return-typeof-function",{"name":89,"value":90},"С чего начать?","where-to-begin",{"name":92,"value":93},"Почему опасно писать прямо в прототипы базовых типов?","why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":95,"value":96},"Backend","backend",{"name":98,"value":99},"Frontend","frontend",{"name":101,"value":102},"Какие логические значения в console.log будут получены?","prototype-what-logical-values-will-be-received-in-console-log",{"name":104,"value":105},"Нечётные числа должны отсортироваться по возрастанию, а чётные должны остаться на своих местах","odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":107,"value":108}," Найти в массиве неповторяющиеся числа","find-non-repeating-numbers-in-an-array",{"name":110,"value":111},"arr.push(0) повлияет на массив так же, как если бы мы выполнили...","arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":113,"value":114},"Дана строка: 'one.two.three.four.five'. Необходимо из строки сделать вложенный объект","the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":116,"value":117},"Реализовать функцию, похоже как в Jquery","implement-a-function-similar-to-jquery",{"name":119,"value":120},"Для каждого вложенного объекта нужно добавить свойство level, которое равняется числу - номер вложенности","for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":122,"value":123},"Какое значение выведет консоль с object.property?","what-value-will-the-console-output-with-object-property",{"name":125,"value":126},"Что выведется в console.log([arr[0](), arr[0]()])?","what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":128,"value":129},"Вернуть массив от 1 до n, где числа, кратные 3, заменены на 'fizz', кратные 5 - на 'buzz', а кратные и 3, и 5 одновременно - на 'fizzbuzz'","returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":131,"value":132},"Необходимо проверить, являются ли две строки анаграммами друг друга","checks-whether-two-strings-are-anagrams-of-each-other",{"name":134,"value":135},"Определить, является ли слово палиндромом","determines-whether-a-word-is-a-palindrome",{"name":137,"value":138},"Есть массив, в котором лежат объекты с датами, необходимо отсортировать даты по возрастанию","there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":140,"value":141},"Реализовать функцию, принимающую аргументы \"*\", \"1\", \"b\", \"1c\" и возвращающую строку \"1*b*1c\"","implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":143,"value":144},"Дано дерево (вложенный объект), надо найти сумму всех вершин","given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":146,"value":147},"Для каждой ветви дерева записать номер вложенности данной ветви","for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":149,"value":150},"Есть слова в массиве, необходимо определить, состоят ли они из одних и тех же букв","there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":152,"value":153},"Числа от 1 до 100 находятся в массиве, они хаотично перемешанные, но в нём не хватает одного числа из этой последовательности. Необходимо найти его","the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"name":155,"value":156},"Есть строка, состоящая из разных скобок, необходимо проверить, закрыты ли все","there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":158,"value":159},"Напишите функцию, который сделает из массива объект","write-a-function-that-will-make-an-object-out-of-an-array",{"name":161,"value":162},"Что выведет console.log в результате выполнения цикла while?","what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":164,"value":165},"Есть функция и объект. Напишите все известные вам способы, чтобы вывести в консоли значение x из объекта, используя функцию","there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":167,"value":168},"Что выведет консоль в случае присвоения свойства массиву по строковому отрицательному индексу?","what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":170,"value":171},"Что выведет консоль в случае удаления элемента массива с помощью оператора delete?","what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":173,"value":174},"Уникализация значений в массиве","unifying-values-in-an-array",{"name":176,"value":177},"«Расплющивание» массива","flattening-the-array",{"name":179,"value":180},"Что вернёт метод book.getUpperName()?","what-will-the-book-get-upper-name-method-return",{"name":182,"value":183},"Сжатие строк","string-compression",{"name":185,"value":186},"Что выведет консоль в случае присвоения свойства массиву по строковому положительному индексу?","what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":188,"value":189},"Что получится в результате передачи объекта как аргумента в функцию и выполнения кода?","what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":191,"value":192},"Как браузер после ввода домена понимает, откуда брать сайт?","how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":194,"value":195},"Как домен попадает в DNS в таблицу соответствия: домен – ip","how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":197,"value":198},"Как браузер решает, какое соединение ему открывать, TCP или UDP?","how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":200,"value":201},"Ключевые отличия TCP и UDP","key-differences-between-tcp-and-udp",{"name":203,"value":204},"\"TCP/IP\" - кем является TCP, а кем IP в данном случае?","tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":206,"value":207},"Что такое HTTP и из чего состоит?","what-is-http-and-what-does-it-consist-of",{"name":209,"value":210},"Что такое заголовки в HTTP и зачем они нужны?","what-are-http-headers-and-why-do-we-need-them",{"name":212,"value":213},"Что такое параметры в HTTP?","what-are-http-parameters",{"name":215,"value":216},"Где находится HTML-код в структуре HTTP-ответа?","where-is-the-html-code-located-in-the-http-response-structure",{"name":218,"value":219},"Что такое HTML?","what-is-html",{"name":221,"value":222},"Чем отличаются 1.0, 1.1, 2.0, 3.0 версии HTTP?","what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":224,"value":225},"Пользователь авторизован на сайте. Как сервер узнает об этом с последующими другими заходами, что «я – авторизованный пользователь»?","the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":227,"value":228},"Что такое cookie?","what-is-a-cookie",{"name":230,"value":231},"Кто является инициатором записи cookie в браузере?","who-initiates-the-cookie-recording-in-the-browser",{"name":233,"value":234},"Есть ли возможность с клиента (с браузера) управлять cookie?","is-it-possible-to-manage-cookies-from-the-client-browser",{"name":236,"value":237},"Лайвкодинг","livecoding",{"name":239,"value":240},"Что вернёт следующий код? Object.create(null).hasOwnProperty('toString')","what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":242,"value":243},"Всё, что идет по HTTPS – оно защищено?","is-everything-that-goes-through-https-secure",{"name":245,"value":246},"Все данные зашифрованы, используется https. Хакер взламывает dns и делает подмену одного ip на другой, на фишинговый сайт. В этом случае, злоумышленник может получить данные (логин \\ пароль)?","all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":248,"value":249},"Есть веб-приложение. Помимо HTTP, какие протоколы того же уровня (Application Layer) можно дополнительно использовать в веб-приложении в браузере?","there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":251,"value":252},"Как браузер парсит JavaScript и изображения при рендеринге?","how-the-browser-parses-javascript-and-images-when-rendering",{"name":254,"value":255},"Что происходит, когда HTTP прислал HTML? Что браузер дальше делает c HTML с учетом того, что она валидная?","what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":257,"value":258},"Что в браузере блокирует рендеринг страницы?","what-is-blocking-the-page-rendering-in-the-browser",{"name":260,"value":261},"Что такое DOM в браузере? Что такое CSSOM?","what-is-dom-in-a-browser-what-is-cssom",{"name":263,"value":264},"Что является узлами в DOM?","what-are-nodes-in-the-dom",{"name":266,"value":267},"Из чего состоит CSSOM?","what-does-cssom-consist-of",{"name":269,"value":270},"Дан HTML-код. Какой будет цвет у текста «Some dummy text»?","the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":272,"value":273},"Есть шаблон HTML и CSS кода. Какой будет цвет у текста «Таким образом, постоянное»?","there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":275,"value":276},"Есть шаблон вложенного HTML кода. Какой будет цвет у текста «One more dummy text»?","there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":278,"value":279},"Есть шаблон вложенного HTML кода. Будет ли display:block у body влиять на span?","there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":281,"value":282},"Есть HTML код. Будет ли font-weight на span влиять?","there-is-an-html-code-will-font-weight-affect-span",{"name":284,"value":285},"Flexbox и Grid, чем отличаются друг от друга?","what-are-the-differences-between-flexbox-and-grid",{"name":287,"value":288},"Заменяют ли Flexbox и Grid друг друга?","do-flexbox-and-grid-replace-each-other",{"name":290,"value":291},"Есть CSS и JS анимация. Какая между ними разница, что быстрее, что более удобно?","there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"name":293,"value":294},"Сборник задач","tasks",{"name":296,"value":297},"Какие способы объявления функции есть в JavaScript?","what-are-the-ways-to-declare-a-function-in-javascript",{"name":299,"value":300},"Что такое this в JavaScript?","what-is-this-in-javascript",{"name":302,"value":303},"Что такое Event Loop, как работает?","what-is-an-event-loop-and-how-does-it-work",{"name":305,"value":306},"Что будет, если вызвать typeof на необъявленной переменной?","what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":308,"value":309},"Что показывает оператор typeof в JavaScript?","what-does-the-typeof-operator-show-in-javascript",{"name":311,"value":312},"Какие типы данных существует в JavaScript?","what-types-of-data-exist-in-javascript",{"name":314,"value":315},"Какую структуру использовать для хранения упорядоченного списка строк в JavaScript?","what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":317,"value":318},"Что вернет typeof для массива?","what-will-typeof-return-for-an-array",{"name":320,"value":321},"Почему оператор typeof, применённый к массиву, возвращает объект?","why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":323,"value":324},"Если нужно хранить список уникальных строк, какую структуру данных выбрать?","if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":326,"value":327},"Что возвращает typeof для new Set в JavaScript?","what-does-typeof-return-for-new-set-in-javascript",{"name":329,"value":330},"Для чего нужен React, какие он решает проблемы?","what-is-react-used-for-and-what-problems-does-it-solve",{"name":332,"value":333},"Если убрать в React VDOM/Fiber, и вручную изменять DOM, разве это не оптимально?","if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":335,"value":336},"Есть блок кода. Что в реальном DOM изменится после нажатия на кнопку?","there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":338,"value":339},"Есть код, в котором список и кнопка. Что в реальном DOM изменится после нажатия на кнопку?","there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":341,"value":342},"Зачем нужен Redux (Mobx/Effector)? Зачем нужен менеджер состояния? Какие проблемы решает?","why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":344,"value":345},"Как диагностировать и исправить нежелательное изменение цвета фона по клику на кнопку, если исходный код сайта запутан и недоступен для прямого чтения?","how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"name":347,"value":348},"Разрабатывал, взял закоммитил, запушил. Оказалось, что запушил не в ту ветку, точнее, коммит не в ту ветку. Какие действия?","developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":350,"value":351},"В git есть несколько вариантов слияния веток, какие? Чем отличаются?","git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":353,"value":354},"Какие существуют стратегии ветвления для работы команды? Что это такое?","what-are-the-branching-strategies-for-the-team-what-is-it",{"name":356,"value":357},"По каким характеристикам, ревьюер понимает, что данный код - хороший, а этот код - плохой?","how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"name":359,"value":360},"Дан фрагмент bash-скрипта: cd ~; mkdir foo... Что в нем происходит?","here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":362,"value":363},"Дан фрагмент bash-скрипта: target=$(ps -Af | grep $1 | head -n 1)...","here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"name":365,"value":366},"Что такое алгоритмическая сложность?","what-is-algorithmic-complexity",{"name":368,"value":369},"Какая алгоритмическая сложность у \"быстрой сортировки\"?","what-is-the-algorithmic-complexity-of-quick-sort",{"name":371,"value":372},"Почему в JavaScript два объекта с одинаковым содержимым при сравнении возвращают false?","why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":374,"value":375},"Каким способом может выполняться авторизация пользователя на сайте?","how-can-a-user-be-authorized-on-a-website",{"name":377,"value":378},"В чем разница между микро- и макро-тасками в JavaScript?","what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":380,"value":381},"В комнате три человека. Какова вероятность того, что хотя бы двое из них одного пола? То есть два и более.","there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":383,"value":384},"Есть монета. Ее подбрасывают пять раз подряд. Каждый раз записывается, что выпало - орел или решка. Сколько разных последовательностей орлов и решек может при этом получиться?","there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":386,"value":387},"Как гарантированно найти лёгкую фальшивую монету среди 8 за минимальное число взвешиваний на чашечных весах?","how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"name":389,"value":390},"Подготовка к тех.интервью","technical-interview",{"name":392,"value":393},"Верно ли утверждение, что злоумышленник, контролирующий роутер и прослушивающий трафик, может получить логины и пароли от сайтов, на которые заходит клиент?","is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":395,"value":396},"Что такое DNS, как DNS находит нужный IP-адрес?","what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":398,"value":399},"Переменные объявлены следующим образом: a=3; b=«hello»;. Укажите правильное утверждение","variables-are-declared-as-follows-specify-the-correct-statement",{"name":401,"value":402},"Какой механизм лежит в основе оптимизации обновлений DOM в React?","what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":404,"value":405},"Что мешает организовать централизованное состояние без менеджера состояния? Если организовать состояние механизмами реакта: контекстом, стейтом, в чем проблема? Что менеджеры состояния привносят?","what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",[407],{"label":389,"slug":390,"to":408},"/technical-interview/where-to-begin",{"navigationList":410,"navigationSublist":416},[411,413],{"path":408,"isActive":53,"name":89,"icon":412,"isNavbarMobileDisabled":8},"material-symbols:visibility-outline-rounded",{"path":414,"isActive":8,"name":293,"icon":415,"isNavbarMobileDisabled":53},"/technical-interview/tasks","material-symbols:task-outline",[417,424,443,452,457,552,569,576,581,624,639,644],{"title":418,"list":419,"isOpened":53},"Bash",[420,422],{"name":359,"path":421,"isActive":53},"/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":362,"path":423,"isActive":53},"/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"title":425,"list":426,"isOpened":53},"CSS",[427,429,431,433,435,437,439,441],{"name":269,"path":428,"isActive":53},"/technical-interview/tasks/the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":272,"path":430,"isActive":53},"/technical-interview/tasks/there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":275,"path":432,"isActive":53},"/technical-interview/tasks/there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":278,"path":434,"isActive":53},"/technical-interview/tasks/there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":281,"path":436,"isActive":53},"/technical-interview/tasks/there-is-an-html-code-will-font-weight-affect-span",{"name":284,"path":438,"isActive":53},"/technical-interview/tasks/what-are-the-differences-between-flexbox-and-grid",{"name":287,"path":440,"isActive":53},"/technical-interview/tasks/do-flexbox-and-grid-replace-each-other",{"name":290,"path":442,"isActive":53},"/technical-interview/tasks/there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"title":444,"list":445,"isOpened":53},"Git",[446,448,450],{"name":347,"path":447,"isActive":53},"/technical-interview/tasks/developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":350,"path":449,"isActive":53},"/technical-interview/tasks/git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":353,"path":451,"isActive":53},"/technical-interview/tasks/what-are-the-branching-strategies-for-the-team-what-is-it",{"title":453,"list":454,"isOpened":53},"HTML",[455],{"name":218,"path":456,"isActive":53},"/technical-interview/tasks/what-is-html",{"title":458,"list":459,"isOpened":53},"JavaScript",[460,462,464,466,468,470,472,474,476,478,480,482,484,486,488,490,492,494,496,498,500,502,504,506,508,510,512,514,516,518,520,522,524,526,528,530,532,534,536,538,540,542,544,546,548,550],{"name":101,"path":461,"isActive":53},"/technical-interview/tasks/prototype-what-logical-values-will-be-received-in-console-log",{"name":92,"path":463,"isActive":53},"/technical-interview/tasks/why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":239,"path":465,"isActive":53},"/technical-interview/tasks/what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":122,"path":467,"isActive":53},"/technical-interview/tasks/what-value-will-the-console-output-with-object-property",{"name":125,"path":469,"isActive":53},"/technical-interview/tasks/what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":161,"path":471,"isActive":53},"/technical-interview/tasks/what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":164,"path":473,"isActive":53},"/technical-interview/tasks/there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":179,"path":475,"isActive":53},"/technical-interview/tasks/what-will-the-book-get-upper-name-method-return",{"name":398,"path":477,"isActive":53},"/technical-interview/tasks/variables-are-declared-as-follows-specify-the-correct-statement",{"name":185,"path":479,"isActive":53},"/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":167,"path":481,"isActive":53},"/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":170,"path":483,"isActive":53},"/technical-interview/tasks/what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":86,"path":485,"isActive":53},"/technical-interview/tasks/what-this-code-will-return-typeof-function",{"name":188,"path":487,"isActive":53},"/technical-interview/tasks/what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":296,"path":489,"isActive":53},"/technical-interview/tasks/what-are-the-ways-to-declare-a-function-in-javascript",{"name":299,"path":491,"isActive":53},"/technical-interview/tasks/what-is-this-in-javascript",{"name":302,"path":493,"isActive":53},"/technical-interview/tasks/what-is-an-event-loop-and-how-does-it-work",{"name":305,"path":495,"isActive":53},"/technical-interview/tasks/what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":308,"path":497,"isActive":53},"/technical-interview/tasks/what-does-the-typeof-operator-show-in-javascript",{"name":311,"path":499,"isActive":53},"/technical-interview/tasks/what-types-of-data-exist-in-javascript",{"name":314,"path":501,"isActive":53},"/technical-interview/tasks/what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":317,"path":503,"isActive":53},"/technical-interview/tasks/what-will-typeof-return-for-an-array",{"name":320,"path":505,"isActive":53},"/technical-interview/tasks/why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":323,"path":507,"isActive":53},"/technical-interview/tasks/if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":326,"path":509,"isActive":53},"/technical-interview/tasks/what-does-typeof-return-for-new-set-in-javascript",{"name":371,"path":511,"isActive":53},"/technical-interview/tasks/why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":377,"path":513,"isActive":53},"/technical-interview/tasks/what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":110,"path":515,"isActive":53},"/technical-interview/tasks/arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":128,"path":517,"isActive":53},"/technical-interview/tasks/returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":113,"path":519,"isActive":53},"/technical-interview/tasks/the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":143,"path":521,"isActive":53},"/technical-interview/tasks/given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":119,"path":523,"isActive":53},"/technical-interview/tasks/for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":146,"path":525,"isActive":53},"/technical-interview/tasks/for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":137,"path":527,"isActive":53},"/technical-interview/tasks/there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":149,"path":529,"isActive":53},"/technical-interview/tasks/there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":155,"path":531,"isActive":53},"/technical-interview/tasks/there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":107,"path":533,"isActive":53},"/technical-interview/tasks/find-non-repeating-numbers-in-an-array",{"name":158,"path":535,"isActive":53},"/technical-interview/tasks/write-a-function-that-will-make-an-object-out-of-an-array",{"name":131,"path":537,"isActive":53},"/technical-interview/tasks/checks-whether-two-strings-are-anagrams-of-each-other",{"name":104,"path":539,"isActive":53},"/technical-interview/tasks/odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":134,"path":541,"isActive":53},"/technical-interview/tasks/determines-whether-a-word-is-a-palindrome",{"name":176,"path":543,"isActive":53},"/technical-interview/tasks/flattening-the-array",{"name":140,"path":545,"isActive":53},"/technical-interview/tasks/implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":182,"path":547,"isActive":53},"/technical-interview/tasks/string-compression",{"name":173,"path":549,"isActive":53},"/technical-interview/tasks/unifying-values-in-an-array",{"name":152,"path":551,"isActive":53},"/technical-interview/tasks/the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"title":553,"list":554,"isOpened":53},"React",[555,557,559,561,563,565,567],{"name":329,"path":556,"isActive":53},"/technical-interview/tasks/what-is-react-used-for-and-what-problems-does-it-solve",{"name":401,"path":558,"isActive":53},"/technical-interview/tasks/what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":332,"path":560,"isActive":53},"/technical-interview/tasks/if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":335,"path":562,"isActive":53},"/technical-interview/tasks/there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":338,"path":564,"isActive":53},"/technical-interview/tasks/there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":341,"path":566,"isActive":53},"/technical-interview/tasks/why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":404,"path":568,"isActive":53},"/technical-interview/tasks/what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",{"title":570,"list":571,"isOpened":53},"Алгоритмы",[572,574],{"name":365,"path":573,"isActive":53},"/technical-interview/tasks/what-is-algorithmic-complexity",{"name":368,"path":575,"isActive":53},"/technical-interview/tasks/what-is-the-algorithmic-complexity-of-quick-sort",{"title":577,"list":578,"isOpened":53},"Дебаггинг",[579],{"name":344,"path":580,"isActive":53},"/technical-interview/tasks/how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"title":582,"list":583,"isOpened":53},"Компьютерные сети",[584,586,588,590,592,594,596,598,600,602,604,606,608,610,612,614,616,618,620,622],{"name":191,"path":585,"isActive":53},"/technical-interview/tasks/how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":395,"path":587,"isActive":53},"/technical-interview/tasks/what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":194,"path":589,"isActive":53},"/technical-interview/tasks/how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":197,"path":591,"isActive":53},"/technical-interview/tasks/how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":200,"path":593,"isActive":53},"/technical-interview/tasks/key-differences-between-tcp-and-udp",{"name":203,"path":595,"isActive":53},"/technical-interview/tasks/tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":206,"path":597,"isActive":53},"/technical-interview/tasks/what-is-http-and-what-does-it-consist-of",{"name":209,"path":599,"isActive":53},"/technical-interview/tasks/what-are-http-headers-and-why-do-we-need-them",{"name":212,"path":601,"isActive":53},"/technical-interview/tasks/what-are-http-parameters",{"name":215,"path":603,"isActive":53},"/technical-interview/tasks/where-is-the-html-code-located-in-the-http-response-structure",{"name":221,"path":605,"isActive":53},"/technical-interview/tasks/what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":224,"path":607,"isActive":53},"/technical-interview/tasks/the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":227,"path":609,"isActive":53},"/technical-interview/tasks/what-is-a-cookie",{"name":230,"path":611,"isActive":53},"/technical-interview/tasks/who-initiates-the-cookie-recording-in-the-browser",{"name":233,"path":613,"isActive":53},"/technical-interview/tasks/is-it-possible-to-manage-cookies-from-the-client-browser",{"name":392,"path":615,"isActive":53},"/technical-interview/tasks/is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":242,"path":617,"isActive":53},"/technical-interview/tasks/is-everything-that-goes-through-https-secure",{"name":245,"path":619,"isActive":53},"/technical-interview/tasks/all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":248,"path":621,"isActive":53},"/technical-interview/tasks/there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":374,"path":623,"isActive":53},"/technical-interview/tasks/how-can-a-user-be-authorized-on-a-website",{"title":625,"list":626,"isOpened":53},"Отрисовка в браузере",[627,629,631,633,635,637],{"name":254,"path":628,"isActive":53},"/technical-interview/tasks/what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":251,"path":630,"isActive":53},"/technical-interview/tasks/how-the-browser-parses-javascript-and-images-when-rendering",{"name":257,"path":632,"isActive":53},"/technical-interview/tasks/what-is-blocking-the-page-rendering-in-the-browser",{"name":260,"path":634,"isActive":53},"/technical-interview/tasks/what-is-dom-in-a-browser-what-is-cssom",{"name":263,"path":636,"isActive":53},"/technical-interview/tasks/what-are-nodes-in-the-dom",{"name":266,"path":638,"isActive":53},"/technical-interview/tasks/what-does-cssom-consist-of",{"title":640,"list":641,"isOpened":53},"Ревью кода",[642],{"name":356,"path":643,"isActive":53},"/technical-interview/tasks/how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"title":645,"list":646,"isOpened":53},"Теория вероятности",[647,649,651],{"name":380,"path":648,"isActive":53},"/technical-interview/tasks/there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":383,"path":650,"isActive":53},"/technical-interview/tasks/there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":386,"path":652,"isActive":53},"/technical-interview/tasks/how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"cooperation":654,"copyright":657,"reportError":658,"socialNetwork":660},{"link":655,"title":656},"https://t.me/baurinanton","Сотрудничество","© “GOOD WEB JOB!”",{"label":659,"link":655},"Сообщить об ошибке",{"label":661,"socialNetworkList":662},"Мы в соцсетях:",[663,666,669],{"icon":19,"link":664,"title":665},"https://max.ru/u/f9LHodD0cOKMaukdnnahTeL5pwvjrPfUaZ4S8_1rsNy9I9qsmc9Ar3kP_y8","Max",{"icon":667,"link":655,"title":668},"ic:baseline-telegram","Telegram",{"icon":670,"link":671,"title":672},"ri:vk-fill","https://vk.com/baurinanton","VK",{"data":674,"body":675},{},{"type":676,"children":677},"root",[678,686,699],{"type":679,"tag":680,"props":681,"children":682},"element","p",{},[683],{"type":684,"value":685},"text","Есть шаблон вложенного HTML кода:",{"type":679,"tag":687,"props":688,"children":692},"pre",{"className":689,"code":691,"language":684},[690],"language-text","\u003Chtml>\n  \u003Chead>\n    \u003Ctitle>CSS test 2\u003C/title>\n  \u003C/head>\n  \u003Cbody style=\"color: red; font-weight: bold; display: block; background: url('bg.jpg');\">\n    \u003Cdiv>\n      Some test text\n      \u003Cdiv>\n        Lorem ipsum etc..\n        \u003Cspan>\n          One more dummy text\n        \u003C/span>\n      \u003C/div>\n    \u003C/div>\n  \u003C/body>\n\u003C/html>\n",[693],{"type":679,"tag":694,"props":695,"children":697},"code",{"__ignoreMap":696},"",[698],{"type":684,"value":691},{"type":679,"tag":680,"props":700,"children":701},{},[702],{"type":684,"value":703},"Какой будет цвет у текста «One more dummy text»?",{"data":705,"body":706},{},{"type":676,"children":707},[708],{"type":679,"tag":680,"props":709,"children":710},{},[711],{"type":684,"value":59},{"data":713,"body":714},{},{"type":676,"children":715},[716],{"type":679,"tag":680,"props":717,"children":718},{},[719],{"type":684,"value":62},{"data":721,"body":722},{},{"type":676,"children":723},[724],{"type":679,"tag":680,"props":725,"children":726},{},[727,729,735,737,742],{"type":684,"value":728},"Следует найти ближайшего предка, у которого задан ",{"type":679,"tag":694,"props":730,"children":732},{"className":731},[],[733],{"type":684,"value":734},"color",{"type":684,"value":736},", и проверить, переопределяется ли ",{"type":679,"tag":694,"props":738,"children":740},{"className":739},[],[741],{"type":684,"value":734},{"type":684,"value":743}," на пути до нужного элемента; если переопределения нет — значение будет унаследовано.",{"data":745,"body":746},{},{"type":676,"children":747},[748],{"type":679,"tag":680,"props":749,"children":750},{},[751],{"type":684,"value":52},{"data":753,"body":754},{},{"type":676,"children":755},[756],{"type":679,"tag":680,"props":757,"children":758},{},[759],{"type":684,"value":56},{"data":761,"body":762},{},{"type":676,"children":763},[764,775],{"type":679,"tag":680,"props":765,"children":766},{},[767,773],{"type":679,"tag":768,"props":769,"children":770},"strong",{},[771],{"type":684,"value":772},"Правильный ответ: 3",{"type":684,"value":774}," - red",{"type":679,"tag":680,"props":776,"children":777},{},[778,780,785,787,792,794,800,802,808,810,816,818,822,824,829,831,836],{"type":684,"value":779},"Цвет текста «One more dummy text» будет ",{"type":679,"tag":694,"props":781,"children":783},{"className":782},[],[784],{"type":684,"value":59},{"type":684,"value":786},", потому что свойство ",{"type":679,"tag":694,"props":788,"children":790},{"className":789},[],[791],{"type":684,"value":734},{"type":684,"value":793}," является наследуемым, а на элементе ",{"type":679,"tag":694,"props":795,"children":797},{"className":796},[],[798],{"type":684,"value":799},"\u003Cbody>",{"type":684,"value":801}," задано ",{"type":679,"tag":694,"props":803,"children":805},{"className":804},[],[806],{"type":684,"value":807},"style=\"color: red\"",{"type":684,"value":809},", и вложенный ",{"type":679,"tag":694,"props":811,"children":813},{"className":812},[],[814],{"type":684,"value":815},"\u003Cspan>",{"type":684,"value":817}," наследует это значение.",{"type":679,"tag":819,"props":820,"children":821},"br",{},[],{"type":684,"value":823},"\nКлючевое слово ",{"type":679,"tag":694,"props":825,"children":827},{"className":826},[],[828],{"type":684,"value":62},{"type":684,"value":830}," — это не «отдельный цвет», а способ сослаться на текущее вычисленное значение ",{"type":679,"tag":694,"props":832,"children":834},{"className":833},[],[835],{"type":684,"value":734},{"type":684,"value":837}," у того же элемента, поэтому итоговый цвет в данном HTML остаётся красным.",{"data":839,"body":840},{},{"type":676,"children":841},[842],{"type":679,"tag":680,"props":843,"children":844},{},[845,847,850,852,857,859,862,867,869,874,876,882,884,887,889,894],{"type":684,"value":846},"Если для наследуемого свойства на элементе не задано собственное значение, берётся вычисленное значение этого свойства у родителя (это и называется наследованием).",{"type":679,"tag":819,"props":848,"children":849},{},[],{"type":684,"value":851},"\nСвойство ",{"type":679,"tag":694,"props":853,"children":855},{"className":854},[],[856],{"type":684,"value":734},{"type":684,"value":858}," — один из основных примеров наследуемого свойства, поэтому потомки обычно получают цвет текста от ближайшего предка, у которого он явно определён.",{"type":679,"tag":819,"props":860,"children":861},{},[],{"type":679,"tag":694,"props":863,"children":865},{"className":864},[],[866],{"type":684,"value":62},{"type":684,"value":868}," означает «текущее значение ",{"type":679,"tag":694,"props":870,"children":872},{"className":871},[],[873],{"type":684,"value":734},{"type":684,"value":875}," у этого элемента» и часто используется в других свойствах (например, в ",{"type":679,"tag":694,"props":877,"children":879},{"className":878},[],[880],{"type":684,"value":881},"border-color",{"type":684,"value":883},"), чтобы рамка и текст совпадали по цвету.",{"type":679,"tag":819,"props":885,"children":886},{},[],{"type":684,"value":888},"\nНачальное (initial) значение ",{"type":679,"tag":694,"props":890,"children":892},{"className":891},[],[893],{"type":684,"value":734},{"type":684,"value":895}," задаётся браузером (и может зависеть от темы/настроек), поэтому «по умолчанию чёрный» — не строгое правило для всех сред.",{"data":897,"body":898},{},{"type":676,"children":899},[900],{"type":679,"tag":680,"props":901,"children":902},{},[903],{"type":684,"value":18},{"data":905,"body":906},{},{"type":676,"children":907},[908,928,936,963,990,995,1004],{"type":679,"tag":680,"props":909,"children":910},{},[911,913,919,921,926],{"type":684,"value":912},"Исходный фрагмент (ключевой момент — ",{"type":679,"tag":694,"props":914,"children":916},{"className":915},[],[917],{"type":684,"value":918},"color: red",{"type":684,"value":920}," на ",{"type":679,"tag":694,"props":922,"children":924},{"className":923},[],[925],{"type":684,"value":799},{"type":684,"value":927},"):",{"type":679,"tag":687,"props":929,"children":931},{"className":930,"code":691,"language":684},[690],[932],{"type":679,"tag":694,"props":933,"children":934},{"__ignoreMap":696},[935],{"type":684,"value":691},{"type":679,"tag":680,"props":937,"children":938},{},[939,941,946,948,953,955,961],{"type":684,"value":940},"Шаг 1. На ",{"type":679,"tag":694,"props":942,"children":944},{"className":943},[],[945],{"type":684,"value":799},{"type":684,"value":947}," явно задано ",{"type":679,"tag":694,"props":949,"children":951},{"className":950},[],[952],{"type":684,"value":918},{"type":684,"value":954},", значит базовый цвет текста внутри ",{"type":679,"tag":694,"props":956,"children":958},{"className":957},[],[959],{"type":684,"value":960},"body",{"type":684,"value":962}," — красный (если ниже по дереву он не переопределён).",{"type":679,"tag":680,"props":964,"children":965},{},[966,968,974,976,981,983,988],{"type":684,"value":967},"Шаг 2. Внутренние элементы ",{"type":679,"tag":694,"props":969,"children":971},{"className":970},[],[972],{"type":684,"value":973},"\u003Cdiv>",{"type":684,"value":975}," и ",{"type":679,"tag":694,"props":977,"children":979},{"className":978},[],[980],{"type":684,"value":815},{"type":684,"value":982}," не имеют собственных правил ",{"type":679,"tag":694,"props":984,"children":986},{"className":985},[],[987],{"type":684,"value":734},{"type":684,"value":989},", поэтому срабатывает наследование: берётся цвет у родителя.",{"type":679,"tag":680,"props":991,"children":992},{},[993],{"type":684,"value":994},"Шаг 3. Путь наследования в дереве выглядит так (упрощённо):",{"type":679,"tag":687,"props":996,"children":999},{"className":997,"code":998,"language":684},[690],"body (color: red)\n└── div (color: наследуется → red)\n    └── div (color: наследуется → red)\n        └── span (color: наследуется → red)\n",[1000],{"type":679,"tag":694,"props":1001,"children":1002},{"__ignoreMap":696},[1003],{"type":684,"value":998},{"type":679,"tag":680,"props":1005,"children":1006},{},[1007,1009,1014,1016,1022],{"type":684,"value":1008},"Шаг 4. Следовательно, текст внутри ",{"type":679,"tag":694,"props":1010,"children":1012},{"className":1011},[],[1013],{"type":684,"value":815},{"type":684,"value":1015}," («One more dummy text») будет красным, то есть правильный вариант — ",{"type":679,"tag":694,"props":1017,"children":1019},{"className":1018},[],[1020],{"type":684,"value":1021},"3. red",{"type":684,"value":1023},".",{"data":1025,"body":1026},{},{"type":676,"children":1027},[1028],{"type":679,"tag":1029,"props":1030,"children":1031},"table",{},[1032,1066],{"type":679,"tag":1033,"props":1034,"children":1035},"thead",{},[1036],{"type":679,"tag":1037,"props":1038,"children":1039},"tr",{},[1040,1046,1056,1061],{"type":679,"tag":1041,"props":1042,"children":1043},"th",{},[1044],{"type":684,"value":1045},"Свойство",{"type":679,"tag":1041,"props":1047,"children":1048},{},[1049,1051],{"type":684,"value":1050},"Задано на ",{"type":679,"tag":694,"props":1052,"children":1054},{"className":1053},[],[1055],{"type":684,"value":799},{"type":679,"tag":1041,"props":1057,"children":1058},{},[1059],{"type":684,"value":1060},"Наследуется потомками",{"type":679,"tag":1041,"props":1062,"children":1063},{},[1064],{"type":684,"value":1065},"Влияет на «One more dummy text»",{"type":679,"tag":1067,"props":1068,"children":1069},"tbody",{},[1070,1100,1130],{"type":679,"tag":1037,"props":1071,"children":1072},{},[1073,1082,1090,1095],{"type":679,"tag":1074,"props":1075,"children":1076},"td",{},[1077],{"type":679,"tag":694,"props":1078,"children":1080},{"className":1079},[],[1081],{"type":684,"value":734},{"type":679,"tag":1074,"props":1083,"children":1084},{},[1085],{"type":679,"tag":694,"props":1086,"children":1088},{"className":1087},[],[1089],{"type":684,"value":59},{"type":679,"tag":1074,"props":1091,"children":1092},{},[1093],{"type":684,"value":1094},"Да",{"type":679,"tag":1074,"props":1096,"children":1097},{},[1098],{"type":684,"value":1099},"Да, делает текст красным",{"type":679,"tag":1037,"props":1101,"children":1102},{},[1103,1112,1121,1125],{"type":679,"tag":1074,"props":1104,"children":1105},{},[1106],{"type":679,"tag":694,"props":1107,"children":1109},{"className":1108},[],[1110],{"type":684,"value":1111},"font-weight",{"type":679,"tag":1074,"props":1113,"children":1114},{},[1115],{"type":679,"tag":694,"props":1116,"children":1118},{"className":1117},[],[1119],{"type":684,"value":1120},"bold",{"type":679,"tag":1074,"props":1122,"children":1123},{},[1124],{"type":684,"value":1094},{"type":679,"tag":1074,"props":1126,"children":1127},{},[1128],{"type":684,"value":1129},"Да, делает текст жирным",{"type":679,"tag":1037,"props":1131,"children":1132},{},[1133,1142,1151,1156],{"type":679,"tag":1074,"props":1134,"children":1135},{},[1136],{"type":679,"tag":694,"props":1137,"children":1139},{"className":1138},[],[1140],{"type":684,"value":1141},"background",{"type":679,"tag":1074,"props":1143,"children":1144},{},[1145],{"type":679,"tag":694,"props":1146,"children":1148},{"className":1147},[],[1149],{"type":684,"value":1150},"url('bg.jpg')",{"type":679,"tag":1074,"props":1152,"children":1153},{},[1154],{"type":684,"value":1155},"Нет",{"type":679,"tag":1074,"props":1157,"children":1158},{},[1159],{"type":684,"value":1160},"Нет, не меняет цвет текста",{"data":1162,"body":1163},{},{"type":676,"children":1164},[1165],{"type":679,"tag":680,"props":1166,"children":1167},{},[1168,1170,1175,1177,1182,1184,1189],{"type":684,"value":1169},"Фон (",{"type":679,"tag":694,"props":1171,"children":1173},{"className":1172},[],[1174],{"type":684,"value":1141},{"type":684,"value":1176},") не изменяет ",{"type":679,"tag":694,"props":1178,"children":1180},{"className":1179},[],[1181],{"type":684,"value":734},{"type":684,"value":1183}," текста; это разные свойства: фон рисуется «под» содержимым, а цвет текста задаётся ",{"type":679,"tag":694,"props":1185,"children":1187},{"className":1186},[],[1188],{"type":684,"value":734},{"type":684,"value":1023},{"data":1191,"body":1192},{},{"type":676,"children":1193},[1194,1219,1228,1257,1266],{"type":679,"tag":680,"props":1195,"children":1196},{},[1197,1199,1202,1204,1210,1212,1217],{"type":684,"value":1198},"Частая ловушка 1: принудительно сбросить цвет у потомка к начальному значению.",{"type":679,"tag":819,"props":1200,"children":1201},{},[],{"type":684,"value":1203},"\nЕсли добавить дочернему элементу ",{"type":679,"tag":694,"props":1205,"children":1207},{"className":1206},[],[1208],{"type":684,"value":1209},"color: initial",{"type":684,"value":1211},", текст перестанет наследовать красный и возьмёт начальное значение ",{"type":679,"tag":694,"props":1213,"children":1215},{"className":1214},[],[1216],{"type":684,"value":734},{"type":684,"value":1218},", выбранное браузером.",{"type":679,"tag":687,"props":1220,"children":1223},{"className":1221,"code":1222,"language":684},[690],"\u003Cbody style=\"color: red;\">\n  \u003Cspan style=\"color: initial;\">One more dummy text\u003C/span>\n\u003C/body>\n",[1224],{"type":679,"tag":694,"props":1225,"children":1226},{"__ignoreMap":696},[1227],{"type":684,"value":1222},{"type":679,"tag":680,"props":1229,"children":1230},{},[1231,1233,1238,1240,1243,1248,1250,1255],{"type":684,"value":1232},"Частая ловушка 2: перепутать ",{"type":679,"tag":694,"props":1234,"children":1236},{"className":1235},[],[1237],{"type":684,"value":62},{"type":684,"value":1239}," с «именем цвета».",{"type":679,"tag":819,"props":1241,"children":1242},{},[],{"type":679,"tag":694,"props":1244,"children":1246},{"className":1245},[],[1247],{"type":684,"value":62},{"type":684,"value":1249}," — это ссылка на текущее значение ",{"type":679,"tag":694,"props":1251,"children":1253},{"className":1252},[],[1254],{"type":684,"value":734},{"type":684,"value":1256}," на этом же элементе и часто применяется для синхронизации цветов.",{"type":679,"tag":687,"props":1258,"children":1261},{"className":1259,"code":1260,"language":684},[690],".button {\n  color: red;\n  border: 2px solid currentColor;\n}\n",[1262],{"type":679,"tag":694,"props":1263,"children":1264},{"__ignoreMap":696},[1265],{"type":684,"value":1260},{"type":679,"tag":680,"props":1267,"children":1268},{},[1269,1271,1274,1276,1282,1284,1289],{"type":684,"value":1270},"Частая ловушка 3: браузерные стили некоторых элементов.",{"type":679,"tag":819,"props":1272,"children":1273},{},[],{"type":684,"value":1275},"\nНапример, у ссылок (",{"type":679,"tag":694,"props":1277,"children":1279},{"className":1278},[],[1280],{"type":684,"value":1281},"\u003Ca>",{"type":684,"value":1283},") часто есть собственный цвет по умолчанию, из‑за чего может казаться, что цвет «не наследуется», хотя фактически происходит конкуренция правил каскада (у элемента появляется собственное значение ",{"type":679,"tag":694,"props":1285,"children":1287},{"className":1286},[],[1288],{"type":684,"value":734},{"type":684,"value":1290}," из других правил).",{"data":1292,"body":1293},{},{"type":676,"children":1294},[1295],{"type":679,"tag":680,"props":1296,"children":1297},{},[1298,1300,1305,1307,1312,1314,1319,1321,1326],{"type":684,"value":1299},"Кратко: на ",{"type":679,"tag":694,"props":1301,"children":1303},{"className":1302},[],[1304],{"type":684,"value":799},{"type":684,"value":1306}," задан ",{"type":679,"tag":694,"props":1308,"children":1310},{"className":1309},[],[1311],{"type":684,"value":918},{"type":684,"value":1313},", ",{"type":679,"tag":694,"props":1315,"children":1317},{"className":1316},[],[1318],{"type":684,"value":734},{"type":684,"value":1320}," наследуется, у ",{"type":679,"tag":694,"props":1322,"children":1324},{"className":1323},[],[1325],{"type":684,"value":815},{"type":684,"value":1327}," переопределения нет, поэтому «One more dummy text» будет красным (вариант 3).",1775735655417]