Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други

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

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

В този урок ще фокусирам вниманието ти върху т.нар. adjacent sibling селектор. Знам, името му наистина звучи малко сложно, но още от сега те успокоявам, че този селектор е доста лесен за усвояване.

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

Един от най-използваните начини за изграждане на структурата (layout) на уеб сайт е чрез разделяне на съдържанието в 2 колони. Тъй като посоката ни на четене е от ляво надясно, то най-често в лявата колона се намира главното съдържание на сайта, а в дясната - второстепенното. Освен това, дясната колона е значително по-малка по размер и се нарича sidebar. В нея се поставят неща като търсачка, класация с най-четени и -коментирани новини, реклами и други.

Друга отличителна черта на този тип структура (layout) e, че в началото на всяка страницата стои контейнер (наричан header), който обхваща различни елементи като лого, главно меню, login форма и др. Страницата завършва с друг контейнер (наричан footer), в който обикновено се поставя информация за сайта (например година на създаване, copyright и т.н.).

В този урок заедно ще създадем уеб страница с 2-колонен layout.

Имал/-а ли си случай, в който знаеш, че съдържанието на страницата ти е увлекателно и приятно за четене, но в момента, в който решиш да го “разчупиш” с няколко изображения откриваш, че всичко изглежда някак си небалансирано? Пространството от дясно на снимката ти изглежда твърде празно, текста преди и след снимката е твърде отдалечен, а самите снимки сякаш не пасват добре в стила на сайта.

Не се притеснявай! В този урок ще ти помогна да се справиш с всичко това.

В първа част на този урок разгледахме подробно три font свойства и успяхме чрез няколко примера да добием представа за начина им на работа. Във втора част ще довършим започнатото като обърнем внимание на други три font свойства и правилната им употреба.