Cascading style sheets giver en mekanisme til at tilføje stil til websider og adskillelse side præsentation semantik fra sidens indhold . CSS blev oprindeligt udviklet til at løse problemer indført ved inddragelse af stil information i HTML- tags, en praksis , der førte til ukontrollerbar og dyre HTML-kode. Style sheets give udviklere mulighed for at style udseendet af websider på en konsekvent og Extensible måde samtidig forbeholde HTML-tags til beskrivelse af selve indholdet. Ting du skal
Text editor en Web browser
Vis Flere Instruktioner
Sådan Formater websider Brug af et eksternt typografiark
1

Åbn en tekst editor og oprette en ny fil . Navngiv filen myStylesheet.css .
2

Rediger myStylesheet.css . Tilføj en stil til den fil, farver "

" tags bruges i enhver webside, referencer myStylesheet.css rødt. Gem og luk myStylesheet.css

p

{

color: red ;

}
3 < p . > Retur til tekst editor og oprette en ny fil. Navngiv filen useExternal.html og gemme den i den samme placering som myStylesheet.css .
4

Edit useExternal.html . Tilføj nogle HTML til den fil, der indeholder en åben HTML " " tag , en åben HTML " " tag , en nær HTML " " tag , en åben HTML " "tag , en nær HTML" "tag og en tæt HTML" < /html > "
5

fortsætte redigeringen useExternal.html . Tilføj et link til myStylesheet.css i filens " " sektionen. Sæt " href "-værdien til " myStylesheet.css ", den " rel " værdi til " text /stylesheet " og " type" værdi til " text /css " .

< /head > < br >

< /html >
6

Fortsæt redigeringen useExternal.html . Tilføj en HTML "

" header tag til filen i " " sektionen , skal du indstille header til teksten " Header Text" og luk "

" tag .
< p>

< p>

Header Text

< /body >

< /html >
7

Fortsæt redigeringen useExternal.html . Tilføj en HTML "

" stk tag til filen efter "

" tag , skal du indstille stykke tekst til "Afsnit Text" og luk "

" tag . Gem og luk useExternal.html .

< Link href = " myStylesheet.css " rel = " stylesheet " type = "text /css " >

< /head >

Header Text

Stk Text

< /body >

< /html >
8

Open useExternal.html i en webbrowser . Kontroller, at den tekst, placeret inde i "

" og "

" tags er farvet rødt .
Sådan formateres en webside ved hjælp af en intern Style Sheet
< br > 9

Åbn en teksteditor og oprette en ny fil med navnet useInternal.html . Tilføj nogle HTML til den fil, der indeholder en åben HTML " " tag , en åben HTML " " tag , en nær HTML " " tag , en åben HTML " "tag , en nær HTML" "tag , og en tæt HTML" < /html > "
10

Fortsæt redigeringen useInternal.html . Tilføj en stil mellem de " " og " " tags at farver enhver tekst, der bruger "

" tag blåt.

< p>

< style
11

Fortsæt redigeringen useInternal.html . Tilføj en HTML "

" header tag til " " i filen og sætte header tekst til " Header Text" . Luk "

" tag .

< Style Tekst < /h1 >

< /body >

< /html >
12

Fortsæt redigeringen useInternal.html . Tilføj en HTML "

" stk tag til filen efter "

" tag og sæt stykke tekst til "Afsnit tekst" . Luk "

" tag og gem og luk useInternal.html .

< Style Tekst < /h1 >

Stk Text

< /body >

< /html >
13

Open useInternal.html i en webbrowser . Kontroller, at den tekst, placeret inde i "

" og "

" tags er farvet blåt.
Sådan formateres en webside ved hjælp af en Inline Style Sheet
< br > 14

Åbn en teksteditor og oprette en ny fil med navnet useInline.html . Tilføj nogle HTML til den fil, der indeholder en åben HTML " " tag , en åben HTML " " tag , en nær HTML " " tag , en åben HTML " "tag , en nær HTML" "tag , og en tæt HTML" < /html > "
15

Fortsæt redigeringen useInline.html . Tilføj en HTML "

" header tag i " " i fil, indstille header til teksten " Header Text" og luk "

" tag .
< p>

Header Text

< /body >

< /html >
16

Fortsæt redigeringen useInline.html . Tilføj en HTML "

" stk tag til filen efter "

" tag , skal du indstille stykke tekst til "Afsnit Text" og luk "

" tag .

Header Text

< p >

Stk Text

< /body >

< /html >
17

Fortsæt redigeringen useInline.html . Rediger "

" stk tag og tilføje en "stil " parameteren , at farver enhver tekst , der bruger "

" tag grøn.

< , head>

Header Text

< p style = " color: green ; " > Afsnit Tekst

< /body >

< /html >
18

Open useInline.html i en webbrowser . Kontroller, at den tekst, placeret inde i "

" og "

" tags er farvet grøn.