✅ Listor och menyer i CSS3

Innehållsförteckning

Till skapa dynamiska menyer för våra webbsidor Det är mycket vanligt idag att programmera i HTML5 och sedan ge det ett personligt utseende CSS3 att det är ett språk som är baserat på formatmallar, det vill säga koden som ger form, färg och struktur till vår sida går i en separat fil som är kodad utanför själva sidan som vi skriver.

Först och främst ska vi se hur man gör listor, eftersom en meny trots allt är en lista som är utformad för att göra den synligt mer elegant. På detta sätt är vi strukturerade i Html som en lista med länkar och sedan sätter vi ett personligt utseende redan med CSS3.

Det finns två typer av listor, ordnade och oordnade. Om vi ska använda en lista för att senare konfigurera en meny är det troligtvis att vi kommer att använda en oordnad lista, men vi kommer att se alternativen.

De är skapade exakt samma, den enda skillnaden ligger i det reserverade ordet, vilket för det ordnade kommer att vara

HTML -koden är följande:


Första elementet
Andra elementet
Tredje elementet


Första elementet
Andra elementet
Tredje elementet

1. Första elementet
2. Andra elementet
3. Tredje elementet

Eller exakt samma sak utan ordinalen först:

Första elementet
Andra elementet
Tredje elementet

I HTML finns det vissa förformat när vi skapar en lista, det vill säga det finns en viss marginal, teckensnittsfärg, punkt, vaddering etc. som visas som standard när vi skapar vår lista. Det dåliga är att det visuellt inte ser särskilt bra ut, det som är bra är att det är extremt enkelt att ändra det till vår smak tack vare CSS.

Vi ska börja med att titta på de olika typerna av vinjetter som vi kan placera på vår meny. Som standard föregås varje objekt i listan av en svart cirkel. Men vi kan sätta rutor, tomma cirklar eller en bild från vår fil.

Koden för att ändra punkten i CSS3 är följande:

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

För att ändra marginalen med exempelmenyn är det lika enkelt som att använda detta kod i CSS3:

 #meny {marginal: 0px;}

 #meny {marginal: 0px; vaddering: 2px; }

CSS3 -kod

 #meny {border: 2px;}

Förutom tjockleken är gränsen ett fält som har många möjligheter, vi kan välja en stil, en färg, en lutning … och vi kommer att se några alternativ.

Gränsstil
Börjar med kantstilen, gränsstil, de mest använda möjligheterna är:

IngenVad detta gör är att ta bort själva kanten. Detta är standardalternativet, så normalt när vi skapar listor för våra menyer visas inga gränser om vi inte anger det.

FastDetta är den kant som kan användas mest. Det är en kontinuerlig kant, svart i färgen.
DoldO dold är ett annat alternativ där vi inte visualiserar några kanter, eftersom de är dolda. För programmeringsändamål finns det dock. Den används för att avgränsa gränserna med andra intilliggande celler eller tabeller även om vi inte vill att en tjock kant ska synas.
bergsryggVi kommer att sätta denna kant om vi vill att den ska skilja sig från resten. Gör att gränsen verkar placeras en nivå ovanför resten på skärmen.
BörjanLiksom den föregående är det en utskjutande kant, men det verkar inte vara en nivå över skärmens yta än vad den bär inuti.
RäfflaTill skillnad från åsen med denna kantstil verkar det som om elementet har sjunkit under resten.
InsatsPå samma sätt som Groove verkar denna kant inte vara nedsänkt men ligger faktiskt en nivå under resten.
PrickadMed denna stil genererar vi en kant bildad av en prickig linje, svart som standard och mellanslag.
DubbelSom ordet själv säger är det en dubbel kant, bildad av två kontinuerliga svarta linjer separerade av ett mellanslag.

StreckadDetta är en speciell typ av kant som liknar prickade, förutom att punkterna blir större linjer, det vill säga att det är ett slags trasig linje.

Precis som med gräns, med gränsstil kan vi välja att definiera gränsen för ena sidan, båda, den övre gränsen, den nedre gränsen eller alla. Om vi bara skriver ett värde sätts det på alla kanter, och om vi skriver två alternativ istället för ett, är det första för de övre och nedre kanterna och det andra är för sidorna.

Nu, med detta har vi definierat gränsen, storleken och stilen, men menyn är fortfarande mycket enkel och inte särskilt vacker visuellt sett. Vi kan vilja ha vertikala menyer, eftersom de skapas som standard, men om vi vill att de ska vara horisontella måste vi lägga till nyckelordet float så att varje objekt i listan placeras bredvid nästa.

