✅ Lister og menyer i CSS3

Innholdsfortegnelse

Til lage dynamiske menyer for våre nettsider Det er veldig vanlig i dag å programmere i HTML5 og deretter gi det et personlig utseende CSS3 at det er et språk som er basert på stilark, det vil si at koden som gir formen, fargen og strukturen til siden vår, går i en egen fil som er kodet utenfor selve siden som vi skriver.

Først og fremst skal vi se hvordan vi lager lister, siden tross alt en meny er en liste som er utformet for å gjøre den mer synlig mer elegant. På denne måten er vi strukturert i Html som en liste over lenker, og så legger vi et personlig utseende allerede med CSS3.

Det er to typer lister, ordnet og uordnet. Hvis vi skal bruke en liste til senere å konfigurere en meny, er det mest sannsynlig at vi vil bruke en uordnet liste, men vi vil se alternativene.

De er skapt nøyaktig det samme, den eneste forskjellen ligger i det reserverte ordet, som for det ordnede vil være

HTML -koden er som følger:


Første element
Andre element
Tredje element


Første element
Andre element
Tredje element

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

Eller nøyaktig det samme uten det ordinære først:

Første element
Andre element
Tredje element

I HTML er det visse forhåndsformater når vi lager en liste, det vil si at det er en viss margin, skriftfarge, bullet, padding, etc. som vises som standard når du oppretter listen vår. Det dårlige er at det visuelt ikke ser veldig bra ut, det gode er at det er ekstremt enkelt å endre det etter vår smak takket være CSS.

Vi skal begynne med å se på de forskjellige typene vignetter som vi kan plassere på menyen vår. Som standard går hvert element i listen foran en svart sirkel. Imidlertid kan vi sette firkanter, tomme sirkler eller et bilde fra filen vår.

Koden for å endre kulen i CSS3 er følgende:

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

For å endre margen ved hjelp av eksempelmenyen, er det like enkelt som å bruke denne kode i CSS3:

 #meny {margin: 0px;}

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

CSS3 -kode

 #meny {border: 2px;}

I tillegg til tykkelsen er grensen et felt som har mange muligheter, vi kan velge en stil, en farge, en gradient … og vi skal se noen alternativer.

Border-Style
Fra og med kantstilen, grensestil, de mest brukte mulighetene er:

IngenDet dette gjør er å fjerne selve kanten. Dette er standardalternativet, så normalt når vi oppretter lister for menyene våre, vises ingen grenser med mindre vi spesifiserer det.

FastDette er kanten som kan brukes mest. Det er en sammenhengende kant, svart i fargen.
SkjultO skjult er et annet alternativ der vi ikke visualiserer noen kanter, siden de er skjult. For programmeringsformål eksisterer den imidlertid. Den brukes til å avgrense kantene med andre tilstøtende celler eller tabeller, selv om vi ikke vil at en tykk kant skal sees.
RidgeVi vil sette denne kanten hvis vi vil at den skal skille seg ut fra resten. Gjør at grensen ser ut til å være plassert ett nivå over resten på skjermen.
UtgangspunktetI likhet med den forrige er det en fremspringskant, men dette ser ikke ut til å være et nivå over skjermens overflate enn det den bærer inne.
SporI motsetning til ryggen med denne kantstilen ser det ut til at elementet er senket under resten.
InnfeltPå samme måte som Groove ser det ikke ut til at denne kanten er senket, men er faktisk ett nivå under resten.
PrikketMed denne stilen genererer vi en grense dannet av en stiplet linje, svart som standard og mellomrom.
DobbeltSom selve ordet sier, er det en dobbel kant, dannet av to sammenhengende svarte linjer atskilt med et mellomrom.

StipletDette er en spesiell type grense som ligner på stiplet, bortsett fra at punktene blir større linjer, det vil si at det er en slags brutt linje.

Som med kantlinje, med kantstil kan vi velge å definere grensen til den ene siden, begge, øvre grense, nedre grense eller alle. Hvis vi bare skriver en verdi, settes den på alle kanter, og hvis vi skriver to alternativer i stedet for en, er den første for øvre og nedre kant og den andre er for sidene.

Nå, med dette har vi definert grensen, størrelsen og stilen, men menyen forblir veldig enkel og ikke veldig pen visuelt sett. Vi kan ønske vertikale menyer, ettersom de er opprettet som standard, men hvis vi vil at de skal være horisontale må vi legge til søkeordet float slik at hvert element i listen plasseres ved siden av det neste.

