Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь FAQ Написать работу КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Древовидная структура HTML документаСодержание книги Поиск на нашем сайте
Любой HTML код имеет древовидную структуру, в которой первый используемый тег - <html> выступает предком (прародителем) всех остальных элементов, из него выходят такие элементы как <head> и <body>:
HTML элемент, расположенный внутри другого элемента является его потомком. Элемент <title> потомок <head>, а элемент <h2> и <p> на изображении потомки <body>.
Обратите внимание на важный момент, что элемент <i> является потомком одновременно для элемента <p>, <body> и для <html>.
Родительский элемент связан с другими элементами более низкого уровня и находится на один уровень выше их. Например, <html> элемент является родительский элементом для <head> и <body>, а элемент <p> является родительским для элемента <i>.
Элемент, подчиненный другому элементу более высокого уровня, является дочерним. На изображении ниже оба элемента <h2> и <p> являются дочерними по отношению к <body>, но элемент <i> при этом не является дочерним для элемента <body>, так как он расположен внутри тега <p>, и является дочерним именно для него.
Дочерние элементы для одного и того же родительского элемента, называются элементами одного уровня (соседними элементами, или сестринскими элементами). Например, такие элементы как <head> и <body>, или <h2> и <p>.
Еще раз акцентирую ваше внимание на том, что сестринские элементы расположены на одном уровне в пределах одного родителя. К примеру, элементы <h2> и <title> являются просто элементами одного уровня, а не сестринскими элементами.
Селекторы потомков В конце предыдущей статьи, мы с Вами уже рассматривали примеры с селекторами потомков, их основное назначение заключается в том, чтобы единообразно отформатировать элементы, которые расположены внутри других элементов (содержатся внутри других элементов). Например, во всех заголовках <h2>, в которых находится текст, отражённый курсивом (элемент <i>), вы хотите выделить определённым цветом. Решение этого вопроса, надеюсь, для Вас выглядит вполне очевидно, и вы используете для этой задачи селектор потомков: h2 i { color: red; }Вместо h2 i в нашем случае можно воспользоваться и универсальным селектором h2 *, так как внутри элемента <h2> находится только один элемент, но если мы захотим, добавить еще какой-то элемент, то придется изменять стили. У Вас может возникнуть вопрос: почему мы просто не создали селектор класса для i? Благодаря селектору потомка у нас отсутствует необходимость с использованием глобального атрибута class назначать каждому элементу <i> свой класс, что может значительно сэкономить наше время.
В следующем примере разместили три ссылки (элементы <a>) внутри элемента маркированного списка (элемент <li>), и разместили еще одну ссылку внутри абзаца:
Селекторы, которые будут работать аналогично и выбирать элементы <a> внутри элементов <li>: html body ul li a { блок объявлений } html ul li a { блок объявлений } html li a { блок объявлений } body ul li a { блок объявлений } body li a { блок объявлений } ul li a { блок объявлений } li a { блок объявлений }Обратите внимание, что селекторы потомков могут включать более двух элементов, то есть содержать весь путь по дереву страницы, или наоборот могут не включать какие-то элементы, которые вложены по пути к форматируемому элементу и это тоже будет работать. Старайтесь без необходимости не включать "лишние" селекторы по пути к форматируемому элементу и использовать короткие селекторы.
Используя селектор потомков, давайте отформатируем ссылки, которые находятся только внутри элементов маркированного списка: li a { text-decoration: none; /* убираем декорирование текста (нижнее подчеркивание под ссылкой) */ font-size: 20px; /* устанавливаем размер шрифта */ }
Как вы понимаете, ссылка, помещённая внутри элемента <p> не будет отформатирована, для неё мы создадим свой стиль: p a { color: #000; /* устанавливаем черный цвет текста */ background-color: yellow; /* устанавливаем цвет заднего фона */ }
|
||||||
|
|
Последнее изменение этой страницы: 2021-05-27; просмотров: 281; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 216.73.217.21 (0.007 с.) |
…
…
…
…
