Когато отворите някой уебсайт, дизайнът му може да Ви хареса, а може и да не Ви хареса. Едва ли обаче си мислите какво се крие зад този дизайн. Лесно е да добавите текст и изображения; по-трудното е да се определи къде точно да бъдат разположени те и как точно да изглеждат. В днешно време много сайтове са създадени чрез PHP и/или HTML, но тези езици не предлагат никакъв начин да се форматира стилът на съдържанието. HTML е създаден с идеята да опише съдържанието на някоя страница, но не и външния ѝ вид. Това е моментът, в който можете да използвате CSS, или Cascading Style Sheets.

• Какво е CSS
• Кратка история
• Видове CSS
• Предимствата да използвате CSS
• Синтаксис
• Минимизиране на CSS
• Как да добавите Ваш CSS код?
• Заключение

Какво е CSS

CSS е език, базиран на правила, който се използва, за да се уточни стила на определени елементи на дадена уебстраница. “Базиран на правила” означава, че собственикът на сайта може да зададе групи от правила, които се прилагат за тези елементи. С други думи, CSS е език за дизайн, който се използва да се управлява начинът, по който изглежда даден уебсайт. Той може да се използва за по-прости неща като определянето на размера на шрифта, но, както ще видите по-надолу, има и някои значително по-сложни функционалности.

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

Кратка история

CSS е създаден през 1994 г. от Хаакон Ли, активист за приемането на голям брой уеб стандарти. По това време той работи с Тим Бърнърс-Лий, създателя на световната мрежа, така че има добър поглед върху HTML и първите сайтове. През 1995 г. той се присъединява към W3C (World Wide Web Consortium), международната организация за стандартизация на мрежата, която е създадена от Бърнърс-Лий. Там Ли работи с Бърт Бос, компютърен специалист, който създава уеббраузъра Арго като тестова среда за CSS. Заедно те създават спецификациите за CSS1 (1996), CSS2 (1998) и CSS3 (1999).

CSS1 позволява на разработчиците да задават размер и вид на шрифта, подравняване на текста, фонов цвят, отстояние и разположение на различни елементи.

CSS2 разширява горните функции, като добавя различни видове разположение (relative, absolute, fixed) и задаване на различни стилове според устройството, за което са предназначени - екрани, принтери и т.н.

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

Grid и Flexbox са два модула, които станаха много популярни в последно време, тъй като те позволяват адаптивни страници да се създават, без да се задава фиксирана позиция на елементите. Модулите са пример за богатия набор от функции, които са част от CSS. Модулът Grid Layout Ви позволява да създадете решетка от редици и колони, които са подходящи за по-мащабни проекти, докато модулът Flexible Box Ви позволява да добавяте контейнери за съдържание, подходящи за елементи с по-малък мащаб. Двата модула могат да бъдат комбинирани. Всички модерни браузъри ги поддържат както на настолни компютри, така и на мобилни устройства.

Видове CSS

Има различни начини да добавите CSS код към уебсайта си. Вероятно ще срещнете всеки от тях, но някои са по-използвани от други и има причина за това:

• Външен (External) – Целият CSS код се добавя в един-единствен .css файл в главната директория на сайта или някоя подпапка. Файловете на сайта зареждат нужния им CSS код от този файл. Това е най-добрият вариант, ако искате да оптимизирате кода на сайта, тъй като основните файлове няма да включват нищо, свързано с дизайна, а само функционален код. Също така употребата на един файл прави обновленията на дизайна по целия сайт много лесни с минимални промени в кода.

• Вътрешен (Internal) – CSS кодът се добавя в хедъра на всеки файл. Този вариант не е много често срещан, но може да се използва за сайтове, чийто дизайн не се обновява често. Предимството в случая е, че CSS кодът може да се обновява на една страница, без да бъдат засегнати останалите в случай, че нещо не сработи както трябва. Дори да има проблем на тази страница, останалите ще бъдат непокътнати.

• Вграден (Inline) – Части CSS код се добавят директно в кода там, където са нужни. Така кодът се добавя за всеки елемент на сайта. Ето пример за заглавие с вграден CSS код: <h2 style=”font-size:20px;color:red;”>This is a headline.</h2>. Това е много непопулярен подход, тъй като вграждането на код отнема много време. Обновяването на подобен код би било много трудно, тъй като ще трябва да обходите кода по целия сайт, за да направите промените. Ето защо употребата на вграден код е много непрактична, ако имате повече от няколко страници.