Jag förklarar detta lite mer detaljerat, varje element i listan som vi har kodat med "li" har som standard beteendet hos ett blockelement, det vill säga efter att det placerats genererar det ett radavbrott och förhindrar att ett annat element placeras vid hans sida. Om vi vill placera varje element i vår lista bredvid det föregående måste vi eliminera detta blockbeteende.

För detta skulle koden vara följande:

 #meny {list-style: none; marginal: 0px; vaddering: 0; } #meny li {marginal: 2px; vaddering: 2px; kant: 2px fast; flyta till vänster; }

horisontell meny

Om vi nu vill att vår lista ska fungera som en meny och omdirigera oss dit vi vill, måste vi lägga till en länk till våra element. Detta är mycket enkelt. I vår kod i Html lägger vi till följande:


Första elementet
Andra elementet
Tredje elementet

Slutligen kommer vi att se några av alternativen för utseendet.

Textegenskaper
BreddOm vi vill sätta en fast bredd. Till exempel bredd: 100 px;
Text-dekorationOm vi vill att texten i vårt element ska dekoreras på något sätt. Det finns många möjligheter men några av de vanligaste är:

Understrykning: om vi vill att allt ska understrykas
överlinje: samma som understruken sätter en rad i all text, men den här gången istället för under ovan.
blinka: Skapa text som lyser, som blinkar som ett ljus med jämna mellanrum.
Linje genom: Vi kommer att skriva det här alternativet om vi vill att vår text ska vara överstruken.
ingen: detta är en redundans eftersom texten som standard kommer med detta värde, utan någon dekoration. Ibland kan det dock vara användbart om vi vill återgå till det ursprungliga alternativet efter att ha använt en effekt med hjälp av en resurs som heter hover som vi kommer att se nästa.

TextjusteraDet är i vilken riktning innehållet i våra blockelement kommer att publiceras, var försiktig, inte själva texten, som vi kommer att se senare med riktningsegenskapen. Alternativen är väldigt enkla: vänster om vi vill att den ska gå från vänster, höger om vi vill att den ska gå från höger till vänster, centrera om vi vill att texten ska vara centrerad och motivera om vi vill att texten ska vara motiverad.

RiktningMed det här alternativet kommer vi att definiera riktningen för texten som vi skriver, i det här fallet finns det bara två alternativ:

ltr: vilket är det som visas som standard i webbläsare, eftersom det förutom vissa språk där det är skrivet från höger till vänster är vanligt att skriva från vänster till höger, vilket är det som definierar det här alternativet.
rtl: det är den andra möjliga riktningen av texten, från höger till vänster som vi kommer att använda om vi vill skriva arabiska texter till exempel.

Text-indragAtt det kommer från indragning eller tabulering är en egenskap som är ansvarig för att fastställa nämnda kriterium i den första raden i våra blockelement, och även i tabeller. Det finns tre alternativ:

mäta
procentsats
ärva

I dem om vi använder procent kommer vi att hänvisa till bredden på elementet där det finns.
Också i dem alla kan vi använda positiva eller negativa siffror för någon av de måttenheter som finns för css3, pixlar, ems …

Text-transformSista egenskapen relaterad till texten som vi kommer att se som har att göra med versaler och gemener:

kapitalisera: med det här alternativet visas bara den första bokstaven i varje ord med stora bokstäver.
versal: visar all text med stora bokstäver.
små bokstäver- Visar all text i gemener.
ingen: lämnar texten som den skrevs. Det är den som kommer som standard.

OrdavståndÄven om den inte behandlar texten direkt, gör den det på det utrymme som vi lämnar mellan ord. Dess värden kan vara "normala" eller ett giltigt mått. Om vi sätter ett mått läggs dess värde till det normala måttet som är det som kommer som standard.

Nu går vi med teckensnittets egenskaper.

Teckensnittsegenskaper
FontDen här egenskapen är den mest kompletta av alla som är relaterade till teckensnittet, och den har flera alternativ när det gäller att använda den. Först kan du börja med ett, två, tre eller inget av värdena "typsnitt", "font-variant" och "Font-weight".

Sedan måste vi sätta storleken på bokstaven med "font-size" valfritt följt av avståndet som anges med "line-height" och alltid sluta med typen av typsnittfamiljen "font-family". Slutligen måste du ange ett av följande värden:

