✅ Листе и менији у ЦСС3

Преглед садржаја

До креирајте динамичке меније за наше веб странице Данас је врло уобичајено програмирати у ХТМЛ5, а затим му дати лични изглед и осећај ЦСС3 да је то језик који се заснива на стилским листовима, односно код који даје облик, боју и структуру нашој страници иде у засебну датотеку кодирану изван саме странице коју пишемо.

Пре свега, видећемо како се праве листе, јер је ипак мени листа која је стилизована тако да буде видљиво елегантнија. На овај начин смо структурирани у ХТМЛ -у као листа веза, а затим већ стављамо персонализовани изглед ЦСС3.

Постоје две врсте листа, поређане и неуређене. Ако ћемо користити листу за касније конфигурисање менија, највероватније ћемо користити неуређену листу, међутим, видећемо опције.

Они су створени потпуно исто, једина разлика лежи у резервисаној речи, која ће за наручено бити

ХТМЛ код је следећи:


Први елемент
Други елемент
Трећи елемент


Први елемент
Други елемент
Трећи елемент

1. Први елемент
2. Други елемент
3. Трећи елемент

Или потпуно исто без првог реда:

Први елемент
Други елемент
Трећи елемент

У ХТМЛ-у постоје одређени пред-формати када правимо листу, то јест, постоји одређена маргина, боја фонта, знак за набрајање, паддинг итд. то се подразумевано појављује приликом креирања наше листе. Лоша ствар је што визуелно не изгледа баш добро, добра ствар је што је изузетно лако то променити по нашем укусу захваљујући ЦСС -у.

Почећемо тако што ћемо погледати различите врсте вињета које можемо ставити на свој мени. Подразумевано свакој ставци на листи претходи црни круг. Међутим, можемо ставити квадрате, празне кругове или слику из наше датотеке.

Код за измену ознаке у ЦСС3 је следећи:

 #мену {лист-стиле-типе: скуаре;}

Да бисте изменили маргину помоћу примера менија, једноставно је користити ово код у ЦСС3:

 #мену {маргин: 0пк;}

 #мену {маргин: 0пк; паддинг: 2пк; }

ЦСС3 код

 #мену {бордер: 2пк;}

Осим дебљине, ивица је поље које има много могућности, можемо изабрати стил, боју, нагиб … и видећемо неке опције.

Бордер-Стиле
Полазећи од ивичног стила, гранични стил, најчешће коришћене могућности су:

НиједанОно што ово ради је уклањање саме ивице. Ово је подразумевана опција, па обично када правимо листе за своје меније, границе се неће појављивати ако то не одредимо.

ЧврстОво је ивица која се може највише користити. То је континуирана ивица, црне боје.
СакривенО скривено је још једна опција у којој не визуализујемо ниједну ивицу, будући да су оне скривене. Међутим, за потребе програмирања он постоји. Користи се за ограничавање граница са другим суседним ћелијама или табелама чак и ако не желимо да се види дебела ивица.
гребенОву предност ћемо ставити ако желимо да се издваја од осталих. Чини се да је ивица постављена један ниво изнад остатка на екрану.
ОутсетКао и претходни, то је избочена ивица, међутим чини се да ово није ниво изнад површине екрана од оног што носи у себи.
ГроовеЗа разлику од гребена са овим рубним стилом, чини се да је елемент утонуо испод остатка.
УметнутиНа исти начин као и Гроове, чини се да ова ивица није утонула, већ је заправо један ниво испод остатка.
ТачкастоОвим стилом генеришемо ивицу формирану испрекиданом линијом, подразумевано црну и размаке.
ДоублеКако сама реч каже, то је двострука ивица, формирана од две непрекидне црне линије раздвојене размаком.

ИспрекиданоОво је посебна врста ивица слична тачкастим, само што тачке постају веће линије, односно, то је нека врста испрекидане линије.

Као и код обруба, и код стила обруба можемо изабрати да дефинишемо границу једне стране, обе, горње границе, доње границе или свих. Ако напишемо само једну вредност, она се ставља на све ивице, а ако упишемо две опције уместо једне, прва је за горњу и доњу ивицу, а друга за странице.

Сада смо овим дефинисали ивицу, величину и стил, међутим мени остаје веома једноставан и визуелно не баш леп. Можемо желети вертикалне меније, јер су подразумевано креирани, али ако желимо да буду хоризонтални, морамо додати кључну реч флоат тако да се свака ставка на листи налази поред следеће.

