Kas ir ārējā stila lapa?

Ārējā stila lapa nosaka, kā tīmekļa lapa izskatās. Jūs varat izmantot stila lapu, lai norādītu tādas lietas kā teksta lielums, krāsa un fonts, pogu krāsa vai izvēlņu un sānjoslu izvietojums.

Ārējā stila lapā izmantotais kods

Pamata tīmekļa lapas izveidošanai tiek izmantoti divu veidu kodi:

• HyperText iezīmēšanas valoda (HTML): Nosaka tīmekļa lapas saturu. Tajā ir faktiskais teksts ar uzcenojumu, kas identificē, vai teksta sadaļas ir rindkopas, virsraksti vai saraksti. Tas satur arī saites uz attēliem, kas parādās lapā, un hipersaites uz ārējām lapām.
• Kaskādes stila lapas (CSS): Kodēšanas valoda, ko izmanto, lai norādītu, kā saturs tiek parādīts. Tas nosaka, kā tiek parādīti katra veida teksta elementi, un tā paša veida elementus var parādīt atšķirīgi, ja tie pieder dažādām klasēm vai tiem ir atšķirīgs ID. Tas ļauj tādām lietām kā izvēlnes un saraksti tīmekļa lapas galvenajā tekstā izturēties ļoti atšķirīgi.

Kopumā stila nošķiršana no satura ir laba ideja, jo tā ļauj vienlaikus koncentrēties uz vienu lietu. Tas kļūst vēl svarīgāk komandā, ļaujot satura un noformējuma speciālistiem strādāt neatkarīgi no pārējiem. Varbūt vēl svarīgāk ir tas, ka tas ļauj vienoti lietot stila instrukciju kopumu visā vietnē.

Pēc tam vietnes vizuālo noformējumu var mainīt no vienas stila lapas, nerediģējot katru tīmekļa lapu atsevišķi. Lielākām sarežģītām vietnēm tekstu, izvēlņu un sadalījumu kontrolēšanai lappusēs var izmantot vairākas stila lapas. Šo stila lapu kolekciju var saukt par "tēmu".

Izmantojot ārēju CSS, lai saistītu HTML ar CSS

CSS stilu ir iespējams iekļaut tieši tīmekļa lapas HTML, izmantojot CSS, lai katru rindkopu un virsrakstu atšķirīgi veidotu. Šāda veida inline stils parasti nav laba ideja, jo jūs zaudējat visas priekšrocības, kas saistītas ar stila nošķiršanu no satura. Vissvarīgākais ir tas, ka jūs zaudējat iespēju konsekventi atjaunināt visu vietni no viena faila.

Pareizais veids, kā vietnei piemērot stilu, ir izveidot vienu ārējā stila lapas failu katram stila veidam, kuru vēlaties izmantot, pēc tam atsaukties uz šiem failiem no katra HTML faila. Piemēram, jums var būt šādas ārējās stila lapas:

• teksts.css
• izvēlnes.css
• izkārtojums.css

Jūs varat veikt izmaiņas CSS kodā šajās ārējās stila lapās, nemainot to failu nosaukumi, kas nozīmē atsauces uz šiem failiem visu jūsu tīmekļa lapu HTML kodā, nebūs mainīts.

HTML un CSS piemēri

Ļoti vienkāršā HTML lapā varētu būt šāds kods:

 Viss par mani!

Šī lapa ir par mani un kāpēc es esmu lieliska.

Vienkāršu ārējo stila lapu var saistīt ar šo lapu, pievienojot šādu kodu zem.

type = "text / css"
href = "myStyle.css" />

Izveidojiet citu teksta failu ar nosaukumu myStyle.css, kas atrodas tajā pašā mapē kā index.html un satur šādu kodu:

h1 {
krāsa: # FF7643;
fonta seja: Arial
}
p {
krāsa: sarkana;
fonta lielums: 1,5em;
}