Главная страница  /  Занятия  /  #3  /  Каскадирование и наследование стилей в CSS

Каскадирование и наследование стилей в CSS

Задание:

Показать каскадирование и наследование стилей в CSS.

HTML–код (index.html):

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Каскадирование и наследование стилей в CSS</title>
     <link rel="stylesheet" href="styles.css">
     <style>
      .secondDiv, .thirdDiv	{ color: green; }
     </style>
    </head>
   
    <body>
     <div class="firstDiv">
      <p>Первый абзац</p>
     </div>
     <div class="secondDiv">
      <p>Второй абзац</p>
     </div>
     <div class="thirdDiv" style="color: blue;">
      <p class="orangeParagraph">Третий абзац</p>
     </div>
    </body>
   
   </html>

CSS–разметка (styles.css):

   p					{ margin: 0; padding: 0; }
   
   .firstDiv, .secondDiv, .thirdDiv	{ color: red; }
   .orangeParagraph			{ color: orange; }

Результат:

Результат выполнения задания можно посмотреть здесь.