Објашњавам ово мало детаљније, сваки елемент листе који смо кодирали са "ли" подразумевано има понашање блок елемента, то јест, након што постави генерише прелом линије и спречава постављање другог елемента на његовој страни. Ако желимо да ставимо сваки елемент наше листе поред претходног, морамо елиминисати ово понашање блока.

За ово би код био следећи:

 #мену {лист-стиле: ноне; маргина: 0пк; паддинг: 0; } #мену ли {маргин: 2пк; паддинг: 2пк; ивица: 2пк солид; флоат: лефт; }

хоризонтални мени

Сада, ако желимо да наша листа делује као мени и преусмери нас тамо где желимо, морамо да додамо везу до наших елемената. Ово је врло једноставно. У наш код у ХТМЛ додајемо следеће:


Први елемент
Други елемент
Трећи елемент

Коначно ћемо видети неке од опција за изглед.

Својства текста
ВидтхАко желимо да ставимо фиксну ширину. На пример ширина: 100 пк;
Декорација текстаАко желимо да се текст нашег елемента на неки начин украси. Постоји много могућности, али неке од најчешћих су:

подвући: ако желимо да све буде подвучено
оверлине: исто као што подвлачење ставља линију у целом тексту, али овај пут уместо испод.
трептати: Креирајте текст који сија, који трепери попут светлости с прекидима.
линијски: Ову опцију ћемо написати ако желимо да наш текст буде прецртан.
ниједан: ово је сувишно пошто текст подразумевано долази са овом вредношћу, без икаквог украса. Међутим, понекад ће бити корисно ако се желимо вратити на почетну опцију након што смо искористили ефекат помоћу ресурса који се зове ховер, а који ћемо видети следеће.

Поравнање текстаТо је смер у којем ће се објављивати садржај наших блок елемената, пазите, а не сам текст, што ћемо касније видети са својством смер. Опције су врло једноставне: лево ако желимо да иде с леве стране, десно ако желимо да иде с десна на лево, у центар ако желимо да текст буде центриран и оправдамо ако желимо да текст буде оправдан.

ПравацПомоћу ове опције дефинисаћемо смер текста који пишемо, у овом случају постоје само две опције:

лтр: који се подразумевано појављује у прегледачима, јер осим за неке језике на којима је писано здесна налево, уобичајено је да пишете с лева на десно, што дефинише ову опцију.
ртл: то је друга могућа усмереност текста, с десна на лево коју ћемо користити ако желимо да напишемо арапске текстове на пример.

Увлачење текстаДа долази од увлачења или табеларног приказа својство је које је одговорно за успостављање наведеног критеријума у првом реду наших блок елемената, а такође иу табелама. Постоје три опције:

мерити
проценат
наследити

У њима ћемо, ако користимо проценат, мислити на ширину елемента у којем се он налази.
Такође у свима њима можемо користити позитивне или негативне бројке било које од мерних јединица које постоје за цсс3, пикселе, емс …

Трансформација текстаПоследње својство везано за текст које ћемо видети има везе са великим и малим словима:

писати великим словима: са овом опцијом, само прво слово сваке речи биће приказано великим словима.
велика слова: приказује цео текст великим словима.
мала слова- Приказује сав текст малим словима.
ниједан: оставља текст онако како је написан. То је онај који подразумевано долази.

Размак између речиИако се не бави директно текстом, то ради на простору који остављамо између речи. Његове вредности могу бити „нормалне“ или ваљана мера. Ако ставимо меру, њена вредност се додаје нормалној мери која је она која подразумевано долази.

Сада идемо са својствима фонта.

Својства фонтова
ФонтОво својство је најпотпуније од свих повезаних са фонтом и има неколико опција када је у питању његово коришћење. Прво, можете почети са једном, две, три или ниједном од вредности „фонт-стиле“, „фонт-вариант“ и „Фонт-веигхт“.

Затим морамо да ставимо величину слова са "фонт-сизе" опционално, након чега следи размак који је дат са "лине-хеигхт" и увек завршава са типом породице фонтова "фонт-фамили". На крају ћете морати да унесете једну од следећих вредности:

