2.7 Стильове оформлення сторінок.

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

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

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

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

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

  • Зовнішні стилі. Впливають на весь сайт. Винесені в окремий файл з розширенням css (Наприклад, style.css).

  • Цей файл прив'язують до html-сторінки з допомогою тегу <link>, що описується в <head>:
    <link href=    "style.css" rel="stylesheet">

Приклад 1.

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

    2. У цій папці створіть папку css.

    3. Завантажте Notepad++.

    4. В Notepad++ створіть новий файл style1.css і збережіть його в папці css папки Урок_2.7.

    5. В Notepad++ створіть файл Sample_2_7.html і збережіть його в папці Урок_2.7.

    6. У файлі Sample_2_7.html пропишіть html-код .

    7. Пропишіть стилі у файлі style1.css.

Очікуваний результат.

Файл Sample_2_7.html

Файл style1.css

Завдання 1.

    1. Створіть файл style2.css і збережіть його в папці css папки Урок_2.7.

    2. Завантажте файл Less2_7_1.html (посилання для скачування внизу сторінки) і збережіть його в папці Урок_2.7.

    3. Перенесіть стилі із файлу Less2_7_1.html у зовнішню таблицю стилів style2.css. (видаліть з одного файла і вставте в інший).

    4. Забезпечте зв'язок файлу Less2_7_1.html із файлом style2.css, вказавши в <head>
      <link href="css/style2.css" rel="stylesheet">

Завдання 2.

    1. Завантажте файл Less2_7_2.html (посилання для скачування внизу сторінки) ) і збережіть його в папці Урок_2.7.

    2. Забезпечте відображення тексту, заданого в файлі, згідно зразка.

    3. Стилі збережіть у файлі style3.css папки css, вилучивши їх з веб-сторінки.