✅ Lister og menuer i CSS3

Indholdsfortegnelse

Til skabe dynamiske menuer til vores websider Det er meget almindeligt i dag at programmere i HTML5 og derefter give det et personligt udseende CSS3 at det er et sprog, der er baseret på typografiark, det vil sige, at koden, der giver form, farve og struktur til vores side, går i en separat fil, der er kodet uden for selve siden, som vi skriver.

Først og fremmest skal vi se, hvordan vi laver lister, da en menu trods alt er en liste, der er designet til at gøre den synligt mere elegant. På denne måde er vi struktureret i Html som en liste med links, og derefter sætter vi et personligt udseende allerede med CSS3.

Der er to typer lister, ordnet og uordnet. Hvis vi skal bruge en liste til senere at konfigurere en menu, er det højst sandsynligt, at vi vil bruge en uordnet liste, men vi vil se mulighederne.

De er skabt nøjagtig det samme, den eneste forskel ligger i det reserverede ord, som for det bestilte vil være

HTML -koden er som følger:


Første element
Andet element
Tredje element


Første element
Andet element
Tredje element

1. Første element
2. Andet element
3. Tredje element

Eller nøjagtig det samme uden det ordinære først:

Første element
Andet element
Tredje element

I HTML er der visse præformater, når vi opretter en liste, det vil sige, at der er en vis margen, skrifttypefarve, bullet, polstring osv. der vises som standard, når vi opretter vores liste. Det dårlige er, at det visuelt ikke ser særlig godt ud, det gode er, at det er ekstremt let at ændre det til vores smag takket være CSS.

Vi skal starte med at se på de forskellige typer vignetter, som vi kan placere på vores menu. Som standard går hvert punkt på listen forud for en sort cirkel. Vi kan dog sætte firkanter, tomme cirkler eller et billede fra vores fil.

Koden til ændring af punktet i CSS3 er følgende:

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

For at ændre margen ved hjælp af eksempelmenuen er det lige så enkelt som at bruge dette kode i CSS3:

 #menu {margin: 0px;}

 #menu {margin: 0px; polstring: 2px; }

CSS3 kode

 #menu {grænse: 2px;}

Ud over tykkelsen er grænsen et felt, der har mange muligheder, vi kan vælge en stil, en farve, en gradient … og vi kommer til at se nogle muligheder.

Border-stil
Startende med kantstilen, grænse-stil, de mest anvendte muligheder er:

IngenHvad dette gør er at fjerne selve kanten. Dette er standardindstillingen, så normalt når vi opretter lister til vores menuer, vises der ingen grænser, medmindre vi angiver det.

SolidDette er den kant, der måske bruges mest. Det er en kontinuerlig kant, sort i farven.
SkjultO skjult er en anden mulighed, hvor vi ikke visualiserer nogen kanter, da de er skjulte. Til programmeringsformål eksisterer den imidlertid. Det bruges til at afgrænse grænserne med andre tilstødende celler eller tabeller, selvom vi ikke ønsker, at der skal ses en tyk kant.
RygVi vil sætte denne kant, hvis vi vil have den til at skille sig ud fra resten. Får grænsen til at ligge et niveau over resten på skærmen.
BegyndelsenLigesom den forrige er det en fremspringende kant, men det ser ikke ud til at være et niveau over skærmens overflade, end hvad den bærer indeni.
RilleI modsætning til højderyg med denne kantstil ser det ud til, at elementet er sænket under resten.
IndsatPå samme måde som Groove ser det ud til, at denne kant ikke er sunket, men faktisk er et niveau under resten.
PrikketMed denne stil genererer vi en kant dannet af en stiplet linje, sort som standard og mellemrum.
DobbeltSom selve ordet siger, er det en dobbelt kant, dannet af to kontinuerlige sorte linjer adskilt af et mellemrum.

StipledeDette er en særlig type grænse, der ligner stiplede, bortset fra at punkterne bliver større linjer, det vil sige, det er en slags brudt linje.

Som med grænse, med kantstil kan vi vælge at definere grænsen for den ene side, begge, den øvre grænse, den nedre grænse eller alle. Hvis vi kun skriver en værdi, sættes den på alle kanter, og hvis vi skriver to muligheder i stedet for en, er den første for de øverste og nederste kanter, og den anden er for siderne.

Nu med dette har vi defineret grænsen, størrelsen og stilen, men menuen forbliver meget enkel og ikke særlig smuk visuelt. Vi vil gerne have lodrette menuer, da de er oprettet som standard, men hvis vi vil have dem til at være vandrette, skal vi tilføje søgeordet float, så hvert element på listen placeres ved siden af det næste.

Jeg forklarer dette lidt mere detaljeret, hvert element på listen, som vi har kodet med "li", har som standard et blokelements adfærd, det vil sige, efter at det er placeret, genererer det et linjeskift og forhindrer et andet element i at blive placeret ved hans side. Hvis vi vil placere hvert element på vores liste ud for det forrige, skal vi fjerne denne blokadfærd.

Til dette ville koden være følgende:

 #menu {list-style: none; margen: 0px; polstring: 0; } #menu li {margin: 2px; polstring: 2px; kant: 2px fast; flyde: venstre; }

vandret menu

Hvis vi nu vil have vores liste til at fungere som en menu og omdirigere os til det sted, hvor vi vil, skal vi tilføje et link til vores elementer. Dette er meget enkelt. I vores kode i Html tilføjer vi følgende:


Første element
Andet element
Tredje element

Endelig vil vi se nogle af mulighederne for udseendet.

Tekstegenskaber
BreddeHvis vi vil sætte en fast bredde. For eksempel bredde: 100 px;
Tekst-dekorationHvis vi vil have teksten i vores element dekoreret på en eller anden måde. Der er mange muligheder, men nogle af de mest almindelige er:

understrege: hvis vi vil have, at alt skal understreges
overlinje: samme som understregning sætter en linje i hele teksten, men denne gang i stedet for nedenunder.
blinke: Opret tekst, der skinner, og som blinker som et lys med mellemrum.
line-through: Vi skriver denne mulighed, hvis vi vil have vores tekst overstreget.
ingen: dette er en redundans, da teksten som standard har denne værdi uden dekoration. Nogle gange vil det dog være nyttigt, hvis vi vil vende tilbage til den oprindelige mulighed efter at have brugt en effekt ved hjælp af en ressource kaldet svæver, som vi vil se næste.

Juster tekstDet er den retning, hvori indholdet af vores blokelementer vil blive offentliggjort, vær forsigtig, ikke selve teksten, som vi vil se senere med retningsejendommen. Valgmulighederne er meget enkle: venstre, hvis vi vil have det til at gå fra venstre, højre, hvis vi vil have det til at gå fra højre til venstre, centrere, hvis vi vil have teksten centreret og begrunde, hvis vi vil have teksten begrundet.

RetningMed denne mulighed vil vi definere retningen på den tekst, vi skriver, i dette tilfælde er der kun to muligheder:

ltr: som er den, der vises som standard i browsere, da bortset fra nogle sprog, hvor den er skrevet fra højre til venstre, er det normalt at skrive fra venstre mod højre, hvilket er det, der definerer denne mulighed.
rtl: det er den anden mulige retning af teksten, fra højre til venstre, som vi vil bruge, hvis vi f.eks. vil skrive arabiske tekster.

TekstindrykningAt det kommer fra indrykning eller tabulering er en egenskab, der er ansvarlig for at fastsætte kriteriet i den første linje i vores blokelementer, og også i tabeller. Der er tre muligheder:

måle
procent
arve

I dem, hvis vi bruger procent, refererer vi til bredden af elementet, hvor det er placeret.
Også i dem alle kan vi bruge positive eller negative tal for enhver af de måleenheder, der findes for css3, pixels, ems …

Tekst-transformSidste ejendom relateret til den tekst, som vi vil se, der har at gøre med store og små bogstaver:

kapitalisere: Med denne mulighed vises kun det første bogstav i hvert ord med store bogstaver.
store bogstaver: viser al tekst med store bogstaver.
små bogstaver- Viser al tekst i små bogstaver.
ingen: efterlader teksten, som den blev skrevet. Det er den, der kommer som standard.

OrdmellemrumSelvom den ikke omhandler teksten direkte, gør den det på det mellemrum, som vi efterlader mellem ord. Dens værdier kan være "normale" eller et gyldigt mål. Hvis vi sætter et mål, føjes dets værdi til det normale mål, som er det, der kommer som standard.

Nu går vi med egenskaberne for skrifttypen.

Font egenskaber
SkrifttypeDenne egenskab er den mest komplette af alle dem, der er relateret til skrifttypen, og den har flere muligheder, når det kommer til at bruge den. Først kan du starte med en, to, tre eller ingen af værdierne "skrifttype", "skrifttypevariant" og "skrifttype-vægt".

Derefter skal vi sætte bogstavets størrelse med "font-size" eventuelt efterfulgt af afstanden, der er givet med "line-height" og altid slutte med typen af fontfamilie "font-family". Endelig skal du sætte en af følgende værdier:

billedtekst- Til knapper eller rullelister, det vil sige til kontrolelementer og formularfelter.
menu: hvis vi skal konfigurere rullemenuer eller andre typer menuer.
ikon: for teksterne, der vises under ikonerne.
meddelelsesboks-For dialogbokse, uanset om det er fejl pop-ups, informations pop-ups osv.
status-baA: for vinduesstatuslinjer.
lille billedtekstn - Til små formfelter og kontroller.

