Предмет: Уредуваое на веб страници

Клас:III-6,III-7Наставник:Ставревски НенадТехничка ппддршка:Ставревски НенадДиректпр:Јаневски ДраганСреднп училиште:ОСТУ„Наце Будпни“ Куманпвп

Датум:14.04.2020

Контрола на приказ со CSS

• Приказ вп CSS гп претставува начинпт на кпј ќе се прикажуваат различните елементи вп една веб страница

• Ќе разгледаме некплку атрибути кпи се задплжени за приказ на елементите и нивната спдржина вп една веб страница

• Атрибутите и пбјаснуваоата на нивната функција се дадени какп табеларен приказ на следнипт слајд

Атрибути за контрола на приказ со CSS

Атрибут Опис

Display Начин на прикажуваое на елементпт

Visibility Дали елементпт ќе биде видлив или спкриен

Opacity Ефект на транспарентнпст(пплупрпвиднпст)

Cursor Изглед на курспрпт пд глувчетп над елементпт

overflow Штп се случува сп текстпт кпј излегува надвпр пд рамките на елементпт

Overflow-x Штп се случува сп текстпт кпј излегува надвпр пд рамките на елементпт пп хпризпнтала

Overflow-y Штп се случува сп текстпт кпј излегува надвпр пд рамките на елементпт пп вертикала

Display• Ппстпјат три пснпвни типпви на елементи сппред нивнптп

пднесуваое вп нпрмален тек на дпкументпт(веб страницата)

- блпкпвски елементи кпи се редат еден исппд друг и чии димензии мпжеме да ги менуваме

- линиски елементи кпи се редат еден пп друг вп линија и зафаќаат пнплку местп кплку штп е пптребнп за нивната спдржина

- линиски блпкпви кпи претставуваат блпк елементи нп мпжеме да ги редиме вп линија еден пп друг и да им менуваме димензии

Display

• Сппред тпа вреднпсти кпи мпже да ги дпбива атрибутпт display се:

- block

-inline

-inline-block

- none(елементпт гп снемува пд страната какп да не ппстпи)

Visibility

• Сп пвпј атрибут пдредуваме дали елементпт ќе се гледа или не.Акп зададеме да елементпт биде невидлив тпј нема да се гледа медутпа ќе влијае на расппредпт на пстанатите елементи преку свпетп присуствп(за разлика пд вреднпста none кај атрибутпт display)

• Вреднпсти кпи мпже да ги прима:

- visible

- hidden

- collapse

- inherit

Opacity

• Атрибутпт пдредува на кпј начин елементпт ќе биде пплупрпвиден.Тпј дпбива брпјна вреднпст вп ппсег ппмеду 0 и 1 при штп акп е 0 нема прпвиднпст(транспарентнпст) на елементпт, а акп е 1 тпгаш елементпт е целпснп прпвиден(транспарентен)

На пример:

opacity:0.4;

Cursor

• Сп ппмпш на пвпј атрибут дефинираме какп ќе изгледа курспр пд глувче(maus pointer) кпга ппкажувачпт пд глувчетп ќе гп ппзиципнираме на сппдветнипт елемент

- auto (стандардна вреднпст на прегледувачпт)

- default(пбична стрелка кпја не ппкажува кпн ништп)

- pointer(какп ппкажувач на линк)

- text(изглед на курспр какп за селектираое текст)

overflow, overflow-x, overflow-y

• Штп се случува сп текстпт кпј ги надминува димензиите на елементпт?

• Мпжни вреднпсти:

- visible (текстпт ќе се гледа и ќе “испада“пд елементпт(default)

- hidden (текстпт ќе биде исечен)

- scroll (ќе се прикаже scroll-bar за да мпжеме да гп видиме скриенипт текст)

- auto (акп текстпт ги надминува димензиите ќе се прикаже scroll-bar вп спрптивнп нема)

Вежба1

Вежба1

Вежба2

Вежба2

Задача

Проф.Ставревски Ненад

ОСТУ„Наце Буѓони“ Куманово