Наслов- За дугмад или падајуће листе, односно за контроле и поља образаца.
мени: ако ћемо конфигурисати падајуће меније или друге врсте менија.
икона: за текстове приказане испод икона.
оквир за поруке-За дијалошке оквире, било да се ради о скочним прозорима грешака, искачућим прозорима са информацијама итд.
статус-баО: за статусне траке прозора.
смалл-цаптион - За мала поља и контроле.

У својству фонта користили смо неке друге опције које још нисмо видели и које ћемо објаснити у наставку:

Тип словаЊиме ћемо дефинисати тип слова. Вредности које може имати су „нормалне“, што је подразумевано, „курзив“ ако желимо да наше писмо буде курзивно, односно курзиво; или "косо" ако желимо да имамо косо слово, које је нека врста курзива где су само ликови склони, а не сви као у курзиву.

Варијанта фонтаКористићемо га за успостављање варијанте фонтова и имамо само две опције, "нормалну" која је подразумевано доступна, и варијанту "малих слова", која се такође назива мала слова, због чега велика слова изгледају исте величине као мала слова.

Тежина фонтаТо је једно од најчешће коришћених својстава од тада можемо контролисати дебљину слова (пазите, то није исто што и величина сваког слова које ћемо видети касније). Бројчано гледано, има 9 опција које су стотине од 100 до 900, односно 100, 200, 300, 400, 500, 600, 700, 800 и 900. Постоје и писане вредности, "нормална" која је једнака 400 , "болд" што одговара 700 и које бисмо назвали подебљано и које се чудно није појавило у стилу фонта већ овде. Постоје и вредности „смелије“ или „лакше“, а понекад и друге, попут „средњих“ или „тешких“, које се додељују нумеричким вредностима у зависности од броја дебљина које фонт има.

Величина фонтаСа овом имовином ако ми ћемо контролисати величину фонта. Доступне су четири вредности, „апсолутна величина“, „релативна величина“, „процентуална јединица“ и „мерна јединица“. Постоји доста апсолутних и релативних јединица мере дефинисаних у цсс -у, као што је ем, који се највише користи у овом својству, ек, пк,%, ин, цм, мм, пт или пц. Поред ових мера, постоје неке речи које функционишу и могу се користити, као што је кк-смалл за најмање, к-смалл, смалл, медиум, ларге, к-ларге или кк-ларге за највеће. Ових шест речи одговарају величинама различитих ознака наслова ХТМЛ

до

а то су апсолутне величине мера, па ће увек изгледати исто без обзира на резолуцију прегледача или екрана. Речи "мањи" и "већи" се такође могу користити као релативна мерења која ће зависити од величине фонта елемента који га садржи.

Висина линијаВећ је дефинисано у својствима текста.
Породица фонтоваШироко коришћена имовина коју ми омогућава вам да изаберете фонт или фонт. Прво стављамо назив фонта или фонт, а опционо могу бити праћени и другим називима фонтова у случају да наш прегледач или систем немају први или га не подржавају. Не постоји подразумевани тип фонта, јер зависи од нашег прегледача, иако је врло уобичајен „Тимес Нев Роман“. Неке вредности генеричког типа фонта могу бити „сериф“ где су укључени неки фонтови као што су Тимес Нев Роман, Гарамонд, Георгиа или Цамбриа; „Санс-сериф“ и његове врсте Вердана, Ариал, Тахома, Хелветица или Футура. „Моноспаце“ и његови примери Цоуриер Нев или Монако, између осталих. И „фантазија“ са типовима Цомиц санс или Импацт. Наравно, постоји много више фонтова које можемо изабрати.

Размак између словаСа овим можемо контролише размак између слова, и ради потпуно исто као и његов аналогни текстуални својства прореда, са вредностима "нормално" и важећом мером.

БојаКоначно ћемо видети својство боје коју желимо да ставимо у наш текст. Подразумевано је црно. Постоји неколико начина за одабир боје, један од њих је кроз 17 речи у боји које постоје: акуа, црна, црвена, жута, плава, фуксија, зелена, лимета, наранџаста, сива, кестењаста, маслина, тегет, љубичаста , сребрна, тамноцрвена и бела.

Друга могућност је да поставите боју РГБ проценат, ово једноставно специфицира три процента који одговарају бојама црвена ®, зелена (Г) и плава (Б):

 боја: ргб (22%, 76%, 14%); (3 процента не морају да дају 100%)

Други начин је РГБ децимал који ради потпуно исто као проценат РГБ -а, али уместо да се три вредности стављају у проценте, оне се стављају као децималне вредности: