Embedded Files
Каскадні таблиці стилів - 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.
Створіть папку Урок_2.7.
У цій папці створіть папку css.
Завантажте Notepad++.
В Notepad++ створіть новий файл style1.css і збережіть його в папці css папки Урок_2.7.
В Notepad++ створіть файл Sample_2_7.html і збережіть його в папці Урок_2.7.
У файлі Sample_2_7.html пропишіть html-код .
Пропишіть стилі у файлі style1.css.
Очікуваний результат.
Файл Sample_2_7.html
Файл style1.css
Завдання 1.
Створіть файл style2.css і збережіть його в папці css папки Урок_2.7.
Завантажте файл Less2_7_1.html (посилання для скачування внизу сторінки) і збережіть його в папці Урок_2.7.
Перенесіть стилі із файлу Less2_7_1.html у зовнішню таблицю стилів style2.css. (видаліть з одного файла і вставте в інший).
Забезпечте зв'язок файлу Less2_7_1.html із файлом style2.css, вказавши в <head>
<link href="css/style2.css" rel="stylesheet">
Завдання 2.
Завантажте файл Less2_7_2.html (посилання для скачування внизу сторінки) ) і збережіть його в папці Урок_2.7.
Забезпечте відображення тексту, заданого в файлі, згідно зразка.
Стилі збережіть у файлі style3.css папки css, вилучивши їх з веб-сторінки.
Page updated
Google Sites
Report abuse