✅ Liste și meniuri în CSS3

Cuprins

La creați meniuri dinamice pentru paginile noastre web Astăzi este foarte obișnuit să programezi în HTML5 și apoi să îi oferi un aspect personal CSS3 că este un limbaj care se bazează pe foi de stil, adică codul care dă forma, culoarea și structura paginii noastre intră într-un fișier separat codificat în afara paginii în sine pe care o scriem.

În primul rând, vom vedea cum să facem liste, deoarece la urma urmei un meniu este o listă care este concepută pentru a-l face vizibil mai elegant. În acest fel suntem structurați în Html ca o listă de linkuri și apoi punem deja un aspect personalizat cu CSS3.

Există două tipuri de liste, ordonate și neordonate. Dacă vom folosi o listă pentru a configura ulterior un meniu, cel mai probabil vom folosi o listă neordonată, cu toate acestea, vom vedea opțiunile.

Ele sunt create exact la fel, singura diferență constă în cuvântul rezervat, care pentru ordonat va fi

Codul HTML este după cum urmează:


Primul element
Al doilea element
Al treilea element


Primul element
Al doilea element
Al treilea element

1. Primul element
2. Al doilea element
3. Al treilea element

Sau exact la fel fără ordinalul mai întâi:

Primul element
Al doilea element
Al treilea element

În HTML există anumite pre-formate atunci când creăm o listă, adică există o anumită marjă, culoare a fontului, glonț, umplutură etc. care apare în mod implicit la crearea listei noastre. Rău este că din punct de vedere vizual nu arată foarte bine, lucrul bun este că este extrem de ușor să-l schimbăm după bunul nostru plac datorită CSS.

Vom începe prin a ne uita la diferitele tipuri de vinete pe care le putem plasa în meniul nostru. În mod implicit, fiecare element din listă este precedat de un cerc negru. Cu toate acestea, putem pune pătrate, cercuri goale sau o imagine din fișierul nostru.

Codul pentru modificarea glonțului în CSS3 este următorul:

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

Pentru a modifica marginea folosind meniul de exemplu, este la fel de simplu ca și utilizarea acestui cod în CSS3:

 #menu {margin: 0px;}

 #menu {margin: 0px; căptușeală: 2 px; }

Cod CSS3

 #menu {border: 2px;}

Pe lângă grosime, chenarul este un câmp care are multe posibilități, putem alege un stil, o culoare, un gradient … și vom vedea câteva opțiuni.

Stil de frontieră
Începând cu stilul de margine, în stil de frontieră, cele mai utilizate posibilități sunt:

Nici unulCeea ce face este să îndepărteze marginea în sine. Aceasta este opțiunea implicită, deci în mod normal, atunci când creăm liste pentru meniurile noastre, nu vor apărea margini decât dacă o specificăm.

SolidAceasta este marginea care poate fi utilizată cel mai mult. Este o margine continuă, de culoare neagră.
AscunsO ascuns este o altă opțiune în care nu vizualizăm margini, deoarece acestea sunt ascunse. Cu toate acestea, în scopuri de programare, există. Se folosește pentru a delimita marginile cu alte celule sau tabele adiacente chiar dacă nu vrem să se vadă o margine groasă.
creastăVom pune această margine dacă vrem să iasă în evidență de restul. Face ca marginea să pară plasată la un nivel deasupra restului de pe ecran.
ÎnceputCa și precedentul, este o margine proeminentă, totuși acest lucru nu pare să fie un nivel deasupra suprafeței ecranului decât ceea ce poartă în interior.
CanelurăSpre deosebire de creasta cu acest stil de bordură, se pare că elementul este scufundat sub rest.
MedalionÎn același mod ca Groove, această margine nu pare a fi scufundată, dar este de fapt cu un nivel sub restul.
PunctatCu acest stil generăm o margine formată dintr-o linie punctată, negru în mod implicit și spații.
DublaDupă cum spune cuvântul în sine, este o margine dublă, formată din două linii negre continue separate de un spațiu.

DashedAcesta este un tip special de chenar similar cu punctat, cu excepția faptului că punctele devin linii mai mari, adică este un fel de linie întreruptă.

Ca și în cazul chenarului, cu stilul chenarului putem alege să definim bordura unei părți, ambele, limita superioară, limita inferioară sau toate. Dacă scriem doar o valoare, aceasta se pune pe toate muchiile, iar dacă scriem două opțiuni în loc de una, prima este pentru marginile de sus și de jos și a doua este pentru laturi.

Acum, cu aceasta am definit marginea, dimensiunea și stilul, totuși meniul rămâne foarte simplu și nu foarte frumos din punct de vedere vizual. Putem dori meniuri verticale, deoarece sunt create în mod implicit, dar dacă vrem să fie orizontale, trebuie să adăugăm cuvântul cheie float, astfel încât fiecare element din listă să fie plasat lângă următorul.

Vă explic acest lucru puțin mai detaliat, fiecare element al listei pe care l-am codificat cu „li” are implicit comportamentul unui element bloc, adică după ce a fost plasat generează o întrerupere de linie și împiedică plasarea unui alt element lângă el. Dacă dorim să plasăm fiecare element din lista noastră lângă cel anterior, trebuie să eliminăm acest comportament de blocare.

Pentru aceasta, codul ar fi următorul:

 #menu {list-style: none; marja: 0px; umplutură: 0; } #menu li {margin: 2px; umplutură: 2 px; chenar: 2px solid; plutește la stânga; }

meniu orizontal

Acum, dacă dorim ca lista noastră să acționeze ca un meniu și să ne redirecționeze către locul în care dorim, trebuie să adăugăm un link către elementele noastre. Acest lucru este foarte simplu. În codul nostru din HTML adăugăm următoarele:


Primul element
Al doilea element
Al treilea element

În cele din urmă vom vedea câteva dintre opțiunile pentru apariție.

Proprietăți text
LăţimeDacă vrem să punem o lățime fixă. De exemplu lățime: 100 px;
Decorare textDacă vrem ca textul elementului nostru să fie decorat într-un fel. Există multe posibilități, dar unele dintre cele mai frecvente sunt:

subliniază: dacă vrem să fie subliniat totul
overline: la fel ca subliniatul pune o linie în tot textul, dar de data aceasta în loc de dedesubt deasupra.
clipi: Creați un text care strălucește, care să clipească ca o lumină intermitent.
linie-prin: Vom scrie această opțiune dacă dorim ca textul nostru să fie tăiat.
nici unul: aceasta este o redundanță, deoarece în mod implicit textul vine cu această valoare, fără nicio decorație. Cu toate acestea, uneori va fi util dacă vrem să revenim la opțiunea inițială după ce am folosit un efect folosind o resursă numită hover pe care o vom vedea în continuare.

Aliniere textEste direcția în care va fi publicat conținutul elementelor blocului nostru, aveți grijă, nu textul în sine, pe care îl vom vedea mai târziu cu proprietatea direcție. Opțiunile sunt foarte simple: stânga dacă vrem să meargă de la stânga, dreapta dacă vrem să meargă de la dreapta la stânga, centru dacă dorim ca textul să fie centrat și justificăm dacă vrem ca textul să fie justificat.

DirecţieCu această opțiune vom defini direcția textului pe care îl scriem, în acest caz există doar două opțiuni:

ltr: care este cea care apare implicit în browsere, deoarece, cu excepția unor limbi în care este scris de la dreapta la stânga, este obișnuit să scrieți de la stânga la dreapta, ceea ce definește această opțiune.
rtl: este cealaltă direcționalitate posibilă a textului, de la dreapta la stânga pe care o vom folosi dacă vrem să scriem texte arabe de exemplu.

Text-indentFaptul că provine din indentare sau tabelare este o proprietate care este responsabilă de stabilirea criteriului menționat în prima linie a elementelor blocului nostru și, de asemenea, în tabele. Există trei opțiuni:

măsura
procent
moşteni

În ele, dacă folosim procentul, ne vom referi la lățimea elementului în care este situat.
De asemenea, în toate putem folosi cifre pozitive sau negative ale oricăreia dintre unitățile de măsură care există pentru css3, pixeli, ems …

Transformare textUltima proprietate legată de textul pe care îl vom vedea care are legătură cu litere mari și mici:

valorifica: cu această opțiune, numai prima literă a fiecărui cuvânt va fi afișată cu majuscule.
majuscule: afișează tot textul cu litere mari mari.
minuscule- Afișează tot textul cu litere mici.
nici unul: lasă textul așa cum a fost scris. Este cea care vine în mod implicit.

Spațierea cuvintelorDeși nu tratează direct textul, o face pe spațiul pe care îl lăsăm între cuvinte. Valorile sale pot fi „normale” sau o măsură validă. Dacă punem o măsură, valoarea ei se adaugă la măsura normală care este cea care vine în mod implicit.

Acum mergem cu proprietățile fontului.

Proprietățile fontului
FontAceastă proprietate este cea mai completă dintre toate cele legate de font și are mai multe opțiuni atunci când vine vorba de utilizarea acestuia. Mai întâi, puteți începe cu unul, doi, trei sau niciunul dintre valorile „font-style”, „font-variant” și „Font-weight”.

Apoi, trebuie să punem dimensiunea literei cu „font-size” urmată opțional de spațiul care este dat cu „line-height” și se termină întotdeauna cu tipul familiei de fonturi „font-family”. În cele din urmă, va trebui să puneți una dintre următoarele valori:

legendă- Pentru butoane sau liste derulante, adică pentru controale și câmpuri de formular.
meniul: dacă vom configura meniuri derulante sau alte tipuri de meniuri.
pictogramă: pentru textele afișate sub pictograme.
caseta de mesaj- Pentru casetele de dialog, indiferent dacă este vorba de ferestre de tip pop-up de eroare, ferestre de tip pop-up de informații etc.
status-baA: pentru bare de stare a ferestrei.
mic-caption - Pentru câmpuri și controale de formă mici.

În proprietatea fontului am folosit alte opțiuni pe care nu le-am văzut încă și pe care le vom explica mai jos:

Stilul fontuluiCu el vom defini stilul fontului. Valorile pe care le poate avea sunt „normale”, care este implicit, „italic” dacă dorim ca litera noastră să fie italic, adică italic; sau „oblic” dacă vrem să avem litera oblică, care este un fel de cursiv în care numai caracterele sunt înclinate și nu toate ca în cursiv.

Font-variantăÎl vom folosi pentru a stabili variante de font și avem doar două opțiuni, „normalul”, care este în mod implicit, și varianta „cu majuscule mici”, numită și cu majuscule mici, care face ca literele mari să arate de aceeași dimensiune ca literele mici.

Grosimea fontuluiEste una dintre cele mai utilizate proprietăți de când cu el putem controla grosimea literelor (atenție, nu este același cu dimensiunea fiecărei litere pe care o vom vedea mai târziu). Numeric vorbind are 9 opțiuni care sunt sutele de la 100 la 900, adică 100, 200, 300, 400, 500, 600, 700, 800 și 900. Există și valori scrise, „normalul” care echivalează cu 400 , „bold” care corespunde la 700 și care este ceea ce am numi bold și care curios nu a apărut în stil font ci aici. Există, de asemenea, valorile „mai îndrăznețe” sau „mai ușoare” și, uneori, altele precum „mediu” sau „greu” care sunt atribuite valorilor numerice în funcție de numărul de grosimi pe care le are fontul.

Marimea fontuluiCu această proprietate dacă vom controla dimensiunea fontului. Există patru valori disponibile, „dimensiune absolută”, „dimensiune relativă”, „unitate procentuală” și „unitate de măsură”. Există destul de puține unități de măsură absolute și relative definite în CSS, cum ar fi em, care este cea mai utilizată în această proprietate, ex, px,%, în, cm, mm, pt sau pc. În plus față de aceste măsuri există câteva cuvinte care funcționează și pot fi folosite, cum ar fi xx-small pentru cel mai mic, x-small, small, medium, large, x-large sau xx-large pentru cel mai mare. Aceste șase cuvinte corespund dimensiunilor diferitelor etichete de titlu html ale

la

și acestea sunt dimensiuni de măsurare absolute, deci vor arăta întotdeauna la fel, indiferent de rezoluția browserului sau a ecranului. Cuvintele „mai mic” și „mai mare” pot fi folosite și ca măsurători relative care vor depinde de dimensiunea fontului elementului care îl conține.

Inaltimea linieiEste deja definit în proprietățile textului.
Familie de fonturiProprietate folosită pe scară largă pe care noi vă permite să alegeți tipul sau fontul. Mai întâi punem numele fontului sau tipul de caractere și, opțional, acesta poate fi urmat de alte nume de fonturi în cazul în care browserul sau sistemul nostru nu are primul sau nu îl acceptă. Nu există un tip de font implicit, deoarece depinde de browserul nostru, deși unul foarte comun este „Times New Roman”. Unele valori generice ale tipului de font pot fi „serif” unde sunt incluse unele fonturi precum Times New Roman, Garamond, Georgia sau Cambria; „Sans-serif” și tipurile sale Verdana, Arial, Tahoma, Helvetica sau Futura. „Monospace” și exemplele sale Courier New sau Monaco, printre altele. Și „fantezie” cu tipurile Comic sans sau Impact. Desigur, există mult mai multe tipuri de caractere din care putem alege.

Spațiul dintre litereCu asta putem controlați spațiul dintre litere, și funcționează exact la fel ca analogul său de spațiere a cuvintelor cu proprietățile textului, cu valorile „normale” și o măsură validă.

CuloareÎn cele din urmă vom vedea proprietatea culorii pe care dorim să o introducem în textul nostru. În mod implicit, este negru. Există mai multe moduri de a alege culoarea, una dintre ele este prin cele 17 cuvinte de culoare diferite care există: aqua, negru, roșu, galben, albastru, fuchsia, verde, lime, portocaliu, gri, maro, măslin, bleumarin, violet , argintiu, verde și alb.

O altă opțiune este să puneți o culoare de Procent RGB, aceasta specifică pur și simplu trei procente corespunzătoare culorilor roșu ®, verde (G) și albastru (B):

 culoare: rgb (22%, 76%, 14%); (Cele 3 procente nu trebuie să dea 100%)

O altă modalitate este prin Zecimal RGB care funcționează exact la fel ca procentul RGB, dar în loc de a pune trei valori în procente, acestea sunt puse ca valori zecimale: