Керівництво css
Для тих хто наповнює, наповнив і тим, хто ще має наповнити сторінки сайту.
Припустимо, що нам потрібно внести зміни на сайті або навпаки додати контент, але з певним відображенням, і тут у нас виникають проблеми:
- Як взагалі вносити зміни на сайт? Відповідь: тексти на сайтах відображаються за допомогою спеціальних тегів мови розмітки HTML (саме ця мова задає структуру відображення тексту при виведенні на екран - вказує, де йде абзац, а де нумерований список). Але які HTML теги використовувати?
- Як змінити зовнішній вигляд тексту: колір, положення, розмір тощо? Відповідь: для цієї мети використовуються CSS (Cascading Style Sheets — каскадні таблиці стилів), але знову питання: які стилі використовувати, щоб отримати бажаний результат?
Для вирішення подібних завдань потрібно звернутися до посібника з css і спробувати підібрати потрібний тег, клас, зрозуміло, якщо front-end фахівець передбачив і підготував відповідний посібник із набором інструментів. Це може бути як внутрішня інструкція компанії, яка виконала розробку сайту, так і загальнодоступну інструкцію у відкритому доступі.
Як користуватися
Для прикладу візьмемо інструменти та керівництво популярного загальнодоступного css фреймворку bootstrap. Чому саме бутстрап? Так тому що велика ймовірність того, що Ваш сайт використовує цей фреймворк, і Ви зможете випробувати всю потужність керівництва по css, якщо ж ні, не біда, в наступній статті я розповім як додати bootstrap для вашого сайту.
Отже, розглядатимемо те, що знадобиться для наповнення змісту сторінок, деякі блоки даного керівництва опустимо. У нас залишилися такі розділи:
Неважко здогадатися, що якщо нам потрібно зробити маніпуляціюз текстом, ми заглянемо у розділ друкарня, якщо щось потрібно за формами - йдемо у розділ форми тощо. …
Давайте вирішимо пару завдань для кращого розуміння:
Завдання №1: вирівняти текст центром.
Рішення: переходимо в розділ друкарня в підрозділ класи вирівнювання та знаходимо потрібний клас, у нашому випадку це text-center, тепер можна застосувати даний клас до елемента (html-тегу), який потрібно вирівняти по центру – ми пропишемо потрібний клас css до потрібного тегу наприклад для абзацу (тег
) це буде виглядати так:
Завдання №2: зробити зображення у вигляді кола.
Рішення: переходимо в розділ зображення до підрозділу форми зображення вибираємо потрібний клас, у разі це img-circle, і задаємо потрібному елементу даний клас. Ми успішно вирішили чергове завдання, не вдаючись до сторонньої допомоги:
Звідси можна зробити висновок: маючи гарний набір інструментів, завжди можна знайти їх застосування та швидко вирішити поставлені завдання.