4 måter å lage CSS på

Innholdsfortegnelse:

4 måter å lage CSS på
4 måter å lage CSS på

Video: 4 måter å lage CSS på

Video: 4 måter å lage CSS på
Video: 3 РЕЦЕПТА из КУРИНОЙ ПЕЧЕНИ/ ПАШТЕТ!! ГОСТИ БУДУТ В ШОКЕ!! 2024, Mars
Anonim

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

Lag CSS trinn 1
Lag CSS trinn 1

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.

Lag CSS trinn 2
Lag CSS trinn 2

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

  • .
Lag CSS Trinn 3
Lag CSS Trinn 3

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.

Lag CSS trinn 4
Lag CSS trinn 4

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.

Lag CSS Trinn 5
Lag CSS Trinn 5

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

Lag CSS trinn 6
Lag CSS trinn 6

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

Lag CSS trinn 7
Lag CSS trinn 7

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

Lag CSS trinn 8
Lag CSS trinn 8

Trinn 3. Lag en tag i HTML -hodet

Dette lar deg skrive CSS uten at du trenger en egen fil.

Lag CSS trinn 9
Lag CSS trinn 9

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.

Lag CSS Trinn 10
Lag CSS Trinn 10

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

Lag CSS Trinn 11
Lag CSS Trinn 11

Trinn 1. Lag en CSS -fil, ikke en HTML -fil, og lagre den ved hjelp av

.css

Utvidelse.

Åpne HTML -filen din også.

Lag CSS Trinn 12
Lag CSS Trinn 12

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.
Lag CSS Trinn 13
Lag CSS Trinn 13

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.

Lag CSS Trinn 14
Lag CSS Trinn 14

Trinn 4. Tilordne hvilken styling en klasse vil motta

Skriv inn klassenavnet i CSS -filen med et punktum (.) Foran det (dvs.

.klasse

).

Lag CSS Trinn 15
Lag CSS Trinn 15

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

Lag CSS Trinn 16
Lag CSS Trinn 16

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.

Lag CSS Trinn 17
Lag CSS Trinn 17

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.

Lag CSS Trinn 18
Lag CSS Trinn 18

Trinn 3. Ta kontakt med webdesignere og utviklere

Deres erfaring og kunnskap kan lære deg verdifull kunnskap og ferdigheter.

Lag CSS Trinn 19
Lag CSS Trinn 19

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.

Video - Ved å bruke denne tjenesten kan noe informasjon bli delt med YouTube

Anbefalt: