Išoriniai stiliaus failai yra geriausias būdas, kai stiliai yra taikomi visam puslapiui. Su vienu išoriniu failu galime pakeisti visą puslapio išvaizdą. Kiekvienas HTML dokumentas, kurio stilių aprašome, turi būti susietas su CSS stiliaus failu. Tai galime padaryti su žyme <link>. <link> žymė yra rašoma <head>head> žymės viduje:
Paaiškinimas: Naršyklė kraudama puslapį stiliaus taisykles paims iš stilių failo stiliai.css ir pagal jame esančias taisykles pakeis dokumento išvaizdą.
Išorinio stiliaus dokumentą galima sukurti su bet kokiu paprastu teksto redaktoriumi arba specialiai šiai užduočiai pritaikyta programine įranga, tokia kaip Adobe Dreamweaver ar nemokama NetBeans. Stilius taisyklių faile negali būti kokių nors HTML žymių, tik CSS taisyklių aprašai. Stiliaus failai saugomi su *.css plėtiniu. Stiliaus failo vidaus pavyzdys:
1 |
@charset "utf-8"; |
Pastaba: Nepalikite tarpų tarp savybės reikšmės ir vienetų! Jeigu naudosite "margin: 4 px;" vietoj "margin: 4px;" tai suveiks tik senoje IE6 naršyklėje, daugumoje kitų - ne.
Vidinės stiliaus taisyklės turi būti naudojamos, kai vienas kuris nors dokumentas turi unikalų stilių, tada CSS aprašus galima įterpti į <head> dalį naudojant HTML žymę <style>:
Pastaba: Naršyklės ignoruoja joms nežinomas html žymes, todėl tikrai senos naršyklės stilių nepalaiko. Vietoje to, kad pritaikytų stilius, jos atvaizduos taisykles į vartotojo langą, kaip paprastą tekstą. Ši problema turi labai paprastą sprendimą, reikia tiesiog uždėti HTML komentaro simboliką aplink stilių aprašus:
Šis stiliaus rašymo būdas panaikina pagrindinį CSS failų pliusą. Taip aprašynėti stilius patariama kuo rečiau, nes HTML kodas tampa sunkiai skaitomas, jei reikia kanors pakeisti reikia žiūrėti kiekvieną elementą atskirai, jei kas sugenda, vėlgi sudėtinga būna atrasti savo paliktą klaidą, taip pat kai norime sukurti keletą skirtingų puslapio temų, tai tampa nebeįmanoma.
Čia pavyzdys, kaip galima įterpti CSS stilius tiesiai į HTML žymės vidų pasinaudojant atributu style. Jame gali būti bet kokie CSS aprašai.
1 |
<p style="color: #ccc; margin-left: 20px"> |
Jeigu tam pačiam html elementui buvo nurodyti skirtingi stiliai skirtingose aprašuose, reikšmės bus paveldimos iš svarbesnių aprašų. Pavyzdžiui žymei <h3> turime aprašus tiek išoriniam faile:
1 |
h3 { |
Taip pat, tam pačiam html elementui h3, yra stiliau aprašų viduje html dokumento per žymę <style>:
Ir galiausiai dar viena taisyklė viduje h3 elemeto per atributą style:
Galiausiai <h3> elementui bus priskirtos tokios taisyklės:
Pirmiausia priskirs taisykles iš išorinio failo:
teksto spalva - raudona, teksto lygiavimas - iš kairės ir šrifto dydis - 8pt.
Sekančios eina taisyklės iš <style> elemento:
teksto spalva pakeičiama iš raudonos į juodą, šrifto dydis jau nebe 8pt dydžio, bet 10pt. Tekstas kolkas lygiuojamas iš kairės.
Paskutinės yra perskaitomos vidinės elemento stiliaus taisyklės iš atributo style:
teksto spalva lieka juoda, teksto rikiavimas pakeičiamas iš kairės į dešinę ir šrifto dydis iš 10pt dydžio į 11pt.