HTML використовується для структурування вмісту сторінки. CSS використовується для форматування цього структурованого вмісту.
CSS був створений для надання web-дизайнерам можливостей точного дизайну, підтримуваних всіма браузерами.
Поява CSS стало революцією в світі web-дизайну.Конкретні переваги CSS:
- управління відображенням безлічі документів за допомогою однієї таблиці стилів;
- більш точний контроль над зовнішнім виглядом сторінок;
- поданням для різних носіїв інформації (екран, друк, і т. д.);
- складна і пророблена техніка дизайну.
CSS це мова стилів, що визначає відображення HTML-документів. Наприклад, CSS працює з шрифтами, кольором, полями, рядками, висотою, шириною, фоновими зображеннями, позиціонуванням елементів
Правила в CSS
CSS надає можливість створювати правила, які легко змінювати, редагувати и застосовувати до усіх визначених нами елементів. Кожне правило, складається з двох частин. У лівій частині міститься селектор (selector), а у правій блок визначення (declaration block). Блок визначення складається з набору властивостей (property) та їх значень (value).
Селектор – елемент, який визначає правило. Властивість описує елемент, що вводиться. Значення визначають (природу) параметри властивостей
Стиль CSS (CSS style) - це набір властивостей тексту, наприклад: гарнітура шрифту, його розмір, насиченість ліній, колір, колір фону, тип рамки і її товщина та інше.
селектор {
властивість: значення;
властивість: значення;
властивість: значення;
}
Правило CSS (CSS rule) - це вираз, який привласнює властивості одному або декільком стилям. Ось приклад правила, яке вказує назву шрифту і колір для стилів H1 і H2:
H1, H2 {font-family: Anal; color: red;}
Між правилами і стилями існують відносини типу більшість-до-більшості. Одне правило можна застосовувати до будь-якої кількості стилів, і до одного стилю можна застосовувати будь-яку кількість правил.
Застосування CSS до HTML-документу
Метод 1: Інлайн / In-line (атрибут style)
Можна застосовувати CSS до HTML за допомогою HTML-атрибуту style. Червоний колір фону можна встановити так:
<title>Приклад</title>
</head>
<body style="background-color: #FF0000;">
<p>Це червона сторінка</p>
</body>
</html>
See the Pen inline-css by kravets (@raisa69) on CodePen.
Цей спосіб використовується у тому разі коли окремому елементу потрібно надати декілька стилів не використовуючи вбудовані або зовнішні стилі. Застосування цього способу несе за собою певні недоліки:
- збільшується об’єм файлу, що приводить до збільшення часу завантаження веб-сторінки.
- ускладнює редагування документів
Метод 2: Внутрішній (тег style)
Другий спосіб вставки CSS-кодів - HTML-тег <style>. Наприклад:
Внутрішню таблицю стилів (Embedded Style Sheet) розміщують безпосередньо в розділі HEAD, у блоці, який обмежений тегами < STYLE> та </STYLE>.
See the Pen embedded style sheet css by kravets (@raisa69) on CodePen.
Метод 3: Зовнішній (посилання на таблицю стилів)
Зовнішня таблиця стилів це просто текстовий файл з розширенням .css. Наприклад, таблиця стилів називається style.css і знаходиться в папці css.
Щоб створити посилання з HTML-документа (index.html) на таблицю стилів (StyleText.css з папки css треба у контейнері <head> вставити наступний HTML-код:
<link rel="stylesheet" type="text/css" href="css
/StyleText.css" />
приклад файлу StyleText.css:
Це посилання вказує браузеру, що він повинен використовувати правила відображення HTML-файлу з CSS-файлу.
Найважливіше тут те, що кілька HTML-документів можуть посилатися на одну таблицю стилів. Інакше кажучи, один CSS-файл можна використовувати для керування відображенням безлічі HTML-документів.
See the Pen external style sheet css by kravets (@raisa69) on CodePen.
Тег Link - непарний тег необхідний для підключення зовнішніх файлів. У тега декілька атрибутів:
Селектори
За допомогою різних селекторів можна вибрати один або групу елементів. Селекторів доволі багато, тому розглянемо основні, які можуть застосовуватися щодня.
Селектор елемента (тегу)
Описує, до якого типу елементів буде застосоване CSS-правило. Селектор елемента недостатньо специфічний для того, щоб стилізувати окремі елементи, тому найчастіше застосовується для оформлення всіх тегів одного типу на сторінці. Наприклад, якщо у всіх посилань в документі потрібно прибрати підкреслення.
/* Застосується до всіх абзаців на сторінці */p {font-size: 24px;}/* Застосується до всіх посилань на сторінці */a {text-decoration: none;}
Селектор класу
Основний селектор в сучасній розробці. Використовується разом із глобальним атрибутом class. Ім'я класу задається тільки англійською мовою, і це обов'язково іменник, що описує цей елемент. Для поповнення словникового запасу використовуйте довідник, словник термінів і скорочення.
<h1 class="title">Привіт, я Mango.</h1>
<p class="text">
Ласкаво просимо на мою особисту сторінку. Тут можна подивитися
<a class="link" href="">проекти</a>.
</p>
В CSS використовується селектор класу, щоб задати стилі для одного і більше елементів з однаковим значенням атрибута class (ім'ям класу). У селекторі, перед ім'ям класу ставиться крапка ..
/* Застосується до всіх тегів з класом title */
.title {font-weight: 500;}/* Застосується до всіх тегів з класом text */.text {color: brown;font-size: 18px;}/* Застосується до всіх тегів з класом link */.link {text-decoration: none;}
В імені класу використовуються тільки маленькі літери і тире. Наприклад, list, list-item, logo-image тощо. Підкреслення list_item, великі літери ListItem або цифри listitem27 вважаються поганим тоном.
Композиція класів
В елемента може бути кілька класів, тоді вони записуються через пробіл.
<element class="value1 value2 value3"></element>
Це можна застосовувати для комбінування і повторного використання стилів. Створимо розмітку і стилі для компонента повідомлень.
<p class="alert success">Поповнення рахунку виконано</p>
<p class="alert warning">Увага, будуть змінені тарифи</p>
<p class="alert error">Помилка проведення транзакції</p>
У стилях описуємо кілька правил: загальних для всіх повідомлень і специфічних для кожного типу.
/* Загальні стилі для всіх типів повідомлень */
.alert {
font-size: 24px;
font-weight: 500;
}
/* Специфічні стилі для кожного типу */
.success {
color: green;
}
.warning {
color: orange;
}
.error {
color: red;
}
See the Pen css-class-composition by kravets (@raisa69) on CodePen.
Завдання для самостійного виконання
1. Заголовки
1.1 Рекомендації по використанню заголовків і підзаголовків
1.1.1 Використання заголовка h1
1.1.2 Використання підзаголовків (h2-h6)
Завдання №2
Текст для веб-сторінки проекту komputercenter:
Гуртки інформатики та програмування працюють в Палаці дітей та юнацтва з 1987 року. В комп’ютерному центрі Палацу щорічно займається близько 200 дітей 1-11 класів загальноосвітніх навчальних закладів нашого міста.
Вихованці гуртків – учасники, призери та переможці міського, обласного та Всеукраїнського конкурсів учнівської молоді з інформаційних технологій, обласного конкурсу з Web-дизайну, міської, обласної та Всеукраїнської олімпіад з інформатики, Всеукраїнської Інтернет-олімпіади, міського конкурсу комп’ютерного малюнку, Всеукраїнського тижня науки і техніки, Всеукраїнського турніру юних інформатиків, турніру „Екософт”, національного чемпіонату комп’ютерних талантів „Золотий байт”. Багато талановитих випускників гуртка є студентами та випускниками вищих навчальних закладів. Колишні гуртківці Палацу обрали професії, пов’язані з інформаційними технологіями та працюють за цим фахом як за кордоном (Росія, Ізраїль, Австралія, Японія, США, Канада), так і в Україні.
Досвідчені викладачі здійснюють підготовку за напрямками:
для груп початкового рівня - "Основи програмування для молодших школярів"(середовища Microsoft Kodu Game Lab та Scratch)
для груп початкового рівня навчання – основи Web-дизайну (мова HTML, CSS)
для груп основного рівня навчання – гурток інформатики та програмування – вивчення основ програмування на базі однієї з мов програмування JAVA, PYTHON, C++;
для груп вищого рівня навчання - поглиблене вивчення основ програмування, використання візуальних середовищ програмування, сучасних технологій(середовище візуального програмування MS Visual Studio, мова програмування C#);
для груп олімпіадного напрямку (вищого рівня) - курс "Алгоритмізація та математичні основи програмування"
для всіх вікових категорій - Робототехніка (WeDo - початковий рівень, Наука та технології - основний рівень, Mindstorms, Arduino - вищий рівень)
Завдання 3
See the Pen external stylesheet css task by kravets (@raisa69) on CodePen.
Завдання 4
See the Pen inline_style_css_task by kravets (@raisa69) on CodePen.
Завдання 5
See the Pen external stylesheet css task by kravets (@raisa69) on CodePen.