Uanset om du kender det eller ej, udnytter du CSS, næsten hver gang du åbner en webbrowser. Det er skabelonsystemet, der bruges af næsten alle moderne hjemmesider for at give sider deres layout og udseende. Nogle af jer tænker måske " Jeg har lavet hjemmesider før, og det var nemt, jeg havde aldrig brug for nogen CSS. "Og det er sandt. Du behøver ikke CSS til at gøre et godt udseende og funktionelt websted, men chancerne er gode, at dit websted kunne have været mindre, renere, mere konsekvent og bedre, hvis du havde valgt CSS fra starten. I dag vil vi vise dig de grundlæggende grunde til, hvad CSS kan gøre. Denne vejledning bringer dig ikke fra en begynder til Award Winning Web Designer, men det hjælper dig med at forstå, hvordan CSS fungerer, og hvordan det kan svare dig en masse tid og kræfter.

Hurtigt overblik

CSS (Cascading Style Sheet) er beregnet til at gøre en ting: administrere præsentationen af ​​dit websted. Det lyder måske simpelt, men husk det, når vi fortsætter. En vigtig ting at tage væk fra den kendsgerning er, at præsentationen ikke er jobbet af HTML. HTML definerer strukturen på din side (hvad er en header, hvad er en sidefod osv.). CSS tager den struktur og gør alt arbejdet med, hvordan strukturen præsenteres .

Den forkerte måde

For at give dig en ide om, hvad CSS er beregnet til at rette, skal du kigge på denne HTML kode:

 Min hjemmeside 
Største websted nogensinde er under udvikling.


Udlændinge har også invaderet.


Hvilket dukker op i din browser som sådan:

Der er en række potentielle problemer her. Til at begynde med placerer den skrifttype og farveinformation hver gang en ny overskrift eller et afsnit er tegnet. Hvert nyt emne på webstedet vil have brug for identiske skrifttype og farvedefinitioner, selvom de er ens for hver overskrift og afsnit. Dette svarer til masser af spildt båndbredde, hvis du har mange indgange.

Næste er problemet med skalerbarhed. Hvis du har 100 indlæg på denne nyhedsside, og du beslutter at overskrifter skal være røde, har du meget arbejde foran dig for at ændre hver overskriftstag for at vise den nye farve.

For det tredje, og dette er et spørgsmål om "korrekt procedure" indeholder denne side flere elementer, der er "præsentative", ikke "strukturelle". Skrifttypen, farven og linebreak-tagsne vedrører alt sammen, hvordan siden præsenteres og har intet at gøre med sidens struktur. HTML er dårligt egnet til præsentation, det job, der bedst overlades til CSS, som vi viser nedenfor.

Design med CSS

Så hvordan kan vi fjerne alle disse ekstra tags? Hvordan kan vi reducere sidestørrelsen samtidig med at vi holder vores farver og layout? Nå, billedet kan du definere på et enkelt sted, hvad ALLE dine overskrifter skal se ud (siger stor grøn tekst). Derefter behøver du ikke at definere farven for hver unik overskrift. Det samme gælder for stykkerne. Hvis du vil have hele afsnitsteksten til at være blå, skal du bare sætte det som en CSS-regel for "p" -taggen. Alle yderligere afsnit vil have blå tekst, uden at du skal angive den hver gang.

CSS bedst læres af eksempel. Lad os begynde med at definere nøjagtigt de ovenfor beskrevne regler - alle overskrifter skal være grønne og alle afsnit skal være blå. Brug den tekst editor, du ønsker, ved at starte en ny fil ved navn style.css og tilføj følgende tekst:

 h1 {farve: grøn;} p {farve: blå;}

Dette definerer alle h1- tags som at have grøn tekst, og alle p- mærker har blå tekst.

Alt, hvad vi skal gøre nu, er at forbinde det til HTML'et med linketiketten, og fjern derefter alle de ubrugelige skrifttyper fra HTML'en. Når det er færdigt, skal det se sådan ud:

 Min hjemmeside 
Største websted nogensinde er under udvikling.
Udlændinge har også invaderet.

Helt lidt renere, huh? Vi har allerede reduceret den samlede størrelse på vores websted, og det var kun med 2 poster i vores "blog".

CSS til layout

Sikker på, det kan gøre dine skrifttyper konsekvente, men det alene er bestemt ikke nok til at gøre CSS det komplette værktøj til præsentation af hjemmesider. For at gøre det skal det være i stand til at påvirke layoutet på dit websted, hvilket giver dig kontrol over, ikke bare hvordan tingene ser ud, men hvor de går. Den fulde effekt af CSS over site layout er langt ud over denne vejledning, så vi vil introducere konceptet gennem et enkelt fælles scenario - et navigations sidebjælke.

Oprettelse af noget som dette er forbavsende simpelt i CSS. Gå tilbage til din style.css fil og tilføj følgende afsnit:

 #sidebar {width: 100px; højde: 200 pixel; border-style: solid; flyde: venstre; margin-højre: 15px; }

Vær opmærksom på # i starten af ​​navnet sidebjælken . Kort sagt - dette fortæller CSS at vi arbejder med et nyt unikt varenavn, som vi lavede, i modsætning til et indbygget tag som h1 eller p . Den lange forklaring indebærer forskellen mellem et id og en klasse og forklares detaljeret her.

Du skal kunne se flere vigtige bits her. Først oprettet vi et nyt id, der hedder sidebjælke, gav det en bestemt højde og bredde, en solid kant og angav, at den skulle have en 15px margin på højre side. Vi har fortalt det at flyde på venstre side af skærmen, med andre sideelementer (som din tekst) der flyder rundt om det. Du kan aktivere dette element ved at tilføje et sidebar- tag til kroppen af ​​din HTML, sådan som det her.

  • Punkt 1
  • Punkt 2
  • Punkt 3

Og nu når du åbner din side, er der din nye sidebjælke!

Konklusion

Det er klart, at vi kun begyndt at ridse overfladen af ​​CSS's evner, men forhåbentlig bør det være klart, at disse grundlæggende principper kan anvendes meget mere end hvad vi har gjort her. Tekstmanipulationerne kan bruges til at formatere tekst på utallige måder, og ved at ændre sidebarekonceptet kan du oprette uendelige variationer af layout. For yderligere undersøgelse anbefaler denne forfatter stærkt CSS-sektionen af ​​W3Schools.com.

Billedkredit: geirarne