Et Cascading Style Sheet (CSS) er et system for nettstedskoding som lar designere manipulere flere funksjoner samtidig ved å tilordne bestemte elementer til grupper. For eksempel, ved å bruke en kode for nettstedets bakgrunn, kan designere endre bakgrunnsfargen eller bildet på alle sidene på nettstedet med en endring i CSS -filen. Slik lager du CSS for et grunnleggende nettsted.
Trinn
Del 1 av 4: Skrive innebygd CSS
Trinn 1. Sørg for at du har en grunnleggende forståelse av HTML -koder
Du bør vite hvordan tagger fungerer og om
src
og
href
egenskaper.
Trinn 2. Lær noen av de grunnleggende CSS -egenskapene
Du vil oppdage at det er veldig mange eiendommer. Det er imidlertid ikke nødvendig å lære dem alle.
-
Noen gode grunnleggende CSS -egenskaper å vite er
farge
og
font-familie
- .
Trinn 3. Lær om verdier for hver respektive eiendom
Alle eiendommer trenger en verdi. For
farge
eiendom, for eksempel, kan du sette
rød
verdi.
Trinn 4. Lær om
stil
HTML -attributt.
Den brukes i et element som
href
eller
src
. For å bruke det, settes anførselstegnene etter likhetstegnet CSS -attributtet, et kolon og deretter verdien av eiendommen. Dette er kjent som en CSS -regel.
Trinn 5. Forstå at innebygd CSS vanligvis ikke brukes for nettsteder av profesjonelle webutviklere
Inline CSS kan legge til unødvendig rot i et HTML -dokument. Det er imidlertid en fin måte å bli introdusert for hvordan CSS fungerer.
Del 2 av 4: Skrive grunnleggende CSS
Trinn 1. Start programmet du ønsker å bruke
Det bør tillate deg å lage HTML- og CSS -filer.
Hvis du ikke har et spesialprogram installert, kan du bruke Notisblokk eller et annet tekstredigeringsprogram. Bare lagre filen både som en tekstfil og en CSS -fil
Trinn 2. Åpne HTML -filen for nettstedet ditt
Du bør også åpne dette med en HTML -editor hvis du har en installert.
HTML -redaktører lar deg redigere HTML og CSS samtidig
Trinn 3. Lag en tag i HTML -hodet
Dette lar deg skrive CSS uten at du trenger en egen fil.
Trinn 4. Velg et element du vil legge til styling i, og skriv inn navnet på elementet etterfulgt av et sett med krøllete seler ({})
For å gjøre koden mer leselig, legg alltid den andre krøllbøylen på sin egen linje.
Trinn 5. Mellom selene skriver du inn CSS -reglene som du ville gjort med
stil
Egenskap.
Hver linje må slutte med et semikolon (;). For å gjøre koden leselig, bør hver regel starte på sin egen linje, og hver linje skal være innrykket.
Det er veldig viktig å merke seg at denne stylingen vil påvirke alle elementene i den valgte typen på siden. Mer spesifikk styling vil bli dekket i neste avsnitt
Del 3 av 4: Mer avansert CSS
Trinn 1. Lag en CSS -fil, ikke en HTML -fil, og lagre den ved hjelp av
.css
Utvidelse.
Åpne HTML -filen din også.
Trinn 2. Lag en tag i HTML -hodet
Dette lar deg koble en egen CSS -fil til HTML -dokumentet. Link -taggen din trenger tre attributter:
rel
type
og
href
-
rel
betyr "forhold" og forteller nettleseren hva forholdet er til HTML -dokumentet. Her skal den ha en verdi på
"stilark"
- .
-
type
forteller hvilken type medier det er knyttet til. Her skal den ha en verdi på
"tekst/css"
-
href
- her brukes på samme måte som hvordan den brukes i et element, men her må den lenke til en CSS -fil. Hvis CSS -filen ligger i samme mappe som HTML -filen, trenger bare filnavnet skrives innenfor anførselstegnene.
Trinn 3. Velg elementer av forskjellige typer du vil legge den samme stylingen til
Legg til en
klasse
attributt til disse elementene og sett dem lik et klassens navn du ønsker. Dette vil gi elementene dine samme styling.
Trinn 4. Tilordne hvilken styling en klasse vil motta
Skriv inn klassenavnet i CSS -filen med et punktum (.) Foran det (dvs.
.klasse
).
Trinn 5. Velg enkeltelementer du vil legge til spesiell styling i, og legg til en
id
Egenskap.
Id -er opprettes i CSS ved å bruke et pund -symbol (#) i stedet for en periode.
Id -er er mer spesifikke enn klasser, så en ID vil overstyre enhver klassestyling hvis den har et attributt med en annen verdi enn klassen
Del 4 av 4: Lær mer
Trinn 1. Besøk w3 -skolene
Det er et offisielt nettsted rettet mot å lære ferdigheter i webutvikling. W3 har mange referanser oppført for HTML og CSS, i tillegg til andre nettspråk.
Trinn 2. Finn andre nettsteder som er spesielt rettet mot å lære og undervise i HTML og CSS
Nettsteder som CSS tricks.com er spesielt rettet mot å lære ferdigheter i CSS og webdesign. Å finne anerkjente kilder vil hjelpe deg på læringsreisen.
Trinn 3. Ta kontakt med webdesignere og utviklere
Deres erfaring og kunnskap kan lære deg verdifull kunnskap og ferdigheter.
Trinn 4. Se kildekoden til nettsteder du støter på
Ved å se CSS for velutviklede nettsteder kan du vise måter å designe deler av nettsteder på. Å kopiere den som praksis og fikle med koden kan hjelpe deg med å lære hvordan du bruker forskjellige CSS -attributter.