Kaskádové štýly poskytujú mechanizmus pre pridanie štýlu webových stránok a oddelenie prezentačnej stránky sémantiku od obsah stránky . CSS bol pôvodne vyvinutý k riešeniu problémov zavedenej zahrnutím informácií štýl v HTML tagy , prax , ktorá viedla k nekontrolovateľnému a drahé HTML kód . Štýlov poskytnúť vývojárom možnosť štýl vzhľad webových stránok konzistentným a rozšíriteľné spôsobom pri rezervácii HTML tagy pre popis obsahu samotného . Veci , ktoré budete potrebovať klipart textový editor
webového prehliadača
Zobraziť ďalšie pokyny
Ako formátovať webové stránky pomocou externého štýlov
1

Otvorte texte editor a vytvorte nový súbor . Názov súboru myStylesheet.css .
2

Upraviť myStylesheet.css . Pridať štýl do súboru , ktorý farby "

" značky používané v ľubovoľnej webovej stránky , ktorá odkazuje myStylesheet.css červená . Uložte a zatvorte myStylesheet.css

p

{

color : red ;

} .
3

Vráťte sa do textového editora a vytvorte nový súbor . Názov súboru useExternal.html a uložte ho na rovnakom mieste ako myStylesheet.css .
4

Upraviť useExternal.html . Pridať nejaký HTML súbor , ktorý obsahuje otvorenú HTML " " tag , HTML " " tag otvorené , v blízkosti HTML " < /head > " tag , open HTML " " tag , v blízkosti HTML " < /body > " tag a blízky HTML " < /html > "
5

Pokračujte v úpravách useExternal.html . Pridať odkaz na myStylesheet.css v sekcii " " súboru . Nastavte " href " hodnotu " myStylesheet.css " , " rel " hodnota " text /stylesheet " a " typ " hodnotu " text /css " .

< /head >

< /body >

< /html >
6

Pokračujte v úpravách useExternal.html . Pridajte HTML "

" záhlavie tag súboru v sekcii " " , nastaviť záhlavie textom " Text hlavičky " a zatvorte " < /h1 > " tagov .

< /head >

Header Text < /h1 >

< /body >

< /html >
7

Pokračujte v úpravách useExternal.html . Pridajte HTML "

" odsek tag v súbore po "

" tag , nastavte odstavcový text na " odsek Text " a zatvorte " < /p > " tag . Uložte a zatvorte useExternal.html .

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

< /head >

Header Text < /h1 >

Odsek Text < /p >

< /body >

< /html >
8

Otvoriť useExternal.html vo webovom prehliadači . Skontrolujte, či je text umiestnený vo vnútri "

" a " < /p > " značky sa červenou farbou .
Ako formátovať webové stránky Použitie Vnútorná štýlov klipart
9

Otvorte textový editor a vytvorte nový súbor s názvom useInternal.html . Pridať nejaký HTML súbor , ktorý obsahuje otvorenú HTML " " tag , HTML " " tag otvorené , v blízkosti HTML " < /head > " tag , open HTML " " tag , v blízkosti HTML " < /body > " tag , a blízky HTML " < /html > "
10

Pokračujte v úpravách useInternal.html . Pridať štýl medzi " " a " < /head > " značky , ktoré farby akýkoľvek text , ktorý používa "

" tag modrej .

< štýl
11

Pokračujte v úpravách useInternal.html . Pridajte HTML "

" záhlavie značku k " " časti súboru a nastaviť text hlavičky " Text hlavičky " . Zatvorte značku " < /h1 > " .

< Štýl Text < /h1 >

< /body >

< /html >
12

Pokračujte v úpravách useInternal.html . Pridajte HTML "

" odsek tag v súbore po "

" tagu a nastavte odstavcový text na " odsek Text " . Zatvorte " < /p > " značku a uložte a zatvorte useInternal.html .

< Štýl Text < /h1 >

Odsek Text < /p >

< /body >

< /html >
13

Otvoriť useInternal.html vo webovom prehliadači . Skontrolujte, či je text umiestnený vo vnútri "

" a " < /p > " tagy sú vyvedené v modrej farbe .
Ako formátovať webové stránky Použitie inline štýlov

14

Otvorte textový editor a vytvorte nový súbor s názvom useInline.html . Pridať nejaký HTML súbor , ktorý obsahuje otvorenú HTML " " tag , HTML " " tag otvorené , v blízkosti HTML " < /head > " tag , open HTML " " tag , v blízkosti HTML " < /body > " tag , a blízky HTML " < /html > "
15

Pokračujte v úpravách useInline.html . Pridajte HTML "

" záhlavie tag v " " časti súboru , nastaviť záhlavie textom " Text hlavičky " a zatvorte " < /h1 > " tagov .

< /head >

Header Text < /h1 >

< /body >

< /html >
16

Pokračujte v úpravách useInline.html . Pridajte HTML "

" odsek tag v súbore po "

" tag , nastavte odstavcový text na " odsek Text " a zavrieť "

" tag .

< /head >

Header Text < /h1 >

Odsek Text < /p >

< /body >

< /html >
17

Pokračujte v úpravách useInline.html . Upravte "

" bod značku a pridať parameter " štýl " , že farby ľubovoľný text , ktorý používa "

" značky zelene .

< ; head > < /head >

Header Text < /h1 >

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

< /body >

< /html >
18

Otvoriť useInline.html vo webovom prehliadači . Skontrolujte, či je text umiestnený vo vnútri "

" a " < /p > " značky je v zelenej farbe .

• Predchádzajúca strana: Ako Zavediete počítače 
• Ďalšia strana: Ako triediť pomocou rozbaľovacieho zoznamu