Основи CSS для початківців, Вчимося керувати зовнішнім виглядом сайту

У далекому 2011 році, коли я закінчував 8 клас, вчитель інформатики та мій класний керівник в одній особі, зібрала 4 затятих геймерів, серед яких був і Ваш покірний слуга. Зібрала вона нас для того, щоб навчити створення сайтів, ось тоді я вперше познайомився і з основами HTML (минулий урок), і з основами CSS, про які Ви дізнаєтеся прямо зараз.

CSS (Cascading Style Sheets, у перекладі "каскадні таблиці стилів") - мова керування зовнішнім виглядом HTML-документів (сторінок сайтів). Те, що Ви бачите щодня у вікні браузера, створено таблицями каскадних стилів: колір фону, різних елементів сайту заданий спеціальними властивостями CSS; яким шрифтом написаний текст задано спеціальними властивостями CSS; все, що Ви бачите зараз, читаючи цей урок, задано властивостями CSS.

Відразу скажу Вам, що в уроці будуть лише базові стилі, для початківців. Практики сьогодні не буде, я хочу розібрати це на окремому посту.

Селектори CSS

Таблиця стилів CSS складається із стильових правил, а правила, у свою чергу, складаються з двох елементів:

Зараз докладніше зупинимося на селекторах. Існує кілька видів:

Селектор тегів. Як селектор служить HTML-тег, до якого має бути застосоване стильове правило;
Селектор класів. Як селектор служить клас елемента, який вказується в HTML-документі. Перед ім'ям класу ставиться крапка;
Селектор ідентифікаторів. Як селектор вказується ідентифікатор елемента, вказаний у HTML-документі. Перед іменем ідентифікатора ставиться знак "грати" (#).

Насправді їх набагато більше, але заглиблюватись ми не будемо, бо основу всіхінших селекторів становлять перелічені вище.

Про оформлення правил CSS говорити не буду, все скаже картинка вище.

Усі стильові правила CSS знаходяться у файлі style.css. Пошукайте його.

Властивості та значення CSS

В одному CSS-правилі може бути зазначено декілька властивостей та їх значень. Перераховуються вони через знак «крапка з комою» (;):

Для легкості сприйняття інформації властивості перераховуватиму за їх призначенням, тобто для фону — окремо, для тексту — окремо і так далі.

Для керування тлом сайту або окремого елемента існує декілька властивостей

background — основна властивість фону, за допомогою якого можна встановити до п'яти характеристик (значень): колір, зображення, чи прокручуватиметься фон чи ні разом зі скролом (прокруткою), керування повторенням фонового зображення, початкове положення фонового зображення . За ці характеристики також відповідають окремі властивості, які перелічені нижче;

background-image — встановлює фонове зображення сайту або елемента. Значення: url (шлях до файлу) none (скасування фонового зображення) inherit (спадкування батьківського значення). Приклад:
background-repeat - керування повторенням фонового зображення сайту або елемента. Значення:

no-repeat (без повторень фонового зображення);
repeat (повтор зображення);
repeat-x (повтор зображення по горизонталі);
repeat-y (повтор зображення по вертикалі);
inherit (спадкування батьківського зображення).

background-position — керування позицією фонового зображення. Значення:

left (ліво);

right (право);

центр (центр);

top (вгору);

bottom (вниз).

background-color — керування кольором тла сайту або окремого елемента. Значення: кодове значення кольору. Знайти його можна за допомогою спеціальних онлайн-сервісів (ColorScheme).

Першу основну властивість CSS розібрали.

Для керування зовнішнім виглядом тексту, як і тлом, існує кілька властивостей.

font - основна властивість шрифту. Може поєднати у собі кілька характеристик;
font-size - розмір шрифту. Задається у відсотках, пікселях (звичніше), пункти (pt);
font-weight - Товщина шрифту. Значення:

bold - напівжирний;
normal - нормальне зображення.

font-family - вказується сімейство шрифтів. Як значення виступає назва сімейства шрифту;

font-style - ця властивість задає зображення шрифту. Значення: normal (звичайне накреслення) та italic (курсив);

Властивості тексту

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

text-align - горизонтальне вирівнювання тексту. Значення: justify (по ширині), center (по центру), left (ліворуч), right (правим краєм)
color - колір тексту. Як значення використовується кодове значення кольору, можна також використовувати англійські значення текстів (red, white, black)
line-height - Висота рядка. Як значення можна використовувати як пікселі (px) і відсотки (%), так і спеціальні множник (1.5 - міжрядковий інтервал).
letter-spacing - інтервал між символами. Значення можна виставити пікселями та прописати normal (нормальний інтервал)

Вирівнювання елемента

Вирівняти праворуч або лівим краєм будь-який елемент сайту можна за допомогою однієї стильової властивості -float. Значення: left (ліворуч), right (правим краєм).

Обрамлення елемента

За допомогою стильової властивості «border » можна задати обрамлення, видимі межі. Можна вказати кілька значень: товщину кордону (px, %), колір кордону (кодове значення кольору), стиль кордону. Значення стилів кордону визначають її зовнішній вигляд:

Також можна встановити межі для окремої сторони елемента такими властивостями:

border-bottom - нижня межа елемента;
border-top - верхня межа елемента;
border-right - кордон з правого боку елемента;
border-left - межа з лівого боку елемента.

Значення для перелічених вище задаються точно так, як і для основної властивості.

Відступи між елементами задаються властивістю margin.

margin - задає відступи елемента з кожної сторони. Може містити кілька значень, що вказуються пікселями чи відсотками;
margin-left - відступ з лівого боку;
margin-right - відступ з правого боку;
margin-top - відступ зверху;
margin-bottom - відступ знизу.

Поля навколо елемента

Поля навколо елемента встановлюються властивістю «padding «. Вказується так само, як і відступи (margin) і має властивості, що встановлюють поля по одній стороні:padding-left,padding-right,padding-top,padding-bottom.

Розмір елемента

Можна встановити висоту та ширину елемента властивостями "width" - ширина і "height" -висота. Як значення виступають числові значення в пікселях або відсотках. Також можна встановити максимально та мінімально можливі значення ширини та висоти елемента за допомогою властивостей: max-width, min-width, max-height, min-height.

Ось і розібрали основи CSS. Я сам знаю тільки те, що перерахував вище, тому суворо не судіть.

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

Сподіваюся, що я недаремно сидів кілька годин над написанням цього матеріалу.