rubrik- För knappar eller listrutor, det vill säga för kontroller och formulärfält.
meny: om vi ska konfigurera rullgardinsmenyer eller andra typer av menyer.
ikon: för texterna som visas under ikonerna.
meddelandebox-För dialogrutor, oavsett om det är fel popup-fönster, informations popup-fönster, etc.
status-baA: för fönsterstatusfält.
liten bildn - För små formulärfält och kontroller.

I font -egenskapen har vi använt några andra alternativ som vi inte har sett ännu och som vi kommer att förklara nedan:

TypsnittMed det kommer vi att definiera typsnitt. De värden den kan ha är "normal", vilket är standard, "kursiv" om vi vill att vår bokstav ska vara kursiv, det vill säga kursiv; eller "snedställt" om vi vill ha den sneda bokstaven, som är ett slags kursiv där endast tecknen lutar och inte alla som i kursiv.

Font-variantVi kommer att använda det för att fastställa typsnittsvarianter och vi har bara två alternativ, den "normala" som är den som kommer som standard och varianten "små bokstäver", även kallad små bokstäver, vilket gör att stora bokstäver ser lika stora ut som små bokstäver.

Font-viktDet är en av de mest använda egenskaperna sedan dess vi kan kontrollera tjockleken på bokstäverna (var försiktig, det är inte samma sak som storleken på varje bokstav som vi kommer att se senare). Numeriskt sett har den 9 alternativ som är hundratals från 100 till 900, det vill säga 100, 200, 300, 400, 500, 600, 700, 800 och 900. Det finns också skrivna värden, det "normala" som motsvarar 400 , "fet" som motsvarar 700 och som är vad vi skulle kalla fetstil och som nyfiket inte förekom i typsnitt utan här. Det finns också värdena "djärvare" eller "lättare" och ibland andra som "medium" eller "tung" som tilldelas numeriska värden beroende på antalet tjocklekar som teckensnittet har.

TextstorlekMed den här egenskapen om vi kommer att styra teckenstorleken. Det finns fyra värden tillgängliga, "absolut storlek", "relativ storlek", "procentenhet" och "måttenhet". Det finns en hel del absoluta och relativa måttenheter definierade i css som em, som är den mest använda i denna egenskap, ex, px,%, in, cm, mm, pt eller pc. Förutom dessa mått finns det några ord som fungerar och kan användas som xx-small för de minsta, x-små, små, medelstora, stora, x-stora eller xx-stora för de största. Dessa sex ord motsvarar storleken på de olika html -titeltaggarna för

till

och dessa är absoluta måttstorlekar, så de kommer alltid att se likadana ut oavsett webbläsare eller skärmupplösning. Orden "mindre" och "större" kan också användas som relativa mått som beror på teckenstorleken på elementet som innehåller det.

RadavståndDet är redan definierat i textegenskaperna.
TypsnittsfamiljMycket använd egendom som vi låter dig välja typsnitt eller teckensnitt. Först sätter vi namnet på teckensnittet, eller typsnittet, och eventuellt kan det följas av andra teckensnittsnamn om vår webbläsare eller system inte har det första eller inte stöder det. Det finns ingen standardtyptyp, eftersom det beror på vår webbläsare, även om en mycket vanlig är "Times New Roman". Vissa generiska typsnittsvärden kan vara "serif" där vissa typsnitt som Times New Roman, Garamond, Georgia eller Cambria ingår; "Sans-serif" och dess typer Verdana, Arial, Tahoma, Helvetica eller Futura. "Monospace" och dess exempel Courier New eller Monaco bland andra. Och "fantasi" med Comic sans eller Impact -typerna. Naturligtvis finns det många fler typsnitt som vi kan välja mellan.

TeckenavståndMed detta kan vi kontrollera mellanrummet mellan bokstäver, och det fungerar exakt samma som dess ordavståndsanalog för textegenskaper, med värdena "normal" och ett giltigt mått.

FärgSlutligen får vi se egenskapen för den färg som vi vill sätta i vår text. Som standard är den svart. Det finns flera sätt att välja färg, ett av dem är genom de 17 olika färgorden som finns: aqua, svart, röd, gul, blå, fuchsia, grön, lime, orange, grå, rödbrun, oliv, marin, lila , silver, kricka och vitt.

Ett annat alternativ är att sätta en färg på RGB -procent, detta är helt enkelt att ange tre procentsatser som motsvarar färgerna röd ®, grön (G) och blå (B):

 färg: rgb (22%, 76%, 14%); (De 3 procentsatserna behöver inte ge 100%)

Ett annat sätt är genom RGB -decimal som fungerar exakt samma som procenten RGB men istället för att sätta tre värden i procent sätts de som decimalvärden: