Cascading Style Sheets gir en mekanisme for å legge stiler til websider og skille side presentasjon semantikk fra side innhold. CSS ble opprinnelig utviklet for å løse problemer introdusert av inkludering av stil informasjon i HTML-koder, en praksis som førte til uhåndterlig og dyre HTML -kode. Stilark gir utviklere muligheten til å style utseendet på nettsidene på en konsekvent og utvidbar måte mens reservere HTML koder for beskrivelse av selve innholdet. Du trenger
tekst editor
nettleser
Vis flere Instruksjoner
hvordan du formaterer websider ved hjelp av et eksternt stilark
en

Åpne en tekst redigeringsprogrammet, og opprett en ny fil . Navnet på filen myStylesheet.css .
2

Rediger myStylesheet.css . Legg en stil til filen som farger "

" koder brukes i alle websider som referanser myStylesheet.css rødt. Lagre og lukke myStylesheet.css

p

{

color: red ;

}
3

Tilbake til teksteditor , og opprette en ny fil . Gi filen navnet useExternal.html og lagre den på samme sted som myStylesheet.css .
4

Edit useExternal.html . Legg litt HTML til filen som inneholder en åpen HTML " " tag , en åpen HTML " " tag , en nær HTML " < /head> " tag , en åpen HTML " "tag , en nær HTML" < /body > "tag og en nær HTML" < /html > "
5

fortsette å redigere useExternal.html . Legg en link til myStylesheet.css i filens " "-delen . Sett " href " verdien til " myStylesheet.css ", den " rel " verdien til " text /stilsett " og "type" verdien til " text /css " .

< /head>

< /body >

< /html >
6

Fortsett å redigere useExternal.html . Legg en HTML " h1 " header koden til filen i " "-delen, satt overskriften til teksten " Topptekst " og lukk " < /h1 > " tag.
< p>

< p> < /head >

Header Text < /h1 >

< /body >

< /html >
7

Fortsett å redigere useExternal.html . Legg en HTML "

" paragrafen tag til filen etter "

" tag , sett avsnittstekst til "Avsnitt Tekst" og lukke " < /p > " tag. Lagre og lukk useExternal.html .

< /head >

Header Text < /h1 >

Avsnitt Tekst < /p >

< /body >

< /html >
8

Åpen useExternal.html i en nettleser . Kontroller at teksten plasseres på innsiden av "

" og " < /p > " tags er farget rødt.
Slik formaterer du en webside ved hjelp av en intern Style Sheet

9

Åpne en teksteditor og opprette en ny fil som heter useInternal.html . Legg litt HTML til filen som inneholder en åpen HTML " " tag , en åpen HTML " " tag , en nær HTML " < /head> " tag , en åpen HTML " "tag , en nær HTML" < /body > "tag , og en nær HTML" < /html > "
10

Fortsett å redigere useInternal.html . Legg en stil mellom " " og " " koder som farger all tekst som bruker "

" tag blå .

< p>

< stil Side 11

Fortsett å redigere useInternal.html . Legg en HTML " h1 " header tag til " "-delen av filen og sette header teksten til "Header Text" . Lukk " < /h1 > " tag.

< Stil Tekst < /h1 >

< /body >

< /html >
12

Fortsett å redigere useInternal.html . Legg en HTML "

" paragrafen tag til filen etter " h1 " tag og sett avsnittstekst til "Avsnitt Tekst". Lukk " < /p > " tag og lagre og lukke useInternal.html .

< Stil Tekst < /h1 >

Avsnitt Tekst < /p >

< /body >

< /html >
13

Åpen useInternal.html i en nettleser. Kontroller at teksten plasseres på innsiden av "

" og "

" tags er farget blå.
Slik formaterer du en webside ved hjelp av en Inline Style Sheet

14

Åpne en teksteditor og opprette en ny fil som heter useInline.html . Legg litt HTML til filen som inneholder en åpen HTML " " tag , en åpen HTML " " tag , en nær HTML " < /head> " tag , en åpen HTML " "tag , en nær HTML" < /body > "tag , og en nær HTML" < /html > "
15

Fortsett å redigere useInline.html . Legg en HTML " h1 " header tag i " "-delen av filen, satt overskriften til teksten " Topptekst " og lukk " < /h1 > " tag.
< p>

< /head >

Header Text < /h1 >

< /body >

< /html >
16

Fortsett å redigere useInline.html . Legg en HTML "

" paragrafen tag til filen etter "

" tag , sett avsnittstekst til "Avsnitt Tekst" og lukke "

" tag.

< /head >

Header Text < /h1 >
< p >

Avsnitt Tekst < /p >

< /body >

< /html >
17

Fortsett å redigere useInline.html . Redigere "

" paragrafen tag og legge til en "stil " parameter som farger eventuell tekst som bruker "

" tag grønt.

< ; head> < /head >

Header Text < /h1 >

< p style = "color: green ; "> Avsnitt Tekst < /p >

< /body >

< /html >
18

Åpen useInline.html i en nettleser. Kontroller at teksten plasseres på innsiden av "

" og " < /p> " tags er farget grønn .