Jeg forklarer dette litt mer detaljert, hvert element i listen som vi har kodet med "li" har som standard oppførselen til et blokkelement, det vil si at etter å ha blitt plassert genererer det et linjeskift og forhindrer et annet element i å bli plassert ved hans side. Hvis vi vil plassere hvert element i listen vår ved siden av den forrige, må vi eliminere denne blokkatferden.

For dette vil koden være følgende:

 #meny {list-style: none; margin: 0px; polstring: 0; } #meny li {margin: 2px; polstring: 2px; kant: 2px solid; flyte: venstre; }

horisontal meny

Hvis vi vil at listen vår skal fungere som en meny og omdirigere oss dit vi vil, må vi legge til en lenke til elementene våre. Dette er veldig enkelt. I vår kode i Html legger vi til følgende:


Første element
Andre element
Tredje element

Til slutt vil vi se noen av alternativene for utseendet.

Tekstegenskaper
BreddeHvis vi vil sette en fast bredde. For eksempel bredde: 100 px;
Tekst-dekorasjonHvis vi vil at teksten til elementet vårt skal bli dekorert på en eller annen måte. Det er mange muligheter, men noen av de vanligste er:

understreket: hvis vi vil at alt skal understrekes
overlinje: samme som understreking setter en linje i all teksten, men denne gangen i stedet for under ovenfor.
blinke: Lag tekst som skinner, som blinker som et lys med jevne mellomrom.
line-through: Vi vil skrive dette alternativet hvis vi vil at teksten vår skal krysses av.
ingen: dette er en redundans siden teksten som standard har denne verdien, uten noen dekorasjon. Noen ganger vil det imidlertid være nyttig hvis vi ønsker å gå tilbake til det første alternativet etter å ha brukt en effekt ved hjelp av en ressurs som kalles hover, som vi vil se neste.

Juster tekstDet er retningen innholdet i blokkelementene våre skal publiseres i. Vær forsiktig, ikke selve teksten, som vi vil se senere med retningseiendommen. Alternativene er veldig enkle: venstre hvis vi vil at den skal gå fra venstre, høyre hvis vi vil at den skal gå fra høyre til venstre, midtstille hvis vi vil at teksten skal være sentrert og begrense hvis vi vil at teksten skal være begrunnet.

RetningMed dette alternativet skal vi definere retningen på teksten vi skriver, i dette tilfellet er det bare to alternativer:

ltr: som er det som vises som standard i nettlesere, siden bortsett fra noen språk der det er skrevet fra høyre til venstre, er det vanlig å skrive fra venstre til høyre, som er det som definerer dette alternativet.
rtl: det er den andre mulige retningen av teksten, fra høyre til venstre som vi vil bruke hvis vi vil skrive arabiske tekster for eksempel.

TekstinnrykkAt det kommer fra innrykk eller tabulering er en egenskap som er ansvarlig for å etablere nevnte kriterium i første linje i blokkelementene våre, og også i tabeller. Det er tre alternativer:

måle
prosentdel
arve

I dem, hvis vi bruker prosent, vil vi referere til bredden på elementet der det er plassert.
Også i dem alle kan vi bruke positive eller negative tall for alle måleenhetene som finnes for css3, piksler, ems …

Tekst-transformSiste egenskap knyttet til teksten som vi vil se som har å gjøre med store og små bokstaver:

kapitalisere: Med dette alternativet vil bare den første bokstaven i hvert ord vises med store bokstaver.
stor bokstav: viser all tekst med store bokstaver.
små bokstaver- Viser all tekst i små bokstaver.
ingen: forlater teksten slik den ble skrevet. Det er den som kommer som standard.

OrdavstandSelv om den ikke omhandler teksten direkte, gjør den det på mellomrommet som vi lar mellom ordene. Verdiene kan være "normale" eller et gyldig mål. Hvis vi setter et mål, blir verdien lagt til det normale målet som er det som kommer som standard.

Nå går vi med egenskapene til skriften.

Font egenskaper
SkriftDenne egenskapen er den mest komplette av alle de som er relatert til skriften, og den har flere alternativer når det gjelder å bruke den. Først kan du starte med en, to, tre eller ingen av verdiene "font-style", "font-variant" og "Font-weight".

Deretter må vi sette størrelsen på bokstaven med "font-size" eventuelt etterfulgt av avstanden som er gitt med "line-height" og alltid slutte med typen fontfamilie "font-family". Til slutt må du sette en av følgende verdier:

bildetekst- For knapper eller rullegardinlister, det vil si for kontroller og skjemafelt.
Meny: hvis vi skal konfigurere rullegardinmenyer eller andre typer menyer.
ikon: for tekstene som vises under ikonene.
meldingsboks-For dialogbokser, enten det er feil popup-vinduer, informasjons popup-vinduer, etc.
status-baA: for vindusstatuslinjer.
liten tekstn - For små skjemafelt og kontroller.

