Практическое занятие

Задание

Составим код для размещения элементов в блоках с взаимосвязанными значениями стилей, благодаря использованию переменных CSS.. В разделе main увеличим в 1,3 раза размер шрифта по сравнению с размером шрифта в разделе footer.


<!doctype html>
<html>
<head>
<title>Переменные</title>
<style>
* {margin:0; padding:0; box-sizing: border-box;}
:root {
     --first-color: #FF7373;
     --second-color: #006363; 
     --third-color: #5CCCCC;
     --fours-color: #86B32D;
     --font-size-abzac: 20px;
     --font-size-zagolovok: 30px;
}
body {
     background-color: var(--first-color);
     color: var(--second-color);
}
header {
   width:auto;
   height: 150px;
   background-color: var(--second-color);
   font-size: var(--font-size-zagolovok);
   color: var(--fours-color);
   text-align: center;
   padding-top: 30px;
}
main {
   width:auto;
   height: auto;  
   font-size: calc(var(--font-size-abzac)*1.3);
   color: var(--third-color-color);
   padding:15vh;
}
footer {
   width:auto;
   height: 24vh;  
   font-size: var(--font-size-abzac);
   color: var(--fours-color);
   background-color: var(--second-color);
   padding:12vh 15vh;
}
</style>
</head>
<body>
   <header>
     <h1>Цифровые технологии 21 века</h1>
   </header>
   <main>
      <p>Нынешнее время разительно отличается от предыдущего: здесь правит техника и товаром выступает информация. Недаром же говорят, что 21 век — век информационных технологий.
         То, что еще совсем недавно казалось новым и неизведанным, сегодня уже неактуально.
         Мы покоряем космос уже не в околоземном пространстве, а отправляем свои исследовательские мини-станции на Марс, ведется разведка Сатурна, Юпитера и Титана.
         Когда-то об этом можно было прочесть только в фантастических книгах. Например, идеи романов Жюль Верна, такие как подводная лодка, стали реальностью в 20-м веке. Настало время реализации самых смелых фантазий современности.
         Человек исследует океанское дно с помощью сверхсложной аппаратуры и в онлайн-режиме это могут наблюдать миллионы пользователей Интернета. Глобальная паутина стала всеобъемлющим пространством, которое объединило все и вся.
         Люди из разных уголков нашей планеты свободно общаются в режиме реального времени друг с другом, обмениваются фото-, видеозаписями, мнениями, обсуждают насущные вопросы.
         Все большее число людей могут с уверенностью заявить, что 21 век — век информационных технологий, потому что эти самые технологии не отпускают их в реальную жизнь.
      </p> 
   </main>
   <footer>
         <p>&copy;Все права защищены</p>
   </footer>
</body>
</html>


Скопируйте код в редактор и поэкспериментируйте со значениями переменных стилей.



Last modified: Tuesday, 31 March 2020, 10:56 PM