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; /* цвет фона страницы */
   }
   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; /* выравнивание содержимого колонок по центру */
   }
   .menuname {
    font-weight: bold; /* жирный шрифт названия меню */
    font-size: 130%; /* размер шрифта */
    border-top: 3px #000 solid; /* стили верхней части рамки */
    border-bottom: 1px #000 solid; /* стили нижней части рамки */
    margin-top: 10px; /* небольшое внешнее поле сверху */
   }
   #menu ul a:link { color: #000; } /* цвет непосещенной ссылки в меню */
   #menu ul a:visited { color: #000; } /* цвет посещенной ссылки */
   #menu ul a:hover { color: #ccc; } /* цвет ссылки под курсором мыши */
   #menu ul a:active { color: #ccc; } /* цвет активированной ссылки */
   #sidebar ul a {
    display: block; /* делаем ссылки в доп. меню блочными */
    color: #000; /* цвет текста ссылок */
    border: 1px #fff solid; /* стили рамки */
    padding: 5px; /* внутренние отступы */
   }
   #sidebar ul a:hover {
    border: 1px #000 solid; /* стили рамки для ссылок в доп. меню под курсопом мыши */
   }
   #sidebar ul a:active {
    color: #f00; /* цвет активированной ссылки доп. меню */
    border: 1px #f00 solid; /* стили рамки */
   } 
   #content { margin: 0 220px; } /* размер боковых полей центральной колонки */
   p > *:first-child {
    color: #f00; /* красный цвет любого первого дочернего элемента внутри параграфа */
   }
   p > strong:first-child {
    text-decoration: underline; /* подчеркнутый текст внутри первого дочернего STRONG внутри параграфа */
   }
   .images {
    height: 300px; /* высота блока с изображениями */
    position: relative; /* задаем относительное позиционирование, чтобы показать, что содержимое будет позиционироваться относительно этого блока */
   }
   #one, #two, #three {
   position: absolute; /* задаем абсолютное позиционирование для изображений */
   }
   #one {
   left: 200px; /* расстояние левого края первого изображения от левого края блока */
   top: 10px; /* расстояние верхнего края от верхнего края блока */
   z-index: 1; /* указываем положительное значение z-index, чтобы первое изображение было поверх двух других */
   }
   #two {
   left: 100px; /* расстояние левого края второго изображения от левого края блока */
   top: 85px; /* расстояние верхнего края от верхнего края блока */
   }
   #three {
   left: 250px; /* расстояние левого края третьего изображения от левого края блока */
   top: 85px; /* расстояние верхнего края от верхнего края блока */
   }
   #footer {
    background: url('image/fon13.jpg'); /* фоновое изображение для футера страницы */
    padding: 20px 0; /* размер верхнего и нижнего внутреннего отступа */
   }
   #footer ul { text-align: center; } /* располагаем содержимое списка внутри футера по центру */
   #footer li { display: inline; } /* делаем элементы списка встроенными */
   #footer ul a { color: #000; } /* цвет ссылок внутри списка в футере */
   #footer ul a:hover { text-decoration: none; } /* убираем подчеркивание у ссылок внутри списка футера, когда на них наводится курсор мыши */
  </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 class="menuname">Меню</div>
   <ul>
    <li><a href="https://seodon.ru/css/psevdoklassy.php">Ссылка 1</a></li>
    <li><a href="https://seodon.ru/css/psevdoklassy.php">Ссылка 2</a></li>
    <li><a href="https://seodon.ru/css/psevdoklassy.php">Ссылка 3</a></li>
    <li><a href="https://seodon.ru/css/psevdoklassy.php">Ссылка 4</a></li>
    <li><a href="https://seodon.ru/css/psevdoklassy.php">Ссылка 5</a></li>
    <li><a href="https://seodon.ru/css/psevdoklassy.php">Ссылка 6</a></li>
   </ul>
  </div>
  <div id="sidebar">
   <div class="menuname">Дополнительно</div>
   <ul>
    <li><a href="https://seodon.ru/css/psevdoklassy.php">Ссылка 1</a></li>
    <li><a href="https://seodon.ru/css/psevdoklassy.php">Ссылка 2</a></li>
    <li><a href="https://seodon.ru/css/psevdoklassy.php">Ссылка 3</a></li>
    <li><a href="https://seodon.ru/css/psevdoklassy.php">Ссылка 4</a></li>
    <li><a href="https://seodon.ru/css/psevdoklassy.php">Ссылка 5</a></li>
    <li><a href="https://seodon.ru/css/psevdoklassy.php">Ссылка 6</a></li>
   </ul>
  </div>
  <div id="content">
   <p>Lorem ipsum dolor sit amet <em>consectetuer Morbi</em> nulla diam a est. <em>Et ut Morbi vitae pede</em> nibh libero ante augue tellus hac. Ipsum nibh Nulla Suspendisse Mauris vel eget tincidunt a Mauris eros. Eros senectus lorem lorem sit Nulla laoreet Morbi natoque a Nulla. Elit urna urna magna elit a Sed congue volutpat libero justo. Et elit massa congue ac Maecenas Curabitur Sed sagittis sagittis mollis. Lacinia arcu quis mi libero accumsan Cras justo ut facilisis Nulla. Feugiat congue turpis sagittis nec adipiscing porta Nunc nisl orci ante. Natoque eget condimentum dictumst nisl velit at urna cursus a vestibulum. A sed ac est vitae justo semper at semper Aliquam rutrum. Congue tellus vitae eu a risus pellentesque massa sagittis faucibus in. Quisque ut Duis ornare condimentum Pellentesque eu Vestibulum Sed Vestibulum Nullam. Et.</p>
   <p>Egestas <strong>Quisque Ut congue</strong> tempor augue tempus ipsum <strong>malesuada Aenean Quisque</strong>. Nunc a elit tellus nibh montes Morbi adipiscing et sem Nunc. Justo hendrerit lobortis Quisque consectetuer malesuada tortor Vivamus facilisis volutpat nibh. Purus amet rhoncus condimentum leo tellus Nam elit Curabitur Nulla tellus. Nulla hendrerit magnis sem sed Curabitur Aliquam eu eget laoreet justo. Fringilla magna dui Fusce auctor dolor vitae nunc condimentum ut Vestibulum. Id interdum risus eget sed tincidunt Vestibulum risus In congue ac. In lacus semper vel eu Vestibulum tortor convallis pellentesque eget montes. Ut Nam et neque at tellus Curabitur rhoncus convallis velit consectetuer. Cum eros pede a elit lacus lorem semper Ut condimentum dictum. Aliquam pretium justo adipiscing nulla augue eros leo sem Curabitur Maecenas. Integer ante id Curabitur quis scelerisque et ipsum Suspendisse ac congue. Congue Nulla mauris congue id laoreet sodales.</p>
   <p>Metus vitae semper non Suspendisse ornare Sed In Phasellus Nulla vel. Dui nibh id tortor ante ante velit neque sem dolor Pellentesque. Id Integer habitant vel vel sem et orci fermentum libero fringilla. Sagittis tincidunt condimentum parturient ut tempus laoreet rutrum wisi et orci. Ullamcorper mollis cursus dolor ut et tellus sed lorem mattis Pellentesque. Nec Vestibulum urna tristique interdum In nec tincidunt nisl condimentum interdum. Consequat odio porttitor dictumst Nam dignissim leo semper vitae In ante. Quis semper magna mus justo Nulla Mauris iaculis ut dictumst molestie. Sed mauris senectus dolor Nunc sagittis Suspendisse ac nulla laoreet wisi. Auctor Curabitur ut molestie Nullam leo et at Curabitur neque quis. </p>
   <div class="images">
    <img id="one" src="image/one.png" width="150" height="150" alt="Один">
    <img id="two" src="image/two.png" width="150" height="150" alt="Два">
    <img id="three" src="image/three.png" width="150" height="150" alt="Три">
   </div>
   <p>Phasellus sapien porttitor ligula id semper interdum quis justo laoreet rhoncus. Pretium a nibh adipiscing ut Nulla semper pede ac est tellus. Mauris at adipiscing Curabitur convallis Ut Quisque et In leo Phasellus. Nulla auctor vel accumsan leo risus fringilla vitae non interdum eget. Ante natoque leo neque et platea et libero at et at. Turpis sit turpis montes Phasellus adipiscing ac consequat diam Donec semper. Eget quis facilisi orci arcu In adipiscing leo non scelerisque interdum. Mauris quis Nulla Pellentesque et ac Quisque nibh feugiat sapien cursus. Adipiscing mauris laoreet congue consectetuer tempus pede Morbi laoreet sem urna. Magnis gravida massa et Vestibulum mollis libero enim Integer Aenean et. Ut Morbi et lobortis convallis nibh pellentesque Ut Vivamus enim ut. Laoreet a turpis id nunc eros molestie hendrerit nisl laoreet nibh. Nibh et feugiat Phasellus orci elit interdum et Vestibulum volutpat sagittis. Condimentum risus ut mollis Curabitur nunc Nam at quis euismod congue. Quisque malesuada eget Vestibulum Nullam interdum mauris Duis accumsan Mauris orci. Nulla at.</p>
   <p>Neque rutrum vel mauris consequat nisl iaculis Vestibulum congue pede In. Et condimentum sed Praesent Sed habitasse ante mauris ut nec ligula. Elit Nullam senectus egestas eros Ut In lacinia tempus Donec lacus. Eu Aliquam nunc aliquet convallis magnis egestas lacus fringilla commodo nunc. Montes volutpat dignissim In Nulla congue lacinia justo ut risus et. Sed et felis quam semper est Ut libero fames metus ut. Mollis Aenean auctor lobortis felis tellus mi Nulla vel semper hac. Maecenas vitae iaculis sodales elit mauris pellentesque vestibulum lacinia urna cursus. In mauris senectus eros faucibus libero Lorem Curabitur Aenean laoreet ante. In Aenean et vestibulum vestibulum massa Nam Sed arcu Suspendisse ligula. Amet molestie ipsum eleifend justo elit vestibulum tempus cursus fermentum porta. Phasellus Curabitur et mus porttitor pede consequat enim Nulla mauris est. Sagittis auctor sapien ipsum sociis Lorem lacinia nibh sem id nulla. Id feugiat ut dapibus fringilla in Phasellus vitae massa nunc non. Congue wisi ut est lacinia dis.</p>
   <p>Tellus Nam convallis sodales condimentum habitasse et vel semper tellus ac. Mauris vitae id turpis Proin Curabitur Curabitur lacus Suspendisse eu ligula. Mauris in et accumsan elit quis Proin Vivamus dictum ullamcorper Sed. Sit ut elit convallis Maecenas pharetra at euismod sapien quis interdum. Justo auctor felis nibh laoreet eget eu ut Phasellus consequat nulla. Lobortis pellentesque vel libero vitae habitasse Vestibulum vitae Sed amet libero. Gravida consequat pellentesque justo Proin condimentum justo Fusce tempor habitant Nulla. Justo Quisque faucibus tortor tortor egestas metus semper enim pellentesque leo. Odio sagittis tellus tortor wisi sed vitae Nunc vitae massa a. Nibh libero wisi at orci Pellentesque platea justo odio venenatis non. Sem metus pellentesque ut Phasellus habitant Vestibulum convallis Maecenas Morbi Morbi. Pellentesque Curabitur pellentesque eu Nam Phasellus est pretium Curabitur semper sed. Tellus enim lacinia nec Vestibulum consequat metus ac Sed non massa. Enim felis Curabitur rhoncus laoreet Duis massa facilisis elit tempus pulvinar. At mus id Curabitur convallis nibh urna sagittis nibh pede urna. Consequat id consectetuer sodales morbi pretium Vivamus Nulla sagittis Sed diam. Vitae Nulla malesuada vitae Nulla pulvinar ut velit Vestibulum odio quis. Sodales accumsan orci nunc nibh Curabitur tempor.</p>
   <p>Eros Ut sem urna tortor pede ut netus ullamcorper interdum facilisi. Dolor senectus consectetuer id sed ut Lorem In Lorem interdum Vivamus. Venenatis vestibulum magnis non ornare vitae Suspendisse et parturient at ac. In Quisque sagittis ut wisi Integer semper et cursus amet pede. Velit Nullam facilisis pede justo ac orci Cras Nam in Pellentesque. Pellentesque amet dui nibh orci Curabitur semper felis ante pretium eros. Id nonummy urna consequat turpis volutpat hendrerit Morbi nec sociis suscipit. Risus Curabitur justo gravida convallis eget congue odio turpis condimentum Phasellus. Sed augue augue Phasellus pulvinar vitae tempor in at pellentesque neque. Fermentum Nullam congue lorem sit nec.</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>

