Enten du vet det eller ikke, utnytter du CSS uansett når du åpner en nettleser. Det er malesystemet som brukes av nesten alle moderne nettsider for å gi sider deres layout og utseende. Noen av dere kan tenke " Jeg har laget nettsteder før, og det var lett, jeg trengte aldri noen CSS. "Og det er sant. Du trenger ikke CSS til å gjøre et flott og funksjonelt nettsted, men sjansen er bra at nettstedet ditt kunne vært mindre, renere, mer konsistent og bedre, hadde du valgt CSS fra starten. I dag skal vi vise deg veldig grunnleggende om hva CSS kan gjøre. Denne veiledningen vil ikke bringe deg fra en nybegynner til Award Winning Web Designer, men det vil hjelpe deg å forstå hvordan CSS fungerer, og hvordan det kan gi deg mye tid og krefter.

Raskt Overblikk

CSS (Cascading Style Sheet) er ment å gjøre en ting: administrere presentasjonen av nettstedet ditt. Dette kan høres enkelt, men husk det når vi fortsetter. En viktig ting å ta bort fra det faktum er at presentasjonen ikke er jobben til HTML. HTML definerer strukturen på siden din (hva er en topptekst, hva er en bunntekst, etc). CSS tar den strukturen og gjør alt arbeidet med hvordan strukturen presenteres .

Feil vei

For å gi deg en ide om hva CSS er ment å fikse, ta en titt på denne HTML-koden:

 Min hjemmeside 
Største nettsted er for tiden under utvikling.


Aliens har invadert også.


Hvilket dukker opp i nettleseren din som noe slikt:

Det er en rekke potensielle problemer her. For det første plasserer det skrift- og fargedata hver gang en ny overskrift eller et avsnitt trekkes. Hvert nytt element på nettstedet vil trenge identiske skrift- og fargedefinisjoner, selv om de er de samme for hvert overskrift og avsnitt. Dette beløper seg til masse bortkastet båndbredde hvis du har mange oppføringer.

Neste er problemet med skalerbarhet. Hvis du har 100 oppføringer på denne nyhetssiden, og du bestemmer at overskriftene skal være røde, har du mye arbeid foran deg for å endre hver overskriftskode for å vise den nye fargen.

Tredje, og dette er et spørsmål om "riktig prosedyre", inneholder denne siden flere elementer som er "presentasjonelle", ikke "strukturelle". Skrifttypene, fargene og linebreak-kodene er alle relatert til hvordan siden presenteres og har ingenting å gjøre med strukturen på siden. HTML er dårlig egnet til presentasjon, den jobben er best igjen til CSS, som vi vil vise nedenfor.

Design med CSS

Så hvordan kan vi fjerne alle de ekstra kodene? Hvordan kan vi redusere sidestørrelsen mens du holder våre farger og layout? Vel, bilde du kan definere på et enkelt sted, hva ALLE overskriftene dine skal se ut (si, stor grønn tekst). Da trenger du ikke å definere fargen for hver unike overskrift. Det samme gjelder for avsnittene. Hvis du vil at alle avsnittet tekst skal være blått, må du bare sette det som en CSS-regel for "p" -taggen. Alle ytterligere avsnitt vil ha blå tekst, uten at du må spesifisere det hver gang.

CSS er best lært av eksempel. La oss starte med å definere nøyaktig reglene beskrevet ovenfor - alle overskrifter skal være grønne og alle avsnitt skal være blå. Ved hjelp av tekstredigeringsprogrammet du ønsker, start en ny fil med navnet style.css og legg til følgende tekst:

 h1 {farge: grønn;} p {farge: blå;}

Dette definerer alle h1- koder som å ha grønn tekst, og alle p- koder har blå tekst.

Alt vi trenger å gjøre nå, er å koble den til HTML-koden med koblingsmerket, og fjern deretter alle de ubrukelige skrifttypene fra HTML-koden. Når det er ferdig, bør det se slik ut:

 Min hjemmeside 
Største nettsted er for tiden under utvikling.
Aliens har invadert også.

Ganske litt renere, va? Vi har allerede redusert den totale størrelsen på nettstedet vårt, og det var med bare 2 oppføringer i vår "blogg".

CSS for layout

Visst, det kan gjøre skrifter konsistente, men det alene er absolutt ikke nok til å gjøre CSS det komplette verktøyet for nettsidepresentasjon. For å gjøre det må det kunne påvirke utformingen av nettstedet ditt, og gir deg kontroll over ikke bare hvordan ting ser ut, men hvor de går. Den fullstendige kraften til CSS over nettstedoppsett er langt utenfor omfanget av denne veiledningen, så vi vil introdusere konseptet gjennom et enkelt felles scenario - en navigasjons sidebar.

Å lage noe som dette er utrolig enkelt i CSS. Gå tilbake til din style.css-fil og legg til følgende seksjon:

 #sidebar {width: 100px; høyde: 200px; border-style: solid; float: venstre; margin-right: 15px; }

Legg merke til # i begynnelsen av navnet på sidebjelken . Kort sagt - dette forteller CSS at vi jobber med et nytt unikt varenavn som vi har laget, i motsetning til en innebygd tag som h1 eller p . Den lange forklaringen innebærer forskjellen mellom et id og en klasse, og er forklart i detalj her.

Du bør kunne se flere viktige biter her. Først opprettet vi en ny ID som heter sidebar, ga den en bestemt høyde og bredde, en solid ramme, og angav at den skulle ha en 15px margin på høyre side. Vi har fortalt det å flyte på venstre side av skjermen, med andre sideelementer (som teksten) som flyter rundt den. Du kan aktivere dette elementet ved å legge til en sidefelt- kode i kroppen til HTML-en din, noe som dette.

  • Punkt 1
  • Punkt 2
  • Punkt 3

Og nå når du åpner siden din, er det din nye sidebar!

Konklusjon

Klart har vi bare begynt å klø på overflaten av CSSs evner, men forhåpentligvis bør det være klart at disse grunnleggende prinsippene kan brukes til mye mer enn det vi har gjort her. Tekstmanipulasjonene kan brukes til å formatere tekst på utallige måter, og ved å endre sidebarekonseptet kan du opprette uendelige variasjoner av nettstedslayout. For videre studier anbefaler denne forfatteren CSS-delen av W3Schools.com.

Bildekreditt: geirarne