I font -egenskapen har vi brukt noen andre alternativer som vi ikke har sett ennå, og som vi vil forklare nedenfor:

FontstilMed det vil vi definere fontstil. Verdiene den kan ha er "normal", som er standard, "kursiv" hvis vi vil at bokstaven vår skal være kursiv, det vil si kursiv; eller "skrå" hvis vi vil ha den skrå bokstaven, som er en slags kursiv der bare tegnene er skråstilte og ikke alle sammen som i kursiv.

Font-variantVi vil bruke den til å etablere skriftvarianter og vi har bare to alternativer, den "normale" som er den som kommer som standard, og varianten "små bokstaver", også kalt små bokstaver, noe som får store bokstaver til å se like store ut som små bokstaver.

Font-vektDet er en av de mest brukte egenskapene siden med den vi kan kontrollere tykkelsen på bokstavene (vær forsiktig, det er ikke det samme som størrelsen på hver bokstav som vi får se senere). Numerisk sett har den 9 alternativer som er hundrevisene fra 100 til 900, det vil si 100, 200, 300, 400, 500, 600, 700, 800 og 900. Det er også skrevne verdier, det "normale" som tilsvarer 400 , "fet" som tilsvarer 700 og som er det vi vil kalle fet skrift og som merkelig nok ikke dukket opp i skriftstil, men her. Det er også verdiene "dristigere" eller "lettere" og noen ganger andre som "middels" eller "tunge" som er tilordnet numeriske verdier avhengig av antall tykkelser som skriften har.

SkriftstørrelseMed denne eiendommen hvis vi vil kontrollere skriftstørrelsen. Det er fire tilgjengelige verdier, "absolutt størrelse", "relativ størrelse", "prosent enhet" og "måleenhet". Det er ganske mange absolutte og relative måleenheter definert i css som em, som er den mest brukte i denne egenskapen, eks, px,%, in, cm, mm, pt eller pc. I tillegg til disse tiltakene er det noen ord som fungerer og kan brukes, for eksempel xx-small for de minste, x-small, small, medium, large, x-large eller xx-large for de største. Disse seks ordene tilsvarer størrelsene på de forskjellige html -tittelkodene til

til

og disse er absolutte målstørrelser, så de vil alltid se like ut uansett nettleser- eller skjermoppløsning. Ordene "mindre" og "større" kan også brukes som relative målinger som vil avhenge av skriftstørrelsen til elementet som inneholder det.

LinjehøydeDet er allerede definert i tekstegenskapene.
Font-familieMye brukt eiendom som vi lar deg velge skrifttype eller skrift. Først setter vi navnet på skrifttypen, eller skrifttypen, og den kan eventuelt følges av andre skriftnavn hvis nettleseren eller systemet vårt ikke har det første eller ikke støtter det. Det er ingen standard skrifttype, siden det avhenger av nettleseren vår, selv om en veldig vanlig er "Times New Roman". Noen generiske skrifttypeverdier kan være "serif" hvor noen fonter som Times New Roman, Garamond, Georgia eller Cambria er inkludert; "Sans-serif" og dens typer Verdana, Arial, Tahoma, Helvetica eller Futura. "Monospace" og dets eksempler Courier New eller Monaco blant andre. Og "fantasi" med Comic sans eller Impact -typene. Selvfølgelig er det mange flere skrifttyper vi kan velge mellom.

Avstand mellom bokstaveneMed dette kan vi kontrollere mellomrommet mellom bokstavene, og den fungerer nøyaktig det samme som sin ordavstandsanalog for tekstegenskaper, med verdiene "normal" og et gyldig mål.

FargeTil slutt får vi se egenskapen til fargen som vi ønsker å sette i teksten vår. Som standard er den svart. Det er flere måter å velge farge på, en av dem er gjennom de 17 forskjellige fargeordene som finnes: aqua, svart, rød, gul, blå, fuchsia, grønn, lime, oransje, grå, rødbrun, oliven, marineblå, lilla , sølv, blågrønn og hvit.

Et annet alternativ er å sette en farge på RGB -prosent, dette er ganske enkelt å angi tre prosenter som tilsvarer fargene rød ®, grønn (G) og blå (B):

 farge: rgb (22%, 76%, 14%); (De 3 prosentene trenger ikke å gi 100%)

En annen måte er RGB desimal som fungerer nøyaktig det samme som prosentandelen RGB, men i stedet for å sette tre verdier i prosent, blir de satt som desimalverdier: