, чтобы сохранить свой прогресс
Прочесываю уроки. Приходится многое переписывать. Все-таки качество подачи материала очень низкое и часто вообще путает. И тут дело не только в машинном переводе. К примеру, вот перевод:
>> Классы - многоразовые стили, которые можно добавить к элементам HTML. Вот пример объявления класса CSS...
>> Вот в оригинале:
Classes are reusable styles that can be added to HTML elements.
Here's an example CSS class declaration...
В целом перевод здесь правильный. Но проблема в том, что формулировка в оригинале изначально не правильная.
В CSS классы - это не стили, а селекторы, то есть условно это фильтры, по которым можно найти в DOM элементы, к которым надо применить указанные стили. А в HTML классы - это просто атрибуты (одни из многих). То есть, к примеру, <p class="some-class"></p>. Здесь class - это имя атрибута, а some-class - это его значение.
В стилях же мы пишем, к примеру :
.some-class {
font-size: 12px;
color: blue;
/* Other styles */
}
Так вот, здесь ".some-class" - это по сути короткая запись выражения [class="some-class"]. И в том и в другом случае - это будут суть селекторы, то есть условия поиска элементов на странице. Используя и тот и другой селектор можно средствами JavaScript выполнять поиск таких элементов, используя методы типа Element.querySelector() и Element.querySelectorAll(), то есть поиск одного или нескольких дочерних элементов. В нашем случае это выглядело бы вот так:
const element = document.querySelector('.some-class');
const elements = document.querySelectorAll('.some-class');
const element2 = document.querySelector('[class="some-class"]');
const elements2 = document.querySelectorAll('[class="some-class"]');
В этих методах можно использовать и другие селекторы, как тот же #id, [name=some-name] и т.п.
Все это важно понимать, чтобы понимать как именно стили применяются к элементам. По сути происходи следующее:
1. Загружается HTML документ и происходит его первичная отрисовка.
2. Если в элементах есть инлайновые стили (как было рассмотрено в прошлом уроке, то есть типа style="color: red;"), то эти стили применяются к элементу сразу (хотя это утверждение следовало бы перепроверить, там могут быть отличия, но это не критично, пока условимся так).
3. Загружаются сторонние CSS-файлы и выполняется их разбор с целью вычленить все правила, найти элементы по селекторам и применить к ним рассчитанные стили. Здесь важно так же понять, что стили будут высчитываться, так как это CSS, то есть Каскадные Таблицы Стилей. Это означает, что на одни и те же элементы может быть в разных местах прописано несколько разных правил (в том числе конфликтующих). Поэтому браузер собирет все стили в кучу, рассчитает их с учетом приоритетов и выдаст конечные стили, которые будут применены в соответствии с селекторами. Такие конфликты можно увидеть в dev-tools. Пример:
Здесь легко рассмотреть несколько отдельных правил на один и тот же элемент и то, что какие-то правила конфликтуют. Вот что перечеркнут - это значит это правило было перетерто другим. Если перейти на вкладку Computed, то можно увидеть сгруппированные стили и если их разложить, там тоже можно видеть эти конфликты.
Так же все конечные стили элемента можно получить средствами JavaScript
for (const [prop, val] of element.computedStyleMap()) {
const value = val[0]?.value;
if(value === undefined) {
continue;
}
console.log('prop, value', prop, value)
}
Да, сейчас вам многое не будет понятно, но пока просто отметьте для себя этот момент. В дальнейшем наверняка не раз столкнетесь и будете правильней понимать.
>> Одной из замечательных особенностей атрибутов id является то, что, подобно классам, вы можете их использовать в качестве селекторов для оформления спомощью CSS.
В оригинале:
>> One cool thing about id attributes is that, like classes, you can style them using CSS.
Речь именно о том, что class и id - это селекторы, а не CSS-сущности.
✕ Your h2 element should be red.
и снова здравствуйте)
в другом браузере заработал
Сорри за долгий ответ, пропустил что-то уведомление.
А вы в каком браузере работаете, где бага проявилась?