Восполнение пробелов
@honey_and_moneyХочу сегодня объяснить вам некоторые моменты, которые мы пропустили в ходе изучения CSS.
Во-первых: CSS код можно вставлять прямо в html-код между тэгами <style> и </style>
Выглядит вот так:
Фон для каждого параграфа на странице будет красным.
Так же, CSS код можно добавлять любому html-тэгу индивидуально.
Делается это через атрибуты и выглядит очень просто:
Свойства указываются через точку с запятой и применяются только к тэгу, атрибутом которого они являются.
Вложенные селекторы
Что делать если у вас на странице сто тэгов-заголовков <h1>, но вы хотите например задать цвет текста только тем тэгам, которые находится внутри блока div?
Тогда нам поможет такая конструкция:
Понимать следует так: первым идет родительский тэг, вторым - дочерний (вложенный). Тогда всем тэгам <h1>, которые лежат внутри любого блока <div> будет применено наше свойство - розовый цвет текста.
Теперь усложним наши требования. У нас внутри некоторого блока div есть еще куча ссылок <a href="..."></a>, внутри которых тоже содержится тэг <h1>. При использовании предыдущей конструкции наше свойство применится и к таким тэгам <h1> (Они уже будут не дочерними тэгами, уровень вложенности - два. Кто-то называет их внуками, потом правнуками и так далее) Так вот, что если мы не хотим применять свойство к внукам, а только к дочерним элементам?
То есть вот в таком html-коде, нам надо применить CSS-свойство только к первому заголовку <h1>
Тут на помощь приходит такая конструкция:
Используем знак больше - теперь свойство выполняется для дочерних элементов и никаких больше.
И еще один способ задания CSS-свойств. С помощью классов.
Тут наше свойство будет применено ко всем блокам div с классом "test-class"
Вроде бы всё просто, а возможности нам открываются просто широчайшие. Как вы уже понимаете, эти конструкции можно комбинировать:
Вот такую запись следует понимать так: Данное свойство будет применено ко всем дочерним тэгам <h1> (Дочерним для тэга <a>). Где в свою очередь тэг <a> должен лежать внутри div-блока с классом "test-class"
@honey_and_money - Никогда не поддавайтесь эмоциям. Старайтесь всё делать и решать на холодную голову