Важно е да отбележим, че ако използвате повече от един начин да добавите CSS код, вграденият ще има предимство пред останалите, след това ще бъде изпълнен вътрешният/външният код, а на последно място - стиловете, които уеббраузърът използва по подразбиране.

Предимствата да използвате CSS

• Пести работа. Можете да създадете и поддържате по-малко код, за да оформите дизайна на сайта си. По-малко код означава по-малко възможности за грешка.

• Пести време. Ако използвате едни и същи елементи по сайта, ще е много лесно да обновите дизайна им. Ще спестите много време, като обновите само една стойност, вместо да обновявате един и същ код на много страници.

• Спомага за еднаквия вид на елементите. Ако бъде използван както трябва, един и същ CSS код може да бъде използван за всички еднакви елементи по сайта. По този начин, ако добавите някакъв бутон на множество страници например, той ще изглежда еднакво на всички тях.

• Пести трафик. Уеббраузърите обикновено кешират външните CSS файлове, за да не се налага да ги презареждат всеки път, когато посетителите отварят различни страници. CSS файловете са сравнително малки, но колкото повече посетители има сайтът Ви, толкова повече трафик ще спестите.

• Поддържа различни устройства. Това е нещо доста важно, тъй като CSS Ви позволява да използвате различни стилове за различните устройства (десктоп компютри, мобилни устройства, принтери). Така можете да предоставите версия на страниците си, която е не само адаптивна, но и достъпна за хора със затруднено зрение, които използват четец – т.е. всички ненужни реклами и елементи от навигацията могат да бъдат скрити, за да е по-лесно на софтуера за четене на екрани да обработи съдържанието на страницата.

Синтаксис

Тук ще Ви покажем само най-основния синтаксис на CSS заедно с няколко примера. Няма как да добавим подробно ръководство в блог статия, тъй като съществуват огромен брой модули с множество функции. Ако се интересувате, можете да прочетете повече на https://www.w3schools.com/css/default.asp или https://www.quackit.com/css/examples/. Там можете дори да пишете и тествате Ваш собствен CSS код.

Както споменахме, CSS се базира на правила. Всяко правило се състои от две части – т.нар. селектор (selector) и деклариращ блок (declaration block). Селекторът е HTML елементът, чийто дизайн искате да промените. Деклариращият блок включва конкретно CSS свойство заедно със съответната му стойност, която искате да зададете, разделени от двоеточие.

Можете да управлявате повече от едно свойство в един блок, като само трябва да разделите свойствата с точка и запетая и да оградите целия блок с къдрави скоби.

Ако всичко това Ви звучи сложно, ето пример, който ще Ви покаже колко лесен е всъщност CSS:

h2 {

color: red;

font-size: 10px;

}

В този пример всички “h2” елементи ще бъдат червени и ще имат размер на шрифта 10 px. Ето и друг пример, в който всички „p“ елементи ще бъдат сини и подравнени вляво.

p {

color: blue;

text-align: left;

}

Ето още няколко примера, които ще Ви покажат какви неща можете да правите със CSS. Добавете картинка за фон на текстово поле:

{

background-image: url('/images/background.png');

width: 20px;

padding: 30px;

border: solid;

}

Добавете правило само за конкретни размери на екрана:

@media only screen and (min-width: 768px)

Добавете hover ефект към бутон:

button {

color: #016898;

}

button:hover {

color: #19B5FE;

}

Минимизиране на CSS

CSS кодът често се минимизира (англ. minify). Процесът включва премахването на коментари, празни места и нови редове, тъй като те не са нужни, за да работи CSS кодът. Форматирането се използва, за да се направи кодът четим от хора, тъй като така се пише и поддържа по-лесно, но уеббраузърите и различните приложения нямат нужда от подобно форматиране.

Има две основни причини да се минимизира кодът. Първата е, че размерът на CSS файловете може да се намали значително, а това може малко да забърза сайта Ви, тъй като браузърът ще изпълнява по-малко код. По-обикновените сайтове не използват много CSS код, но по-големите може да имат огромен CSS файл. Проблемът идва от начина, по който браузърите изпълняват този код – те спират зареждането на HTML, докато не се заредят всички външни CSS файлове. Втората причина е, че минимизираният код се чете и копира по-трудно, а това е начин за някои разработчици да „замъглят“ кода и да го направят трудно четим с цел да е по-трудно друг човек да го копира.

