CSS skapa en mekanism för att lägga till stilar till webbsidor och separera semantik sidpresentationer från sidans innehåll . CSS ursprungligen utvecklades för att lösa problem som infördes genom införandet av stil uppgifter i HTML-taggar , en praxis som ledde till ohanterliga och dyra HTML-kod . Stilmallar ger utvecklare möjlighet att utforma utseendet på webbsidor på ett konsekvent och utbyggbar sätt samtidigt förbehålla HTML-taggar för beskrivning av själva innehållet . Saker du behöver
Textredigerare
webbläsare
Visa fler instruktioner
hur du formaterar webbsidor med en extern formatmall
1

Öppna en text redigerare och skapa en ny fil . Döp filen myStylesheet.css .
2

Redigera myStylesheet.css . Lägg en stil till den fil som färgar "

" taggar används i någon webbsida som referenser myStylesheet.css rött . Spara och stäng myStylesheet.css

p

{

färg: röd ;

}
3

Tillbaka till textredigerare , och skapa en ny fil . Döp filen useExternal.html och spara den på samma plats som myStylesheet.css .
4

Redigera useExternal.html . Lägg till lite HTML till filen som innehåller ett öppet HTML " " tagg , en öppen HTML " " tagg , en nära HTML " < /head > " tagg , en öppen HTML " " tagg , en nära HTML " < /body> " taggen och en nära HTML " < /html > "
5

fortsätta redigera useExternal.html . Lägg till en länk till myStylesheet.css i filens " " avsnittet . Ställ in " href " värde " myStylesheet.css " , den " rel " värde " text /stylesheet " och " typ " värde " text /css " .

< /head >

< /body>

< /html >
6

Fortsätt redigera useExternal.html . Lägg till ett HTML "

" sidhuvudtagg till filen i " " sektionen , som rubriken till texten " Sidhuvud " och stäng " < /h1 > " taggen .

< /head >

Header Text < /h1 >

< /body>

< /html >
7

Fortsätt redigera useExternal.html . Lägg till ett HTML "

" stycke tagg till filen efter "

" taggen anger stycke text till " Punkt Text " och stäng " < /p > " taggen . Spara och stäng useExternal.html .

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

< /head >

Header text < /h1 >

Punkt Text < /p >

< /body>

< /html >
8

Open useExternal.html i en webbläsare . Kontrollera att texten placeras inuti "

" och " < /p > " taggar är färgad röd . Addera Hur du formaterar en webbsida med en intern
Style Sheet
9

Öppna en textredigerare och skapa en ny fil med namnet useInternal.html . Lägg till lite HTML till filen som innehåller ett öppet HTML " " tagg , en öppen HTML " " tagg , en nära HTML " < /head > " tagg , en öppen HTML " " tagg , en nära HTML " < /body> "tag , och en nära HTML " < /html > "
10

Fortsätt redigera useInternal.html . Lägg en stil mellan " " och " " taggar som färgar all text som använder "

" tagg blå .

< stil
11

Fortsätt redigera useInternal.html . Lägg till ett HTML "

" sidhuvudtagg till " " i filen och ange rubriken till " Sidhuvud " . Stäng " < /h1 > " taggen .

< Stil Text < /h1 >

< /body>

< /html >
12

Fortsätt redigera useInternal.html . Lägg till ett HTML "

" stycke tagg till filen efter "

" taggen och sätta punkt texten till " Punkt Text " . Stäng " < /p > " tag och sparar och stänger useInternal.html .

< Stil Text < /h1 >

Punkt Text < /p >

< /body>

< /html >
13

Open useInternal.html i en webbläsare . Kontrollera att texten placeras inuti "

" och "

" taggar är blåfärgad . Addera Hur du formaterar en webbsida med en Inline
Style Sheet
14

Öppna en textredigerare och skapa en ny fil med namnet useInline.html . Lägg till lite HTML till filen som innehåller ett öppet HTML " " tagg , en öppen HTML " " tagg , en nära HTML " < /head > " tagg , en öppen HTML " " tagg , en nära HTML " < /body> "tag , och en nära HTML " < /html > "
15

Fortsätt redigera useInline.html . Lägg till ett HTML "

" sidhuvudtagg i " " i filen , ställ in sidhuvudet och texten " Sidhuvud " och stäng " < /h1 > " taggen .

< /head >

Header Text < /h1 >

< /body>

< /html >
16

Fortsätt redigera useInline.html . Lägg till ett HTML "

" stycke tagg till filen efter "

" taggen anger stycke text till " Punkt Text " och stäng "

" tagg .

< /head >

Header Text < /h1 >

Punkt Text < /p >

< /body>

< /html >
17

Fortsätt redigera useInline.html . Redigera "

" stycke tagg och lägg till en " stil " parameter som färgar all text som använder "

" tagg grönt .

< , head > < /head >

Header Text < /h1 >

< p style = " color : green ; " > Punkt Text < /p >

< /body>

< /html >
18

Open useInline.html i en webbläsare . Kontrollera att texten placeras inuti "

" och " < /p> " taggar är grönfärgad .