CSS er de viktigste vekstwebbene som har blitt sett i det siste tiåret, og det banet vei for adskillelse av stil og innhold. På den moderne måten definerer XHTML semantisk Hva Semantisk Markup er og hvordan det vil forandre Internett for alltid [Teknologi forklart] Hva Semantisk Markup er og hvordan det vil forandre Internett for alltid [Teknologi forklart] Les mer struktur - Betydningen og innholdet av nettsiden, mens CSS omhandler seg med presentasjonen. Mens de fleste av oss er komfortable å skrive litt HTML, ser vi ut til å tro at CSS er en slags svart magi. Jeg håper å endre det med disse 5 baby-trinnene til å bli en CSS-trollmann.

Denne artikkelen er rettet mot brukere som har svært lite erfaring med CSS ennå, men forhåpentligvis er det noe her for alle.

(1) grammatikk

Som et hvilket som helst språk har CSS en viss grammatikk til det, og det kan virke litt “datamaskin programmy” i begynnelsen, men det er egentlig bare en liste over ting. Alle CSS er skrevet slik:

SELECTOR PROPERTY: VALUE; EIENDOMSVERDI; EIENDOMSVERDI;

Som du kanskje allerede vet, fungerer CSS ved å bruke en stil til et valgt element i nettsiden. For eksempel, for å utforme hvordan alle koblingene dine vises, vil du bruke “en” som väljare. De forskjellige egenskapene og verdiene du vil lære med erfaring, men noen er enkle - ting som FARGE, GRENS, FONT-STØRRELSE, HØYDE er alle noen mulige egenskaper, hvis verdier kan være røde, 14pt, 150%, 1000px - det er egentlig det lett. La oss se hvordan vi ville gå om styling alle koblingene røde:

en farge: rød;

Du kan også bruke samme blokk med CSS til å gjøre mer enn én type element samtidig med kommaer:

a, h2, h3 farge: rød;

Dette gjør ikke bare alle koblingene, men også alle h2 og h3 overskriftene, i samme røde farge. Legg merke til at de alle kan være forskjellige størrelser, da dette bestemte kodeblokken ENDELIG endrer fargen.

(2) Klasse- og ID-seleksjoner

Noen ganger vil du ikke stil ALLE elementene på samme måte skjønt - og i slike tilfeller kan du bruke KLASSE eller ID. Som en generell regel brukes ID for engangselementer og brukes oftest til å definere store blokker av innhold eller enkelt spesielle knapper og slikt.

For eksempel kan du ha en stor DIV for HEADER, CONTENT og FOOTER-blokkene på siden din - så definere de som ID-er ville være et smart trekk. Klasser derimot brukes når stilelementer sannsynligvis blir gjentatt over hele siden. Kanskje du vil ha en rekke gjenstander som har avrundede hjørner med en 2px solid rød kant - i stedet for å skrive ut samme inline-stil en million ganger, ville du definere en klasse for den og legge klassen til elementene i stedet. Så hvordan definerer du disse IDene og klassene?

 
SIDEBAR
 

Hvis du vil målrette mot disse elementene i CSS, vil du bruke:

 .rødrundet // dette er en klasse grense-radius: 5px; border: 2px solid rød;  #sidebar ... // dette er en ID 

(3) Etterkommere

Du trenger ikke å legge klasser og IDer til alt i dokumentet ditt selv - du kan også bruke det vi kaller DESCENDANTS til å velge elementer. Se på denne CSS-setningen og se om du kan finne ut hva det gjør:

#sidebar h1 font-size: 20px;

Dette vil FIRST finne varen med en ID på “sidebar” Derefter vil det begrense valget til alle

s inneholdt i det, og bare bruke stilen til de.

Så, hvis du kan gruppere alle dine varer sammen, er det best å bruke etterkommere selektorer fordi det er enda mindre kode enn å legge til en haug med class =”” definisjoner til alt.

(4) Hvor å sette denne CSS?

Den beste måten å håndtere CSS er å skille den helt fra HTML-en din. Lag en fil som heter hva du liker .css, og legg bare til denne linjen i HTML-overskriften:

Du kan også legge til blokker med CSS til delen mellom merketegnene, men jeg foreslår ikke denne metoden da det resulterer i rotete og vanskelige å lese HTML-filer.

Det tredje stedet å legge til CSS er inline, men du bør også være forsiktig med det. Alt lagt til i linje slik:

vil automatisk overstyre alt som er definert i din egen stil. Så du kan sitte der og prøver å feilsøke i flere år, hvorfor miniatyrbildene dine ikke endres, og CSS-en kan være perfekt - men hvis IMG-elementet inneholder inline-stiler allerede, vil de ha prioritet. Hvordan vet du om noe annet påvirker det skjønt?

(5) Få FireBug, eller bruk Chrome

FireBug Amatørs Guide til å tilpasse Website Design med FireBug Amatør Guide til å tilpasse Website Design Med FireBug Read More er et fantastisk utviklingsverktøy som er spesielt nyttig for å finne ut hvordan CSS fungerer. Ta et øyeblikk for å laste det ned og se på det raskt. FireBug er tilgjengelig for Firefox som et plugin, eller hvis du bruker Chrome, er et identisk sett med funksjoner allerede innebygd. Når du har aktivert pluginet i Firefox eller bruker Chrome, kan du bare høyreklikke hvor som helst på siden og velge “Inspisér element“.

Dette åpner en ny rute nederst i nettleseren din. På venstre side er XHTML-visningen pent formatert og sammenleggbar. Hvis du svinger over et element, vil det markere elementet på siden og vise deg CSS-boksemodellen rundt det (vi snakker mer om boksemodellen i en fremtidig leksjon). Hovedpunktet her er at du også kan velge hvilket element som helst og se nøyaktig hvilken CSS som virker på den på høyre side, og det vil bryte dem ned i hvilke selektorer har forårsaket det. Alt lagt til i linje vil bli vist under “element.style” overskrift. Prøv det nå på denne siden. Legg merke til at svært ofte CSS listet til høyre er krysset ut med en sentral linje - dette betyr at en annen velger som jobber med det elementet har prioritet og er overordnet det som krysset ut.

Det er det for i dag, men vær gjerne om å legge igjen kommentarer hvis du tror jeg har savnet noen grunnleggende nøkkelbegynnerpoeng, eller hvis du har noen spesifikke spørsmål eller problemer med CSS, så spør deg bort i teknisk support-delen av nettstedet vårt. Neste gang vil jeg gjerne utvikle din kunnskap om CSS utover grunnleggende farge- og størrelsesendringer.

Utforsk mer om: HTML, Programmering, Webdesign, Webutvikling.