Някои уебприложения минимизират CSS кода по подразбиране. За други ще трябва да използвате плъгин/разширение. Ако имате нужда, можете да използвате и безплатен онлайн инструмент като https://www.toptal.com/developers/cssminifier или https://www.cleancss.com/css-minify/.

Как да добавите Ваш CSS код?

Ако сте започнали да създавате сайт от нулата и пишете кода на ръка, едва ли Ви трябва ръководство как да добавите CSS, тъй като явно знаете какво правите. Ако нямате голям опит и използвате шаблон за сайт билдър или платформа за управление на съдържание обаче, пак можете да добавите собствен CSS код, като редактирате кода на шаблона. За да направите това, трябва да намерите файла style.css на шаблона или да потърсите опция за добавяне на код в административния панел на сайта. Както ще видите, с някои приложения е по-лесно да редактирате/добавите код, отколкото с други. Ето няколко съвета как можете да добавите/редактирате CSS код с някои популярни приложения.

• Сайт билдърът на ICDSoft. За да сте сигурни, че промените Ви няма да се изгубят, ако Сайт билдърът бъде обновен, трябва винаги да добавяте код само през административния си панел. Когато влезете в акаунта си, отидете на Дизайн -> Още настройки -> Собствен код. Уверете се, че кодът, който добавяте, е ограден от тагове.

• WordPress. Има различни начини да добавите или редактирате CSS код в WordPress. Ще намерите файла с целия код на шаблона, който използвате, в директорията на сайта -> /wp-content/themes/theme-name/style.css . Ако искате да редактирате файла директно, препоръчваме първо да му направите копие.

Някои шаблони включват специална секция, в която можете да управлявате и редактирате много повече настройки, специфични за шаблона, отколкото настройките по подразбиране, които WordPress Ви позволява да редактирате. Почти всички подобни шаблони предоставят възможност да добавите CSS код в тази секция. Кодът, който добавите, ще има приоритет пред кода на шаблона за елементите, които искате да редактирате.

Друг вариант е да използвате плъгин, с който лесно ще можете да добавите код. Няколко примера за подобни плъгини са Simple Custom CSS and JS, SiteOrigin CSS и Simple Custom CSS Plugin. За да минимизирате CSS кода, може да използвате Hummingbird, Autoptimize или WP-Optimize.

• Joomla. Когато влезете в административния си панел, отидете на System -> Site Templates -> Details & Files -> кликнете на New File в горната част на страницата и изберете css папката в левия прозорец, който ще видите. Задайте име на новия файл user.css и добавете CSS кода си в него. Ако шаблонът, който използвате, няма подобна опция, можете да използвате разширение като Custom CSS, Head CSS Script или XTypo.

• PrestaShop. Най-добрият вариант е да използвате модул като ClassyDevs Custom CSS & JS. Добавянето на код на ръка изисква по-задълбочени познания, тъй като ще трябва да редактирате основни файлове на приложението, а не само .css файл. Ако имате познания да направите подобна промяна, без да използвате модул, вероятно нямате нужда от ръководство.

• OpenCart. Подобно на други приложения, можете да редактирате CSS кода директно във файл /catalog/view/theme/your_theme/stylesheet/stylesheet.css, или можете да използвате разширение като Custom JavaScript and CSS. Трябва да изтриете кеша на приложението, след като редактирате кода. В противен случай промените няма да бъдат приложени.

• Drupal. Можете да редактирате CSS файловете на шаблона, който използвате, ако отидете в главната директория на сайта -> /sites/theme-name/files/css. Трябва обаче да имате добро познание на CSS, тъй като кодът е минимизиран и е труден за редактиране. Ако предпочитате по-лесен вариант, можете да инсталирате модул като Extra CSS and JS (добавя вграден CSS код), Live CSS, или CSS Editor.

Заключение

В днешно време е задължително да използвате Cascading Style Sheets за уебсайта си. Разбира се, даден уебсайт може да работи без CSS, но със сигурност няма да изглежда добре. Съдържанието е важно, но дизайнът може да спомогне много за доброто потребителско изживяване. Ето защо не трябва да пренебрегвате дизайна на елементите на сайта, особено ако има лесен начин да поправите някой проблем, който сте забелязали, или ако искате да персонализирате някой елемент.

Освен по-добрия външен вид на сайта, CSS има редица предимства. Може да Ви спести време, ако създавате сайта си или обновявате дизайна му; може да направи сайта Ви да изглежда добре на различни устройства; може дори да намали генерирания трафик на Вас и на посетителите на сайта Ви. За още по-добри резултати не забравяйте да минимизирате кода, ако има подобна опция.