Стилови на CSS

Псевдо-елемент: после

Овој псевдо-елемент може да се користи за вметнување содржина по елемент. Во следниот пример, по секој елемент се вметнува слика

Псевдоелементи на CSS

Име Опис

: после	Додадете содржина по ставка
: Пред тоа	Додадете содржина пред ставка
: Прво-буква	Додава стил на првата буква од текстот
: Прва линија	Додава стил на првата линија на текстот

24. Лента за навигација

За веб-страница е многу важно да има лесен за употреба систем за навигација. Со CSS можете да ги претворите здодевните HTML-менија во убави ленти за навигација. Лентата за навигација е всушност список на врски. Во примерот ќе изградиме лента за навигација од стандардна HTML листа.

Сега ги отстрануваме маркерите, маргините и полнењето од списокот:

тип-стил на список: нема - отстранува маркери; тие не се потребни во лентата за навигација
сопственост маргините и полнење имаат вредност 0 за отстранување на стандардните поставки на прелистувачот

Кодот во следниот пример е стандарден код што се користи за изградба на вертикални или хоризонтални ленти за навигација.

Вертикална лента за навигација

За да изградиме вертикална лента за навигација, треба да ги стилизираме елементите:

приказ: блок - со прикажување на врските како блокови, целата област може да се ракува со глувчето, не само текстот, и ширината може да се одреди
ширина: 60px - елементите на блокот ја зафаќаат целата достапна ширина, затоа е наведена саканата ширина

Хоризонтална лента за навигација

Може да создадеме лента за навигација на два начина, користејќи ставки во линија или плови. И двата методи се добри, но ако сакате врските да бидат со иста големина, треба да користите предмети како плови.

Вметнати ставки

Еден начин да се изгради вертикална лента за навигација е да се декларираат ставки од списокот на врски како ставки во линија:

Објаснувања:

приказ: вграден - по дифолт, елементите
се блок елементи. Паузите на линиите пред и по секоја ставка беа отстранети за да бидат прикажани на истата линија.
ако поставите баласт за предметите
(и не за), врските ќе се движат надвор од ставката. За оваа причина, горното и долното полнење беше одредено за елементот ul.

предмети плови

Во претходниот пример, врските имаат различни ширини. Така што сите врски имаат иста ширина, елементите мора да се декларира како плови и ширината за елементите мора да биде одредена:

плови: лево - плови се користи за поместување на блок-елементите рамо до рамо
приказ: блок - со прикажување на врските како блок елементи, целата област (не само текстот) може да се ракува со глувчето и да се одреди ширината на секоја област
ширина: 60px - бидејќи елементите на блокот ја зафаќаат целата достапна ширина, тие не можат да се движат рамо до рамо. Поради оваа причина, одредена е посакуваната ширина на врските.

Примери на менија:

Пример 1: Хоризонтално мени со три нивоа

Пример 2: Хоризонтално мени со четири нивоа