seodon.ru | Учебник CSS - Ответ по уроку Селекторы потомков

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Результат - Селекторы потомков</title>
  <style type="text/css">
   body {
    margin: 0; /* убираем поля по краям страницы */
    background: #fff; /* устанавливаем белый фон страницы, на случай, если у кого-то в браузере по умолчанию он не белый */
   }
   img { border: 0; } /* убираем рамки у изображений */
   a { color: #000; } /* черный цвет ссылок */
   ul {
    list-style-type: none; /* убираем маркеры списков */
    margin: 0; /* убираем внешние поля списков */
    padding: 0; /* убираем отступы списков */
   }

   #header {
    background: url('image/fon12.jpg'); /* устанавливаем фоновое изображение для шапки */
   }
   #header img { vertical-align: bottom; } /* выравниваем картинку в шапке по низу строки */

   #menu {float: left;} /* всплытие колонки с меню к левой стороне */
   #sidebar { float: right; } /* всплытие колонки с доп. меню вправо  */
   #menu, #sidebar {
    width: 200px; /* ширина обоих меню */
    text-align: center; /* ширина боковых колонок */
   }
   #menu div, #sidebar div {
    font-weight: bold; /* жирный шрифт названий меню */
    font-size: 130%; /* размер шрифта */
    border-top: 3px #000 solid; /* стили нижней стороны рамки */
    border-bottom: 1px #000 solid; /* стили верхней стороны рамки */
    margin-top: 10px; /* небольшое верхнее поле между названием меню и шапкой */
   }
   #menu span { color: red; } /* красный цвет текста в меню внутри SPAN */
   #sidebar span { color: blue; } /* синий цвет текста в доп. меню внутри SPAN */

   #content { margin: 0 220px; } /* размер боковых полей центральной колонки */
   #content div { text-align: center; } /* устанавливаем по центру содержимое DIV внутри центральной колонки */

   #footer {
    background: url('image/fon13.jpg'); /* фоновое изображений для футера */
    padding: 20px 0; /* внутренние отступы в футере сверху и снизу */
   }
   #footer ul { text-align: center; } /* выравниваем содержимое списков по центру самого блока UL */
   #footer li { display: inline; } /* превращаем элементы списка во встроенные, чтобы убрать перенос строки */
  </style>
 </head>
 <body>
  <div id="header">
   <a href="https://seodon.ru/"><img src="image/logo8.jpg" width="200" height="100" alt="Сайт Сеодон"></a>
  </div>
  <div id="menu">
   <div>Меню</div>
   <ul>
    <li><a href="https://seodon.ru/css/selektory-potomkov.php"><span>Ссылка 1</span></a></li>
    <li><a href="https://seodon.ru/css/selektory-potomkov.php">Ссылка 2</a></li>
    <li><a href="https://seodon.ru/css/selektory-potomkov.php"><span>Ссылка 3</span></a></li>
    <li><a href="https://seodon.ru/css/selektory-potomkov.php">Ссылка 4</a></li>
    <li><a href="https://seodon.ru/css/selektory-potomkov.php"><span>Ссылка 5</span></a></li>
    <li><a href="https://seodon.ru/css/selektory-potomkov.php">Ссылка 6</a></li>
   </ul>
  </div>
  <div id="sidebar">
   <div>Дополнительно</div>
   <ul>
    <li><a href="https://seodon.ru/css/selektory-potomkov.php"><span>Ссылка 1</span></a></li>
    <li><a href="https://seodon.ru/css/selektory-potomkov.php">Ссылка 2</a></li>
    <li><a href="https://seodon.ru/css/selektory-potomkov.php"><span>Ссылка 3</span></a></li>
    <li><a href="https://seodon.ru/css/selektory-potomkov.php">Ссылка 4</a></li>
    <li><a href="https://seodon.ru/css/selektory-potomkov.php"><span>Ссылка 5</span></a></li>
    <li><a href="https://seodon.ru/css/selektory-potomkov.php">Ссылка 6</a></li>
   </ul>
  </div>
  <div id="content">
   <p>Lorem ipsum dolor sit amet consectetuer magna tortor Fusce hendrerit aliquet. Eget ut et libero convallis orci risus lacinia convallis pede et. Dictumst neque sed velit eros metus leo lorem ut libero augue. Tristique Lorem laoreet mauris et at sem lorem congue Vivamus quis. Quis Sed adipiscing lorem orci metus sed aliquam laoreet urna Vestibulum. Tellus vitae eleifend elit urna consequat sit et vestibulum elit ut. At tincidunt aliquam ligula elit non amet dui elit elit justo. Sed amet justo a Nullam aliquet Curabitur at ut convallis tellus. Morbi dolor tincidunt Phasellus semper Nullam ipsum consequat ut dapibus velit. Vestibulum Nullam et Donec Lorem sit gravida dolor Integer ac Cum. Commodo sem elit pede Mauris euismod Maecenas dolor est quis malesuada. Vivamus hendrerit sit id ligula facilisis pellentesque rhoncus massa Curabitur nibh. </p>
   <p>Mauris Curabitur arcu urna mauris urna at porttitor semper ac Cum. Eget lacinia sem at tincidunt et sociis quis sollicitudin nulla sed. Et neque velit nibh netus sapien Lorem lacus nascetur augue pellentesque. Id convallis Phasellus convallis et Pellentesque felis id et malesuada hendrerit. Risus vel ligula ipsum in Vestibulum wisi Sed urna Donec Sed. Mattis neque nunc tincidunt Quisque Quisque metus Curabitur sem aliquet ante. In congue pellentesque felis et elit interdum ac dui felis metus. Sapien Curabitur sed magna nulla sagittis nibh Aenean tincidunt ut dictumst. Magna est nulla vel Phasellus sed nibh habitasse libero nibh augue. Tortor a elit Cras quis tellus et et Cum enim Nam. Dictum vel Vestibulum magna congue id id tortor urna rutrum sem. Nulla lacus porttitor Suspendisse Donec nunc eleifend Nunc mollis euismod pretium. Hendrerit parturient est orci vel est cursus lacus malesuada Duis mus. Sem Suspendisse tempor semper id et vitae Sed.</p>
   <p>Consectetuer Aenean consequat nulla augue vitae cursus ligula tellus adipiscing laoreet. Lacus In ligula sed ut et massa orci eu et elit. Vestibulum elit aliquam semper wisi elit arcu pulvinar libero fermentum tempus. Curabitur pede elit nec eu felis suscipit Pellentesque Curabitur id Suspendisse. Facilisis quis consectetuer est euismod Quisque Donec condimentum Curabitur dignissim Curabitur. Dolor nec vitae risus metus felis ipsum lacus nibh pede sagittis. Cursus auctor quis mollis odio pretium nulla elit at ac neque. Vitae ridiculus Phasellus massa lacus lobortis id mollis dictumst velit tortor. Feugiat nunc cursus dui est nibh et eros nisl adipiscing dapibus. Vivamus montes Sed dui wisi justo mus elit adipiscing risus turpis. Aliquet et In non neque eget suscipit Nam gravida platea platea. Dignissim at nisl cursus augue laoreet orci montes et Curabitur elit. Porttitor quis turpis Ut quis velit In tellus Nullam ante Donec. Elit pede nunc sollicitudin pretium dignissim id magna feugiat id vitae. Lorem Aenean elit amet libero et ut id Pellentesque tincidunt Mauris. Nisl mus Donec congue nibh mollis amet vitae sed tincidunt eu. Pede ipsum Vestibulum Nam non consectetuer amet adipiscing condimentum.</p>
   <div><a href="https://seodon.ru/css/selektory-potomkov.php"><img src="image/kluch.png" width="150" height="150" alt="Скрипичный ключ"></a></div>
   <p>Dui enim Aliquam Nulla sagittis fringilla auctor at leo Donec elit. Tempus magna Sed adipiscing Sed turpis sodales tellus interdum semper Vestibulum. Eros Vivamus Suspendisse orci nascetur congue gravida faucibus at justo pellentesque. Interdum id convallis nascetur magna wisi consequat Quisque pellentesque Nullam natoque. Lorem Sed tristique elit nec dui id neque vitae eu ut. Turpis a adipiscing Vestibulum Maecenas sagittis dui tellus mollis nibh habitant. Interdum quis laoreet et facilisis hendrerit dui natoque est congue turpis. Tristique nibh Vestibulum tellus aliquet volutpat sem Maecenas consectetuer semper eu. Interdum Phasellus pellentesque Ut condimentum lacinia eu egestas dui dolor Nunc. In tortor ut nibh vitae vestibulum enim.</p>
   <p>Leo velit non est felis condimentum ligula Maecenas eget quis ornare. Sodales interdum risus nec ornare Donec turpis Vestibulum In et Phasellus. Et dictumst adipiscing Pellentesque turpis non elit sed et Nam Morbi. Wisi justo Nam non velit mauris felis quis vitae in vel. Phasellus Sed vel nibh sem lacus magna laoreet non risus eros. Cras nunc purus id Duis aliquam Maecenas Curabitur convallis mi amet. Pellentesque Quisque auctor ipsum orci nulla wisi Pellentesque interdum quis sollicitudin. Vestibulum consequat tempor iaculis velit tristique amet Aenean malesuada velit nec. Et Quisque Duis condimentum iaculis nunc ipsum risus scelerisque nibh et. Ac vel Maecenas ut Aliquam id semper.</p>
   <p>Congue Pellentesque Curabitur Curabitur ipsum interdum nulla vel Phasellus tellus vitae. Vitae id lorem interdum Donec sit mollis urna interdum Maecenas congue. Quis ut et et Sed amet Vivamus Nunc vestibulum Quisque vel. In lacus vitae egestas neque et nascetur Nam nulla libero ligula. Tincidunt dolor consequat arcu molestie eros neque Donec vitae Morbi tincidunt. Quis ipsum gravida Morbi et magnis sed In vel id et. Ut eget tellus Phasellus lacinia eros dui consectetuer In odio pharetra. Consequat rutrum Nam ac quis metus felis Ut sapien id ipsum. Quis In eu augue Sed rhoncus dui pede laoreet interdum morbi. Consectetuer turpis rutrum fringilla orci velit Pellentesque iaculis ipsum id at. Mattis eget feugiat tellus at tincidunt Cras pellentesque Sed enim sagittis. Pretium tempus tempus convallis justo pede sagittis orci et amet eget. Congue ante elit ipsum urna et urna Aliquam et quis mauris. Malesuada dui Curabitur pede id tellus Praesent a dolor id ridiculus. Nam faucibus eros convallis pretium elit nulla nibh.</p>
   <p>Tempus accumsan at et adipiscing congue et Aenean commodo pede Sed. Non Curabitur consequat elit commodo id Phasellus sit tellus adipiscing Sed. Eget In leo Curabitur et enim Nunc elit dui velit Proin. Odio accumsan laoreet Nulla Nullam sodales tortor vel et sapien consectetuer. Nam a pulvinar sed Curabitur Curabitur congue pellentesque eget Lorem ut. Iaculis enim tellus urna mauris est Ut justo hendrerit fringilla nibh. Sed Aenean elit quis augue nunc Curabitur id vitae sed elit. Volutpat Vestibulum auctor feugiat vitae facilisis iaculis vitae Mauris ac magnis. Eleifend mauris Nunc Quisque laoreet Integer risus congue tincidunt lacus Donec. Nibh lacinia natoque tempus odio pede at ligula ligula rutrum mi. Augue dolor Donec a orci Nam vel sed Aliquam In at. Vitae Nullam Sed velit ullamcorper lacinia quis in quis elit Sed. Nulla ac orci orci augue Integer nulla lacus tincidunt consectetuer tempus. Sodales sapien consequat orci ultrices lorem ultrices molestie id.</p>
  </div>
  <div id="footer">
   <ul>
    <li><a href="https://seodon.ru/">Главная</a></li>
    <li><a href="https://seodon.ru/news/">Новости</a></li>
    <li><a href="https://seodon.ru/mapsite/">Карта сайта</a></li>
    <li><a href="https://seodon.ru/podderzhat/">Поддержать сайт</a></li>
    <li><a href="https://seodon.ru/contact/">Контакты</a></li>
   </ul>
  </div>
 </body>