I font -egenskaben har vi brugt nogle andre muligheder, som vi ikke har set endnu, og som vi vil forklare nedenfor:

SkrifttypeMed det vil vi definere skrifttype. De værdier, den kan have, er "normal", hvilket er standard, "kursiv", hvis vi vil have vores bogstav til at være kursiv, det vil sige kursiv; eller "skråt", hvis vi vil have det skrå bogstav, som er en slags kursiv, hvor kun tegnene er skrå og ikke alle sammen som i kursiv.

Font-variantVi vil bruge det til at etablere skrifttype varianter og vi har kun to muligheder, den "normale", som er den, der kommer som standard, og den "små bogstaver" -variant, også kaldet små bogstaver, hvilket får store bogstaver til at se samme størrelse ud som små bogstaver.

Font-vægtDet er en af de mest brugte egenskaber siden med det vi kan kontrollere tykkelsen af bogstaverne (pas på, det er ikke det samme som størrelsen på hvert bogstav, som vi vil se senere). Numerisk set har den 9 muligheder, der er hundredvis fra 100 til 900, det vil sige 100, 200, 300, 400, 500, 600, 700, 800 og 900. Der er også skrevne værdier, det "normale", der svarer til 400 , "fed", der svarer til 700, og som er det, vi vil kalde fed, og som nysgerrigt ikke optrådte i skrifttype, men her. Der er også værdierne "dristigere" eller "lettere" og nogle gange andre såsom "medium" eller "tung", der tildeles numeriske værdier afhængigt af antallet af tykkelser, skrifttypen har.

SkriftstørrelseMed denne ejendom hvis vi vil kontrollere skriftstørrelsen. Der er fire tilgængelige værdier, "absolut størrelse", "relativ størrelse", "procent enhed" og "måleenhed". Der er ganske få absolutte og relative måleenheder defineret i css såsom em, som er den mest anvendte i denne egenskab, ex, px,%, in, cm, mm, pt eller pc. Ud over disse foranstaltninger er der nogle ord, der virker og kan bruges, f.eks. Xx-small for de mindste, x-small, small, medium, large, x-large eller xx-large for de største. Disse seks ord svarer til størrelserne på de forskellige html -titelmærker af

til

og disse er absolutte målstørrelser, så de vil altid se ens ud uanset browser- eller skærmopløsning. Ordene "mindre" og "større" kan også bruges som relative målinger, der afhænger af skrifttypestørrelsen på det element, der indeholder det.

LinjehøjdeDet er allerede defineret i tekstegenskaberne.
Font-familieMeget brugt ejendom, som vi giver dig mulighed for at vælge skrifttype eller skrifttype. Først satte vi navnet på skrifttypen eller skrifttypen, og den kan eventuelt efterfølges af andre skrifttypenavne, hvis vores browser eller system ikke har den første eller ikke understøtter den. Der er ingen standard skrifttype, da den afhænger af vores browser, selvom en meget almindelig er "Times New Roman". Nogle generiske skrifttypeværdier kan være "serif", hvor nogle skrifttyper som Times New Roman, Garamond, Georgia eller Cambria er inkluderet; "Sans-serif" og dens typer Verdana, Arial, Tahoma, Helvetica eller Futura. "Monospace" og dets eksempler Courier New eller Monaco blandt andre. Og "fantasi" med Comic sans eller Impact -typerne. Selvfølgelig er der mange flere skrifttyper, som vi kan vælge imellem.

Afstand mellem bogstaverMed dette kan vi kontrollere mellemrummet mellem bogstaver, og det fungerer nøjagtig det samme som dets ordafstandsmæssige analog af tekstegenskaber med værdierne "normal" og et gyldigt mål.

FarveEndelig vil vi se egenskab ved den farve, vi ønsker at sætte i vores tekst. Som standard er den sort. Der er flere måder at vælge farve på, en af dem er gennem de 17 forskellige farveord, der er: aqua, sort, rød, gul, blå, fuchsia, grøn, lime, orange, grå, rødbrun, oliven, marineblå, lilla , sølv, blågrøn og hvid.

En anden mulighed er at sætte en farve på RGB procent, dette er blot at angive tre procentdele, der svarer til farverne rød ®, grøn (G) og blå (B):

 farve: rgb (22%, 76%, 14%); (De 3 procenter behøver ikke at give 100%)

En anden måde er ved RGB decimal som fungerer nøjagtigt det samme som procentdelen RGB, men i stedet for at sætte tre værdier i procent sættes de som decimalværdier: