✅ Popisi i izbornici u CSS3

Sadržaj

Do izraditi dinamičke izbornike za naše web stranice Danas je vrlo uobičajeno programirati u HTML5, a zatim mu dati osobni izgled i dojam CSS3 da se radi o jeziku koji se temelji na stilskim tablicama, odnosno kod koji daje oblik, boju i strukturu našoj stranici ide u zasebnu datoteku kodiranu izvan same stranice koju pišemo.

Prije svega, vidjet ćemo kako napraviti popise, budući da je izbornik ipak popis koji je stiliziran kako bi bio vidljivo elegantniji. Na ovaj smo način strukturirani u HTML -u kao popis veza, a zatim već stavljamo personalizirani izgled CSS3.

Postoje dvije vrste popisa, poredane i neuređene. Ako ćemo za kasnije konfiguriranje izbornika koristiti popis, najvjerojatnije ćemo koristiti neuređeni popis, međutim vidjet ćemo opcije.

Oni su stvoreni potpuno isto, jedina razlika leži u rezerviranoj riječi, što će za naručeno biti

HTML kôd je sljedeći:


Prvi element
Drugi element
Treći element


Prvi element
Drugi element
Treći element

1. Prvi element
2. Drugi element
3. Treći element

Ili potpuno isto bez prvog reda:

Prvi element
Drugi element
Treći element

U HTML-u postoje određeni pred-formati kada stvaramo popis, to jest, postoji određena margina, boja fonta, crta, razmaknica itd. koji se prema zadanim postavkama pojavljuje pri izradi našeg popisa. Loša stvar je što vizualno ne izgleda baš dobro, dobra je stvar što ju je iznimno lako promijeniti prema našim željama zahvaljujući CSS -u.

Za početak ćemo pogledati različite vrste vinjeta koje možemo staviti na svoj jelovnik. Prema zadanim postavkama svakoj stavci na popisu prethodi crni krug. Međutim, iz naše datoteke možemo staviti kvadrate, prazne krugove ili sliku.

Kôd za izmjenu oznake u CSS3 je sljedeći:

 #menu {list-style-type: square;}

Da biste izmijenili marginu pomoću izbornika primjera, jednostavno je upotrijebiti ovo kod u CSS3:

 #meni {margin: 0px;}

 #menu {margina: 0px; punjenje: 2px; }

CSS3 kod

 #menu {granica: 2px;}

Osim debljine, obrub je polje koje ima mnogo mogućnosti, možemo birati stil, boju, nagib … i vidjet ćemo neke opcije.

Border-Style
Počevši od rubnog stila, granični stil, najčešće korištene mogućnosti su:

NijedanTime se uklanja sam rub. Ovo je zadana opcija, pa se normalno kada stvaramo popise za svoje izbornike neće pojavljivati granice ako to ne odredimo.

ČvrstaOvo je rub koji se može najviše koristiti. To je kontinuirani obrub, crne boje.
SkrivenO skriveno je još jedna mogućnost u kojoj ne vizualiziramo niti jedan rub jer su oni skriveni. Međutim, za potrebe programiranja on postoji. Koristi se za ograničavanje granica s drugim susjednim ćelijama ili tablicama čak i ako ne želimo da se vidi debela ivica.
GrebenOvaj ćemo rub staviti ako želimo da se izdvaja od ostalih. Čini se da je ivica postavljena jednu razinu iznad ostatka na ekranu.
PočetakKao i prethodni, to je izbočeni rub, no čini se da to nije razina iznad površine zaslona od onoga što nosi u sebi.
UtorZa razliku od grebena s ovim rubnim stilom, čini se da je element utonuo ispod ostatka.
UmetnutiNa isti način kao i Groove, čini se da ovaj rub nije utonuo, ali zapravo je jednu razinu ispod ostatka.
IsprekidanoOvim stilom stvaramo obrub formiran isprekidanom crtom, zadano crnom bojom i razmacima.
DvostrukoKako sama riječ kaže, riječ je o dvostrukoj granici, formiranoj od dvije neprekinute crne crte odvojene razmakom.

IsprekidanoOvo je posebna vrsta ruba slična isprekidanoj, osim što točke postaju veće linije, odnosno, to je vrsta isprekidane linije.

Kao i kod obruba, u stilu obruba možemo odabrati definiranje granice jedne strane, obje, gornje granice, donje granice ili svih. Ako napišemo samo jednu vrijednost, ona se stavlja na sve rubove, a ako umjesto jedne upišemo dvije opcije, prva je za gornji i donji rub, a druga za stranice.

Sada smo ovim definirali obrub, veličinu i stil, no izbornik ostaje vrlo jednostavan i vizualno ne izgleda jako lijepo. Možemo htjeti okomite izbornike, jer su zadano stvoreni, ali ako želimo da budu vodoravni, moramo dodati ključnu riječ float tako da se svaka stavka na popisu nalazi pored sljedeće.

Objašnjavam ovo malo detaljnije, svaki element popisa koji smo kodirali s "li" prema zadanim postavkama ima ponašanje blok elementa, odnosno nakon postavljanja generira prijelom retka i sprječava postavljanje drugog elementa na njegovoj strani. Ako želimo staviti svaki element našeg popisa uz prethodni, moramo ukloniti ovo ponašanje bloka.

Za ovo bi kôd bio sljedeći:

 #menu {list-style: none; margina: 0px; punjenje: 0; } #meni li {margin: 2px; punjenje: 2px; obrub: 2px čvrsta; plovak: lijevo; }

vodoravni izbornik

Sada, ako želimo da naš popis djeluje kao izbornik i preusmjerava nas kamo želimo, moramo dodati vezu na naše elemente. Ovo je vrlo jednostavno. U naš kôd u HTML -u dodajemo sljedeće:


Prvi element
Drugi element
Treći element

Konačno ćemo vidjeti neke od mogućnosti za izgled.

Svojstva teksta
ŠirinaAko želimo staviti fiksnu širinu. Na primjer širina: 100 px;
Dekoracija tekstaAko želimo da se tekst našeg elementa na neki način ukrasi. Postoji mnogo mogućnosti, ali neke od najčešćih su:

naglasiti: ako želimo da se sve podcrta
overline: isto kao što podcrtavanje stavlja crtu u cijeli tekst, ali ovaj put umjesto ispod.
treptati: Stvorite tekst koji svijetli, koji isprekidano treperi poput svjetla.
linijski: Ovu ćemo opciju napisati ako želimo da naš tekst bude prekrižen.
nijedan: ovo je višak jer prema zadanim postavkama tekst dolazi s ovom vrijednošću, bez ikakvog ukrasa. Međutim, ponekad će biti korisno ako se želimo vratiti na početnu opciju nakon što smo upotrijebili učinak pomoću resursa zvanog hover koji ćemo vidjeti sljedeće.

Poravnaj tekstTo je smjer u kojem će se objavljivati sadržaj naših blok elemenata, budite oprezni, a ne sam tekst, što ćemo kasnije vidjeti sa svojstvom smjera. Opcije su vrlo jednostavne: lijevo ako želimo da ide slijeva, desno ako želimo da ide zdesna nalijevo, centar ako želimo da tekst bude centriran i opravdamo ako želimo da tekst bude opravdan.

SmjerPomoću ove opcije definirat ćemo smjer teksta koji pišemo, u ovom slučaju postoje samo dvije mogućnosti:

ltr: koja je ona koja se prema zadanim postavkama pojavljuje u preglednicima, budući da je osim za neke jezike na kojima je napisana zdesna nalijevo, uobičajeno pisati slijeva na desno, što definira ovu opciju.
rtl: to je druga moguća usmjerenost teksta, zdesna nalijevo koju ćemo koristiti ako želimo pisati arapske tekstove, na primjer.

Tekstualna uvlakaTo što dolazi iz uvlačenja ili tabeliranja svojstvo je koje je odgovorno za uspostavljanje navedenog kriterija u prvom retku naših blok elemenata, a također i u tablicama. Postoje tri mogućnosti:

mjera
postotak
naslijediti

U njima ćemo, ako koristimo postotak, misliti na širinu elementa u kojem se nalazi.
Također u svima njima možemo koristiti pozitivne ili negativne brojke bilo koje od mjernih jedinica koje postoje za css3, piksele, ems …

Pretvorba tekstaPosljednje svojstvo u vezi s tekstom koje ćemo vidjeti ima veze s velikim i malim slovima:

pisati velikim slovima: s ovom opcijom, samo će prvo slovo svake riječi biti prikazano velikim slovima.
velika slova: prikazuje cijeli tekst velikim slovima.
mala slova- Prikazuje sav tekst malim slovima.
nijedan: ostavlja tekst onako kako je napisan. To je onaj koji dolazi prema zadanim postavkama.

Razmak između riječiIako se ne bavi izravno tekstom, to čini na prostoru koji ostavljamo između riječi. Njegove vrijednosti mogu biti "normalne" ili valjana mjera. Ako stavimo mjeru, njezina se vrijednost dodaje normalnoj mjeri koja je ona koja dolazi prema zadanim postavkama.

Sada idemo sa svojstvima fonta.

Svojstva fontova
FontOvo je svojstvo najcjelovitije od svih povezanih s fontom i ima nekoliko mogućnosti kada je u pitanju njegovo korištenje. Prvo, možete početi s jednom, dvije, tri ili nijednom od vrijednosti "font-style", "font-variant" i "Font-weight".

Zatim moramo staviti veličinu slova s "font-size" po izboru, nakon čega slijedi razmak koji je dan s "line-height" i uvijek završava s tipom obitelji fontova "font-family". Na kraju ćete morati unijeti jednu od sljedećih vrijednosti:

naslov- Za gumbe ili padajuće popise, odnosno za kontrole i polja obrazaca.
Jelovnik: ako ćemo konfigurirati padajuće izbornike ili druge vrste izbornika.
ikona: za tekstove prikazane ispod ikona.
okvir za poruke-Za dijaloške okvire, bilo da se radi o skočnim prozorima s greškama, skočnim prozorima s informacijama itd.
status-baO: za statusne trake prozora.
small-caption - Za mala polja i kontrole.

U svojstvu fonta koristili smo neke druge opcije koje još nismo vidjeli i koje ćemo objasniti u nastavku:

U stilu fontaNjime ćemo definirati stil fonta. Vrijednosti koje može imati su "normalne", što je zadana vrijednost, "kurziv" ako želimo da naše slovo bude kurzivno, odnosno kurzivno; ili "koso" ako želimo imati koso slovo, koje je svojevrsni kurziv gdje su samo likovi skloni, a ne svi kao u kurzivu.

Varijanta fontaKoristit ćemo ga za uspostavljanje varijante fontova a mi imamo samo dvije mogućnosti, "normalnu" koja je ona koja dolazi prema zadanim postavkama, i varijantu "mala slova", koja se naziva i mala slova, zbog čega velika slova izgledaju iste veličine kao mala slova.

Težina fontaTo je jedno od najčešće korištenih svojstava od tada možemo kontrolirati debljinu slova (budite oprezni, nije isto što i veličina svakog slova koje ćemo vidjeti kasnije). Brojčano gledano, ima 9 opcija koje su stotine od 100 do 900, odnosno 100, 200, 300, 400, 500, 600, 700, 800 i 900. Postoje i pisane vrijednosti, "normalne" koje su jednake 400 , "podebljano" što odgovara 700 i što bismo nazvali podebljanim i koje se čudno nije pojavilo u stilu fonta nego ovdje. Postoje i vrijednosti "podebljanije" ili "svjetlije", a ponekad i druge, poput "srednje" ili "teške", koje se dodjeljuju numeričkim vrijednostima ovisno o broju debljina koje font ima.

Veličina fontaS ovom imovinom ako mi ćemo kontrolirati veličinu fonta. Dostupne su četiri vrijednosti, "apsolutna veličina", "relativna veličina", "postotna jedinica" i "mjerna jedinica". Postoji dosta apsolutnih i relativnih mjernih jedinica definiranih u css -u, kao što je em, koji se najviše koristi u ovom svojstvu, ex, px,%, in, cm, mm, pt ili pc. Osim ovih mjera, postoje neke riječi koje djeluju i mogu se koristiti, primjerice xx-small za najmanje, x-small, small, medium, large, x-large ili xx-large za najveće. Ovih šest riječi odgovaraju veličinama različitih oznaka naslova HTML

do

a to su apsolutne veličine mjera pa će uvijek izgledati isto bez obzira na razlučivost preglednika ili zaslona. Riječi "manji" i "veći" također se mogu koristiti kao relativna mjerenja koja će ovisiti o veličini fonta elementa koji ga sadrži.

Visina linijeVeć je definirano u svojstvima teksta.
Obitelj fontovaNaširoko korištena nekretnina omogućuje odabir slova ili fonta. Prvo stavljamo naziv fonta ili font, a po izboru mogu biti i drugi nazivi fontova u slučaju da naš preglednik ili sustav nemaju prvi ili ga ne podržavaju. Ne postoji zadana vrsta fonta jer ovisi o našem pregledniku, iako je vrlo uobičajen "Times New Roman". Neke generičke vrste fontova mogu biti "serif" gdje su uključeni neki fontovi poput Times New Roman, Garamond, Georgia ili Cambria; "Sans-serif" i njegove vrste Verdana, Arial, Tahoma, Helvetica ili Futura. "Monospace" i njegovi primjeri između ostalih Courier New ili Monaco. I "fantasy" s tipovima Comic sans ili Impact. Naravno, postoji mnogo više fontova koje možemo birati.

Razmak između slovaS ovim možemo kontrolirati razmak između slova, a radi potpuno isto kao i njegov analogni tekstualni svojstva u razmaku riječi, s vrijednostima "normalno" i valjanom mjerom.

BojaKonačno ćemo vidjeti svojstvo boje koju želimo unijeti u naš tekst. Prema zadanim postavkama je crna. Postoji nekoliko načina za odabir boje, jedan od njih je kroz 17 riječi u boji koje postoje: aqua, crna, crvena, žuta, plava, fuksija, zelena, limeta, narančasta, siva, kestenjasta, maslina, mornarica, ljubičasta , srebrna, tamnocrvena i bijela.

Druga je mogućnost staviti boju RGB postotak, ovo jednostavno navodi tri postotka koji odgovaraju bojama crvena ®, zelena (G) i plava (B):

 boja: rgb (22%, 76%, 14%); (3 posto ne moraju dati 100%)

Drugi način je RGB decimal koji radi potpuno isto kao postotak RGB -a, ali umjesto da se tri vrijednosti stavljaju u postotke, one se stavljaju kao decimalne vrijednosti: