Deprecated: Function create_function() is deprecated in /home/sites/nars.iskren.info/wp-content/plugins/essential-grid/essential-grid.php on line 101

Deprecated: Function create_function() is deprecated in /home/sites/nars.iskren.info/wp-content/plugins/revslider/includes/framework/functions-wordpress.class.php on line 258

Deprecated: The each() function is deprecated. This message will be suppressed on further calls in /home/sites/nars.iskren.info/wp-content/plugins/js_composer/include/classes/core/class-vc-mapper.php on line 111
CSS за начинаещи – теория – InnovationCenter Academy

В този урок ще видим как се стилизират съвременните сайтове. Темата е „CSS за начинаещи“ и тук обхващаме основните понятия. След броени минути ще знаете:

  • защо се използва CSS;
  • какво представлява този език;
  • какви са градивните му елементи;
  • някои от основните функционалности.

Както винаги, ще направите няколко практически упражнения.

Защо CSS?

Нека да си представим, че имаме малък уеб сайт, съставен от 30 страници. Да кажем, че не ни харесва начина, по който изглеждат заглавията на статиите – искаме да са с друг цвят. Какво трябва да направим? Трябва да променим заглавието на всяка една страница. Това е прекалено много работа за такава проста промяна. Затова на помощ идва CSS. Името идва от „Cascading Style Sheets“ или иначе казано език за описание на стиловете. Ако проектираме добре нашите HTML страници, с помощта на CSS, ще можем да променим всички заглавия едновременно, като променим само един единствен файл! Звучи добре, нали?

Елементи на CSS

CSS задава стилове, чрез така наречените „стилови страници“. В практиката те представляват файлове с разширение „.css“. Всеки файл съдържа едно или няколко правила. Всяко правило съдържа следните елементи:

  • Селектор – той указва кой HTML елемент ще стилизираме (H1, H2, table, tr, и др.).;
  • Свойство – то указва кое свойство (кой атрибут) ще стилизираме (дебелина на границите, подравняване, цвят, и др.).;
  • Стойност – задава каква да бъде стойността за съответния атрибут.

За да не изпадаме в теоретичен сън ще дадем пример:


table
{
background-color: green;
}

Това е CSS правило, което задава зелен фон за таблица.

Селекторът е думата „table“. Той указва, че правилото се отнася за таблица.

Свойството е „background-color“. То указва, че ще задаваме какъв да бъде цвета на фона на таблицата.

Стойността е „green“.

Преди да продължим с практическата задача ще отбележим няколко неща относно синтаксиса.

  1. След името на селектора винаги се поставя отваряща къдрава скоба „{„. Тази скоба казва на браузъра, че от тук нататък следва едно или няколко свойства.;
  2. Всяко свойство се отделя от неговата стойност с две точки „:“.;
  3. След края на всяка стойност се поставя точка и запетая „;“.;
  4. След последното свойство се поставя затваряща къдрава скоба „}“. Тя казва на браузъра, че това е краят на текущото правило.