В этой части учебника вы узнаете о модели DOM в CSS, что это такое, так как, перед изучением основных возможностей, также будет не много материала про селекторы.
Что такое модель DOM:
DOM означает от англ. Document Object Model — «объектная модель документа» — это независящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML документов, а также изменять содержимое, структуру и оформление таких документов.
Также DOM можно назвать просто деревом объектов.
Суть работы с DOM:
Суть в том, что есть дочерние элементы и родительские, и если вы, к примеру, объявляете свойство для одного объекта, то оно автоматически применяется для всех дочерних, например, цвет заднего фона или цвет текста.
Давайте разберём этот пример по этой картинке.
Как видите на картинки есть объект <div>, и если вы для него примените свойство color: red, которое должен поменять цвет текста на красный, и все его дочерние элементы унаследуют это свойство, в нашем случае, это <h2> и <p>.
Селекторы:
Теперь перейдём к работе со самими селекторами, тут стоит сказать, что есть их три типа, по названию элемента, по классу элемента и по ID элемента.
Если с названиями элемента/тега всё понятно, то с классами и ID, всё сложнее, по сути это просто атрибуты в HTML, атрибут class и атрибут id, вот пример.
1 2 | <h1 id="red">Красный заголовок</h1> <h1 class="green">Зелёный заголовок</h1> |
А вот CSS.
1 2 3 4 5 6 7 | #red { color: red; } .green { color: green; } |
Как можете сразу заметить, селектор id начинается с решётки, а класса, с точки, это главное что стоит запомнить, вот результат.
То есть всё работает.
Ещё надо сказать, что ID он должен быть уникальный на странице, то есть, вы можете хоть сколько использовать атрибутов id на странице, но значение каждого должно быть уникальным, тогда как классов одинаковых может быть хоть сколько.
Приоритеты селекторов:
Также у селекторов разные приоритеты, вот вам не большой список что бы понят это, чем больше число тем выше приоритет.
- id — 1000;
- class — 100;
- Название элемента — 10;
Как можете заметить самый высокий у ID, на втором месте, class и потом уже идёт название элемента/тега, вот вам не большой пример, что бы ещё лучше понять это.
1 | <h1 id="red" class="green">Обычный заголовок</h1> |
Мы создали заголовок <h1> с id="red", и class="green", сейчас посмотрим на CSS.
1 2 3 4 5 6 7 8 9 10 11 | #red { color: red; } .green { color: green; } h1 { color: blue; } |
Вот что у нас получилось.
Как вы видите, в итоге получилось свойство, которое было под селектором id.
Более точные селекторы:
Последнее что разберём, это как делать более точные селекторы, например, может появится такая ситуация, что в одном блоке абзац должен быть красный, а в другом синий, и вот я сейчас покажу как это сделать.
1 2 3 4 5 6 7 | <div class="red"> <p>Это абзац красный</p> </div> <div> <p>Это абзац синий</p> </div> <p>Это обычный чёрный абзац</p> |
Вот такой у нас HTML получился, мы используем два тега <div>, но один с классом, а другой без, также ещё есть абзац, который не имеет класса и контейнера, вот CSS.
1 2 3 4 5 6 7 | div.red p { color: red; } div p { color: blue } |
Как видите, тот абзац который который находится в контейнере с классом, должен быть красным, а тот который без класса синим, вот результат.
Как видите всё работает так как надо, но также надо сказать, что такие цыпочки могут быть бесконечны, может иметь хоть сколько классов и т.д..
Вывод:
В части учебника мы разобрали модель DOM в CSS и селекторы, но это не все селекторы котрые есть, тут было описана только основная работа с ними.
Если будет много комментариев на тему, что нужны все, то я её дополню, хотя на мой взгляд в 90% случаях, этого предостаточно.
Подписываетесь на соц-сети:
Оценка:
Загрузка...