CSS ръководство

За тези, които попълват, попълват и тези, които все още трябва да попълнят страниците на сайта.

Нека си представим, че трябва да направим промени на сайта или, напротив, да добавим съдържание, но с определен дисплей и тук имаме проблеми:

Как да направя промени в сайта? Отговор: текстовете на сайтове се показват с помощта на специални тагове на езика за маркиране HTML (именно този език задава структурата за показване на текст, когато се показва на екрана - той посочва къде отива абзацът и къде е номерираният списък). Но какво тогава да използваме HTML таговете?
Как да променя външния вид на текста: цвят, позиция, размер и т.н.? Отговор: За тези цели се използва CSS (Cascading Style Sheets), но отново въпросът е: кои стилове да използвате, за да получите желания резултат?

За да разрешите подобни проблеми, трябва да се обърнете към ръководството за css и да се опитате да изберете желания етикет, клас, разбира се, ако специалистът от предния край е предоставил и подготвил подходящо ръководство с набор от инструменти. Това може да бъде или вътрешно указание на компанията, извършило разработването на сайта, или публично достъпно указание в публичното пространство.

Как да използвам

Например, нека вземем инструментите и ръководствата на популярния bootstrap css framework с отворен код. Защо Bootstrap? Да, тъй като има голяма вероятност вашият сайт да използва тази рамка и можете да изпитате пълната мощ на ръководството за css, ако не, няма значение, в следващата статия ще ви кажа как да добавите bootstrap за вашия сайт.

Така че ще разгледаме какво е необходимо за запълване на съдържанието на страниците, ще пропуснем някои блокове от това ръководство. Остават ни следните раздели:

Лесно е да се досетим, че ако трябва да манипулираме текста, тогава ще разгледаме раздела за типография, ако нещо е необходимо по отношение на формулярите, отиваме в раздела за формуляри и т.н. ...

Нека решим няколко проблема за по-добро разбиране:

Предизвикателство # 1: Подравняване на текста в центъра.

Решение: отидете в раздела за типография в подраздела за подравняване на класове и намерете желания клас, в нашия случай това е text-center, сега можете да приложите този клас към елемента (html таг), който трябва да бъде подравнен към центъра - ние ще напише необходимия клас css в желания маркер, например за абзац (tag

) ще изглежда така:

Задача номер 2: направете изображение във формата на кръг.

Решение: отидете в раздела за изображения в подраздела за образна форма, изберете желания клас, в нашия случай това е img-кръг и задайте този клас на желания елемент. Успешно решихме следващата задача, без да прибягваме до външна помощ:

Следователно можем да заключим: разполагайки с добър набор от инструменти, винаги можете да намерите тяхното приложение и бързо да решите задачите.