Форматування за допомогою CSS. Списки. CSS відступи та поля

CSS (англ. Cascading Style Sheets, укр. Каскадні таблиці стилів) — спеціальна мова, яка використовується для опису зовнішнього вигляду сторінок, написаних мовами розмітки даних. CSS (каскадна або блокова верстка) прийшла на заміну табличній верстці вебсторінок. Головна перевага блокової верстки - розділення змісту сторінки (даних) та її візуальної презентації (оформлення).

• CSS розшифровується як Cascading Style Sheets (каскадні таблиці стилів)

• CSS описує як HTML елементи мають відображатись на екрані, папері або інших носіях

• CSS економлять багато часу. Вони можуть контролювати макет кількох вебсторінок одночасно

• Зовнішні таблиці стилів зберігаються в окремих CSS файлах

  CSS використовується для визначення стилів ваших вебсторінок, включаючи дизайн, макет та варіанти відображення для різних пристроїв та розмірів екрана.

  • CSS розв’язав велику проблему

  HTML НІКОЛИ не повинен містити теги для форматування вебсторінки!

  HTML був створений для опису змісту вебсторінки, наприклад:

  <h1>Це заголовок</h1>

  <p>Це параграф.</p>

  CSS економить багато роботи!

  Описи стилю зазвичай зберігаються у зовнішніх файлах з розширенням .css.

  За допомогою зовнішнього файлу таблиці стилів ви можете змінити зовнішній вигляд всього сайту, змінивши лише один файл css!

  ---

  Примітка. Більшість сучасних веббраузерів продовжують підтримувати старі вебсайти, які були зроблені відповідно до специфікацій HTML3.2 та HTML4, де використовувались теги форматування безпосередньо в файлах HTML, та відображають їх відносно правильно. Але при створенні сучасних вебсайтів РЕКОМЕНДУЄТЬСЯ використовувати форматування лише в окремих CSS-файлах, які підключаються до файлів HTML!

  CSS Синтаксис

  Набір правил CSS складається із селектора та блоку об’яви (декларації):

  

  Селектор вказує на елемент HTML, який ви хочете стилізувати.

  Блок об’яв містить одну або кілька об’яв, розділених крапкою з комою.

  Кожна об’ява включає назву CSS-властивості та значення, розділені двокрапкою.

  Об’ява CSS завжди закінчюється крапкою з комою, а блоки об’яв беруться у фігурні дужки.

  

  CSS Коментарі

  Коментарі використовуються для пояснення коду і можуть допомогти при редагуванні початкового коду пізніше.

  Коментарі ігноруються браузерами.

  

  Пояснення прикладу

  • p - це селектор у CSS (він вказує на елемент HTML, який потрібно стилізувати: <p>).

  • color - це властивість, а red (червоний колір) - це значення властивості

  • text-align - це властивість, а center (по центру) - це значення властивості

    CSS Селектори

    CSS селектори використовуються для "пошуку" (або вибору) HTML-елементів, які ви хочете стилізувати.

    Можна розділити CSS селектори на п’ять категорій:

    • Прості селектори (вибір елементів на основі імені, ідентифікатору, класу)

    • Комбінаторні селектори (вибір елементів на основі визначених відношень між ними)

    • Селектори псевдокласів (вибір елементів на основі визначеного стану)

    • Селектори псевдоелементів (вибір і стилізація частини елемента)

    • Селектори атрибутів (вибір елементів на основі атрибуту або значення атрибуту)

      CSS селектор елемента

      Селектор елементів обирає HTML елементи на основі імені елемента.

      CSS селектор id

      Селектор id використовує атрибут id HTML елемента для вибору визначеного елемента.

      Ідентифікатор (id) елементу є унікальним на сторінці, тому селектор id використовується для вибору одного унікального елемента!

      Щоб обрати елемент з визначеним ідентифікатором, напишіть символ хешу (#), а потім id елемента.

      Примітка: Ім’я Id не може починатися з цифри!

      CSS селектор class

      Селектор class обирає HTML елементи з визначеним атрибутом класу.

      Щоб обрати елементи з визначеним класом, введіть символ крапки (.), а потім ім’я класу.

      Універсальний CSS селектор

      Універсальний селектор (*) виділяє всі елементи HTML на сторінці.

      

      CSS Селектор групування

      Селектор групування обирає всі HTML елементи з однаковими визначеннями стилю.

      Подивіться наступний код CSS (елементи h1, h2 та p мають однакові визначення стилю):

      Буде краще згрупувати селектори, щоб мінімізувати код.

      Щоб згрупувати селектори, розділяйте кожен селектор комою.

      Всі прості CSS селектори

      Три способи підключення CSS до html-сторінки

      Існує три способи підключення таблиці стилів CSS до вебсторінки:

      • Зовнішня таблиця стилів (External)

      • Внутрішня таблиця стилів (Internal)

      • Вбудований стиль (Inline)

      ---

      Зовнішня таблиця стилів

      За допомогою зовнішньої таблиці стилів ви можете змінити зовнішній вигляд всього сайту, змінивши лише один файл!

      Кожна HTML сторінка має містити посилання на файл зовнішньої таблиці стилів всередині елемента <link>.

      Примітка. Підключення файлу зовнішньої таблиці стилів є найбільш розповсюдженим способом використання каскадних таблиць стилів.

      Зовнішню таблицю стилів можна написати в будь-якому текстовому редакторі (наприклад, в стандартному Блокноті на Windows). Файл не повинен містити жодних HTML-тегів. Файл таблиці стилів має бути збережено з розширенням .css.

      Ось як виглядає файл 'mystyle.css':

      Примітка: Не додавайте пробіл між значенням властивості та одиницею (наприклад margin-left: 20 px;). Правильно писати: margin-left: 20px;

      CSS Коментарі

      Коментарі використовуються для пояснення коду і можуть допомогти при редагуванні початкового коду пізніше.

      Коментарі в коді ігноруються браузерами.

      CSS коментар розташовується всередині елементу <style>, починається з / та закінчується з /:

      CSS Назви кольорів

      В CSS колір можна вказати за допомогою попередньо визначеного імені кольору:

      CSS Background Color - Колір фону

      Ви можете встановити колір фону для HTML-елементів:

      CSS Text Color - Колір тексту

      Ви можете встановити колір тексту:

      Hello World

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

      CSS Border Color - Колір межі

      Ви можете встановити колір меж:

      

    • CSS Background - Фон

      ---

      CSS background-color - Колір фону

      Властивість background-color визначає колір фону елементу.

      Інші елементи

      Ви можете встановити колір фону для будь-яких HTML-елементів:

      

      Opacity / Transparency - Непрозорість / Прозорість

      Властивість opacity визначає непрозорість / прозорість елементу. Може приймати значення від 0,0 до 1,0. Чим менше значення, тим прозоріше:

      CSS background-image

      Властивість background-image визначає зображення для використання в якості фону елемента.

      Властивості CSS Border - Межа

      CSS властивості border дозволяють вказати стиль, ширину і колір межі елемента.

      Стиль CSS Межі

      Властивість border-style визначає, яку межу відображати.

      Допускаються наступні значення:

      • dotted - Визначає крапкову межу.

      • dashed - Визначає пунктирну межу.

      • solid - Визначає суцільну межу.

      • double - Визначає подвійну межу.

      • groove - Визначає тримірну рифлену межу. Ефект залежить від значення кольору межі.

      • ridge - Визначає тримірну ребристу межу. Ефект залежить від значення кольору межі.

      • inset - Визначає внутрішню тримірну межу. Ефект залежить від значення кольору межі.

      • outset - Визначає зовнішню тримірну межу. Ефект залежить від значення кольору межі.

      • none - Не визначає межі.

      • hidden - Визначає приховану межу.

      Властивість border-style може мати від одного до чотирьох значень (для верхньої межі, правої межі, нижньої межі та лівої межі).

      CSS Вирівнювання тексту і напрямок тексту

      У цьому розділі ви дізнаєтеся про такі властивості:

      • text-align

      • text-align-last

      • direction

      • unicode-bidi

      • vertical-align

      ---

      Вирівнювання тексту

      Властивість text-align використовується для встановлення горизонтального вирівнювання тексту.

      Текст можна вирівняти за лівим або правим краєм, по центру або за шириною.

      У наступному прикладі показано вирівнювання по центру, ліворуч і праворуч (вирівнювання за лівим краєм за замовчуванням, якщо напрямок тексту зліва направо, і вирівнювання за правим краєм за замовчуванням, якщо напрямок тексту справа наліво):

      Тінь тексту

      Властивість text-shadow додає тінь до тексту.

      В простому випадку ви вказуєте лише горизонтальну тінь (2px) та вертикальну тінь (2px):

      Ефект тіні тексту!

      CSS Посилання

      ---

      За допомогою CSS посилання можні стилізувати різними способами.

      

    • Посилання можуть бути оформлені за допомогою будь-якої CSS-властивості (наприклад, color, font-family, background і т.д.).Крім того, посилання можуть бути оформлені по-різному в залежності від того, в якому стані вони знаходяться.

      Чотири стани посилань:

      • a:link - звичайне, не відвідуване посилання

      • a:visited - посилання, яке вже відвідав користувач

      • a:hover - посилання, коли користувач наводить на нього курсор миші

      • a:active - посилання в той момент, коли воно натиснуте (активне)