2.2.2. Теорія. CSS-розмітка тексту

Каскадні таблиці стилів - CSS(Cascading Style Sheets) - мова, яку використовують для відображення HTML коду (кольори, шрифти, розташування та розміри блоків, інші аспекти). Це спрощує процес створення сторінок і поліпшує їх дизайн. (https://uk.wikipedia.org/wiki/CSS)

Використання стилів у веб-технологіях схоже на їх використання в текстових редакторах — текст спочатку вводять, а потім форматують, користуючись стилями.

Підключати аркуші стилів можна різними способами.

  • Inline-стилі. Впливають лише на цей тег. Записуються в конкретному тезі (h1...h6, p, hr, body та ін ) після атрибуту style= у лапках.

  • Embedded style. Впливають на всю сторінку. Записуються в <head> веб-документа. При описі стилів вказується парний тег <style> і в ньому - селектор - назва елемента (список назв елементів) і у фігурних дужках опис стилю.

Приклад 1.

  1. Створіть папку Урок_2.2.

  2. Завантажте файл kryla.html, збережіть його в папці Урок_2.2 і відкрийте за допомогою Notepad++.

  3. Оберіть кодування відповідно до прописаного в charset (windows -1251).

  4. Скоригуйте html-код так, щоб результат відповідав зразку (допишіть тег </br>).

  5. Не забувайте щоразу, вносячи зміни у код, зберігати його і переглядати результат з допомогою браузера.

  1. Внесіть зміни у head документа, описавши стилі, які будуть застосовані до всього документа.

Результат має виглядати так:

      • Змініть стиль лише другого куплета, вирівнявши його за центром і задавши курсивний стиль тексту. Для цього в body в параграфі перед другим куплетом дописуємо стиль, що стосується лише цього параграфа.
        <p style=" text-align: center; font-style: italic; " >

    • У style заголовку <head>... </head> опишіть стиль h1{ колір тексту - червоний, вирівнювання за центром} і застосуйте <h1> для назви вірша "Крила" .

    • Вставте тег <hr> в <body> веб-сторінки до і після назви вірша

    • В заголовку <head>... </head> до опису style додайте стиль для синьої горизонтальної лінії

hr {

background-color: #0000ff; /* колір лінії */

width: 400px; /* довжина лінії */

height: 20px; /* товщина лінії */

}

    • Вирівняйте підпис "Ліна Костенко" за правими краєм. Подумайте, який стиль треба описати для цього. Результат буде таким:

Самостійна 1. Забезпечте відображення тексту, заданого в файлі Less2_2.html, на веб-сторінці згідно зразка. Для форматування використайте стилі.