📑 Практика "Роботи"

Задамо оформлення для заголовків статтей сторінки про роботів  за допомогою внутрішніх стилів.

Для початку – виділимо змістові області сторінки: горище, навігаційну панель, область статтей, підвал.

Колір тла цілої сторінки: 

body {background-color: #E7F1B7;}

Виділимо горище та підвал сторінки: задаючи колір тла та тексту, шрифт, його розмір та вирівнювання по центру.

      header, footer {                /* визначення параметів для горища та підвалу */
        background:#3B1F00;           /* колір тла */
        color:#FADDBE;                /* колір тексту */
        font-family:'Comic Sans MS';  /* гарнітура тексту */
        font-size:40pt;               /* розмір шрифту */
        text-align: center;           /* вирівнювання тексту */
        margin-top:10px;              /* відступ згори */
        margin-bottom: 10px;          /* відступ знизу */
      }
      footer {font-size:10pt;}        /* розмір шрифту для підвалу */

Зверніть увагу, що опис оформлення для footer містить суперечливі вказівки стосовно розміру тексту – 40 і 10 пунктів. Застосований буде останній варіант, оскільки він йде нижче у розділі опису стилів. Натомість усі решта параметрів форматування будуть застосовані із першого блоку опису, спільного для обох елементів.

Для навігаційної панелі  задаємо не лише зовнішній вигляд тексту, але й колір для гіперпосилань – який обов’язково має відрізнятись для відвіданих visited та невідвіданих link посилань. Крім того, задамо виділення кольором посилання, на яке наводимо вказівник миші – має змінитись колір тла.

 nav {
        font-family:'Comic Sans MS';                 /* гарнітура тексту */
        font-size:20pt;                              /* розмір шрифту */
        text-align: center;                          /* вирівнювання тексту */
        margin-bottom: 20px;                         /* відступ знизу */
        margin-top:10px;                             /* відступ згори */
      }
      a:link {color: #3B1F00;}                       /* колір невідвіданих посилань */
      a:visited {color: #895B29;}                    /* колір відвіданих посилань */
      a:hover, a:active {background-color: #DEE5E7;} /* виділення посилань при наведенні */

Створимо стиль для оформлення заголовків трьох статтей:

h1 {
        font-family:'Comic Sans MS'; /* гарнітура тексту */
        font-size:20pt;              /* розмір шрифту */
        color:#1C4656;               /* колір тексту */
        text-align: center;          /* вирівнювання тексту */
        background:#FFFAF5;          /* колір тла */
      }

Для цікавішого оформлення сторінки, використаємо рамочки. Наприклад, для статтей та загалом області тексту можна задати різні стилі та кольори рамочок.

      h1 {        
        border-style: double;    /* стиль рамки */
        border-color: #406776;   /* колір рамки */
        margin-bottom: 10px;     /* відступ знизу */
        margin-top:10px;         /* відступ згори */
      }
      section {
        background:#FBFDF3;   /* колір тла */
        border-width:5px;     /* ширина рамки */
        border-style:groove;  /* стиль рамки */
        width:70%;            /* ширина блоку */
        margin-left: 10px;    /* відступ зліва */
        margin-right:10px;    /* відступ справа */
        margin-bottom: 10px;  /* відступ знизу */
        margin-top:10px;      /* відступ згори */
        padding:50px;         /* відступ полів */
        margin: auto;         /* поле c
      }

Зверніть увагу, що ширину елементів можна вказувати в абсолютних числах або у відсотках. Зараз практикується так званий адаптивний веб-дизайн, за якого ширина елементів сторінки має динамічно змінюватись для різних розмірів екранів та вікон браузера – тому краще встановлювати розміри у відсотках.

Для вступного абзацу створимо власний стиль:

      .vstup {
        border-width:5px;           /* ширина рамки */
        border-style:groove;        /* стиль рамки */
        background-color: #DEE5E7;  /* колір тла */
        width:70%;                  /* ширина блоку */
        padding:20px;               /* відступ полів */
        margin-bottom: 10px;        /* відступ знизу */
        margin-top:10px;            /* відступ згори */
        margin: auto;               /* поле */
      }

І застосуємо його тегом <p class="vstup">

Поки що вміст сторінки виглядає вже краще, аніж простий суцільний текст, проте варто додати трохи полів та відступів, розташувати елементи на зручній для сприймання відстані. Для цього налаштовуються відступи margin (зовнішні) та padding (внутрішні).  

Окремо варто розглянути тег вставки відео з YouTube для нього слід задати ширину 100%, а не фіксовану, і розмістити цей тег всередині так званого блоку div, для якого описати стиль:

.video {
        border-width:5px;           /* ширина рамки */
        border-style:groove;        /* стиль рамки */
        background-color: #FFFAF5;  /* колір тла */
        width:80%;                  /* ширина блоку */
        padding:5px;                /* відступ полів */
      }

А безпосередньо у тілі сторінки вказати <div class="video" style='margin: auto;'>

Таким чином ми отримаємо вирівнювання ролика за центром блоку, котрий займає 80% ширини батьківського розділу (у нашому випадку це section), з відповідними відступами.

Тепер сторінка набула більш професійного вигляду – інформацію не просто подано на сторінці, її достатньо зручно переглядати. Крім того, при звуженні вікна браузера, можна зауважити, що ширина елементів сторінки змінюється, що дозволить комфортно переглядати таку сторінку з мобільного пристрою з малим екраном.