Так, ну давайте, наверное, начнем со ссылок. Думаю вы уже поняли, что стили ссылок можно указывать совершенно по-разному. Можно, например, сначала задать стили для тега <A> безо всяких псевдоклассов, а потом дополнительно указать их для каких-то отдельных состояний (под курсором, активированная ссылка и т.д.) или не указывать. Можно сразу задать стили для всех состояний, используя псевдоклассы :link, :visited, :hover и :active, причем для некоторых из них записав одинаковые стили. А можно для каких-то состояний ссылок стили вообще не указывать. В общем, тут все зависит от того, что вы хотите получить в итоге, экспериментируйте.

Теперь обратите внимание на то, что в дополнительном меню для ссылок изначально была установлена рамка, по цвету совпадающая с фоном. Это было сделано для того, чтобы, при наведении курсора мыши, столбец не начинал прыгать из-за появления рамки. То есть рамка была установлена сразу, а потом она просто делалась видимой. Ну, а чтобы ссылки занимали все пространство элемента списка, они были сделаны блочными с помощью свойства display.

Как необходимо было прописать стили для изменения дочерних элементов думаю и так понятно. Если вы не справились, то просто посмотрите в HTML-код ответа, там все просто.

Теперь что касается позиционирования. Для начала изображения были помещены в отдельный блок. Это было сделано для того, чтобы было от чего их позиционировать. Если так не сделать, то ближайшим подходящим для этого элементом-предком оказывается блок создающий центральную колонку, а это уже не то, что надо. Ведь тогда не получится четко задать положение изображений между параграфами не зависящее от размеров окна браузера.

Ну и, наконец, чтобы изображение, находящееся в HTML-коде первым, располагалось поверх двух других, для него было применено свойство z-index с положительным значением. Все.

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

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