Et Cascading Style Sheet (CSS) er et system til webstedskodning, der giver designere mulighed for at manipulere flere funktioner på én gang ved at tildele bestemte elementer til grupper. For eksempel ved at bruge en kode til webstedets baggrund kan designere ændre baggrundsfarve eller billede på alle sider på webstedet med en ændring af CSS -filen. Sådan opretter du CSS til et grundlæggende websted.
Trin
Del 1 af 4: Skrivning af inline CSS
Trin 1. Vær sikker på at du har en grundlæggende forståelse af HTML -tags
Du bør vide, hvordan tags fungerer og om
src
og
href
egenskaber.
Trin 2. Lær nogle af de grundlæggende CSS -egenskaber
Du vil opdage, at der er rigtig mange ejendomme. Det er dog ikke nødvendigt at lære dem alle.
-
Nogle gode grundlæggende CSS -egenskaber at kende er
farve
og
skrifttype-familie
- .
Trin 3. Lær mere om værdier for hver respektive ejendom
Alle ejendomme har brug for en værdi. For
farve
ejendom, for eksempel, kan du sætte
rød
værdi.
Trin 4. Lær mere om
stil
HTML -attribut.
Det bruges inden for et element som
href
eller
src
. For at bruge det skal du inden for anførselstegnene efter lighedstegnet sætte CSS -attributten, et kolon og derefter værdien af ejendommen. Dette er kendt som en CSS -regel.
Trin 5. Forstå, at inline CSS normalt ikke bruges til websteder af professionelle webudviklere
Inline CSS kan tilføje unødvendig rod til et HTML -dokument. Det er dog en fantastisk måde at blive introduceret til, hvordan CSS fungerer.
Del 2 af 4: Skrivning af grundlæggende CSS
Trin 1. Start det program, du ønsker at bruge
Det skal give dig mulighed for at oprette HTML- og CSS -filer.
Hvis du ikke har et specielt program installeret, kan du bruge Notesblok eller en anden tekstredigerer. Gem blot din fil både som en tekstfil og en CSS -fil
Trin 2. Åbn HTML -filen til dit websted
Du bør også åbne dette med en HTML -editor, hvis du har en installeret.
HTML -redaktører giver dig mulighed for at redigere HTML og CSS på samme tid
Trin 3. Opret et tag i dit HTML -hoved
Dette lader dig skrive CSS uden behov for en separat fil.
Trin 4. Vælg et element, du vil tilføje styling til, og indtast elementets navn efterfulgt af et sæt krøllede seler ({})
For at gøre din kode mere læselig skal du altid sætte den anden krøllet bøjle på sin egen linje.
Trin 5. Mellem selerne indtaster du dine CSS -regler, som du ville bruge
stil
attribut.
Hver linje skal slutte med et semikolon (;). For at gøre din kode læselig, skal hver regel starte på sin egen linje, og hver linje skal være indrykket.
Det er meget vigtigt at bemærke, at denne styling vil påvirke alle elementer af den valgte type på siden. Mere specifik styling vil blive dækket i det næste afsnit
Del 3 af 4: Mere avanceret CSS
Trin 1. Opret en CSS -fil, ikke en HTML -fil, og gem den ved hjælp af
.css
udvidelse.
Åbn også din HTML -fil.
Trin 2. Opret et tag i dit HTML -hoved
Dette giver dig mulighed for at linke en separat CSS -fil til dit HTML -dokument. Dit linktag har brug for tre attributter:
rel
type
og
href
-
rel
betyder "relation" og fortæller browseren, hvad forholdet er til HTML -dokumentet. Her skal den have en værdi på
"stylesheet"
- .
-
type
fortæller, hvilken type medier der bliver linket til. Her skal den have en værdi på
"tekst/css"
-
href
- her bruges på samme måde som den bruges i et element, men her skal den linke til en CSS -fil. Hvis CSS -filen er placeret i den samme mappe som HTML -filen, skal filnavnet kun skrives inden for anførselstegnene.
Trin 3. Vælg elementer af forskellige typer, du vil tilføje den samme styling til
Tilføj en
klasse
attribut til disse elementer og sæt dem lig med et klassens navn efter eget valg. Dette vil give dine elementer den samme styling.
Trin 4. Tildel hvilken styling en klasse vil modtage
Skriv klassens navn i din CSS -fil med en periode (.) Forud for den (dvs.
. klasse
).
Trin 5. Vælg enkelte elementer, du vil tilføje speciel styling til, og tilføj en
id
attribut.
Id'er oprettes i CSS ved hjælp af et pund -symbol (#) i stedet for en periode.
Id'er er mere specifikke end klasser, så et id vil tilsidesætte enhver klassestyling, hvis den har en attribut med en anden værdi end klassen
Del 4 af 4: Lær mere
Trin 1. Besøg w3 -skolerne
Det er et officielt websted med det formål at undervise i webudviklingsevner. W3 har masser af referencer opført til HTML og CSS samt andre websprog.
Trin 2. Find andre websteder specifikt rettet mod at lære og undervise i HTML og CSS
Websteder som CSS tricks.com er specifikt rettet mod at undervise i CSS og webdesignfærdigheder. At finde velrenommerede kilder hjælper dig på din læringsrejse.
Trin 3. Kom i kontakt med webdesignere og udviklere
Deres erfaring og knowhow kan lære dig værdifuld viden og færdigheder.
Trin 4. Se kildekoden for websteder, du støder på
Visning af CSS for veludviklede websteder kan vise dig måder at designe dele af websteder på. Hvis du kopierer det ned som øvelse og pusler med koden, kan du lære at bruge forskellige CSS -attributter.