</html>

Да, думаю вам здесь пришлось серьезно попотеть, зато представьте, какие возможности предоставляют нам селекторы потомков! Естественно ваш вариант верстки может немного отличаться от данного. А теперь давайте разберемся с некоторыми моментами.

Для чего была выровнено изображение в шапке по низу строки. Дело в том, что по умолчанию браузеры выравнивают изображения по базовой линии строки, на которой они находятся, поэтому блок с изображением всегда немного больше, чем высота самой картинки. А вот если ее прижать к низу, то размеры высоты сравняются. Так как в примере высота фонового изображения шапки и высота картинки одинаковы и равны 100px, то, чтобы фон не проглядывал снизу картинки и пришлось сделать это выравнивание. В данном случае можно было поступить и по другому — просто явно задать высоту шапки в 100px, но первый вариант все же правильней.
Внутренние отступы футера были сделаны для того, чтобы его немного увеличить по высоте и при этом, чтобы строка меню в нем была по центру по вертикали. Вы могли поступить и по-другому, например, увеличить отступы или поля (в данном случае без разницы) самого блока списка. Да и это еще не все варианты, CSS — не только простой, но и мощный инструмент.
Ну, для чего <LI> были превращены в элементы уровня строки думаю понятно. Кстати, этого же можно добиться, если применить к элементам списка свойство float, но тут пришлось бы больше стилей писать...

Ну что, поехали дальше или чуть-чуть отдохнете?

Вернуться в урок

→ Перейти к следующему уроку