Основи CSS

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. Червоний колір фону можна встановити так:

    <html>
        <head>
            <title>
Приклад</title>
        </head>
        <body style="background-color: #FF0000;">
            <p>
Це червона сторінка</p>
        </body>
    </html>

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

Метод 2: Внутрішній (тег style)

Другий спосіб вставки CSS-кодів - HTML-тег <style>. Наприклад: 


Внутрішню таблицю стилів (Embedded Style Sheet) розміщують безпосередньо в розділі HEAD, у блоці, який обмежений тегами <STYLE> та </STYLE>.

Метод 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-документів.

Тег Link

Непарний тег необхідний для підключення зовнішніх файлів. У тега декілька атрибутів:
·         href - вказує URL-адресу файла, що підключається.
·         rel - вказує на тип відношення даного документа до зовнішнього
·         rel="stylesheet" вказує, що зовнішній файл визначає стиль поточного документа.
·         type - вказує тип і параметри приєднаної таблиці стилів.

Завдання для самостійного виконання


1 1.   Створити файл h1-p-1.html з внутрішньою  таблицею стилів (Embedded Style Sheet, яка розміщена безпосередньо в розділі HEAD, у блоці, який обмежений тегами <STYLE> та </STYLEта зовнішньою таблицею стилів (h1-p-2.html) і файл h1-p.css в папці css такого зразка:





2. Текст для файлу можна скопіювати: 


1. Заголовки

Заголовки є одним з найважливіших інструментів для структурування тексту.
1.1 Рекомендації по використанню заголовків і підзаголовків
Ось деякі рекомендації з використання заголовків в HTML-сторінці.
1.1.1 Використання заголовка h1
Якщо в размітці не використовуються теги <section> чи <article>, то не рекомендується, щоб на одній сторінці містилось декілька заголовків верхнього рівня. Всередині тегів <section> і <article> може бути своя ієрархія заголовків.
1.1.2 Використання підзаголовків (h2-h6)
При використанні підзаголовків не рекомендується пропускати рівні заголовків, тобто після заголовка h1 повинен йти підзаголовок h2 і тільки потім підзаголовок h3.

1. Заголовки

Заголовки є одним з найважливіших інструментів для структурування тексту.

1.1 Рекомендації по використанню заголовків і підзаголовків

Ось деякі рекомендації з використання заголовків в HTML-сторінці.

1.1.1 Використання заголовка h1

Якщо в размітці не використовуються теги <section> чи <article>, то не рекомендується, щоб на одній сторінці містилось декілька заголовків верхнього рівня. Всередині тегів <section> і <article> може бути своя ієрархія заголовків.

1.1.2 Використання підзаголовків (h2-h6)

При використанні підзаголовків не рекомендується пропускати рівні заголовків, тобто після заголовка h1 повинен йти підзаголовок h2 і тільки потім підзаголовок h3.


3.  Колір фону сторінки в таблиці стилів: background: #d5ebfbб, колір  тексту в  абзаці: color: #595b5c, колір тексту заголовка: color:red, розмір  заголовку Н1: font-size:16pt, для  заголовку Н2 колір тексту: color: #0088cc


Завдання №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 - вищий рівень)






5 коментарів:

  1. Всім привіт, я Адорян Адельмо з села Ясіня в україні, і я просто хочу висловити величезну подяку службам фінансових позик pedro за їх щирість, відкритість, прозорість, правдивість, любов та підтримку під час і після отримання від них кредитних коштів. Я пережив багато чого в житті, і час не дозволить мені сказати все, що я пережив у рік пандемії, але Бог відповів на мої молитви завдяки підтримці та любові від служб фінансових позик Pedro, які обійняли мене та зрозумів мене, незважаючи на мої початкові сумніви та несерйозність, і з його добрим серцем і любов'ю я тепер власник житла через його 3 позичкові фонди з процентними ставками, і я обіцяю поширювати цю новину, а також розповісти світу, що в Інтернеті все ще є справжніх і мало хороших кредитні фірми, які можуть допомогти, а також оживити сухі кістки, як я. не забудьте послухати і прочитати це свідчення, тому що це справжній досвід, що змінює життя, і будь-хто, хто потребує такого повороту, не повинен вагатися або сумніватися в цьому, тому що я довів і клянусь Богом на небесах, що ця історія реальна і також історія мого досвіду з ними. зв’яжіться з ними сьогодні, щоб отримати консолідований кредит, бізнес-позику, житловий кредит, автокредит, особисту позику. електронна пошта: pedroloanss@gmail.com whats-app: +1- 8632310632

    ВідповістиВидалити