HTML kalba atsako į klausimą Ką atvaizduoti?, tuo tarpu CSS - Kaip atvaizduoti?. Daugelis seniau naudojamų HTML žymių, kurios buvo skirtos stiliams nurodyti yra nebenaudojamos, nes jas pakeičia CSS stilių taisyklės.
CSS atsiradimas buvo didžiulis žingsnis internetinio dizaino kūrime, nes ši technologija leidžia apibrėžti stilių bet kokiam HTML elementui ir jį priskirti prie tiek puslapių, kiek norima. Jei norit pakeisti viso puslapio struktūrą užtenka pakoreguoti stiliaus failą ir visa puslapio išvaizda atsinaujins. Tai sutaupo daug laiko, kodas tampa lengviau redaguojamas, lengviau padaryti puslapio dizaino pakeitimus.
Naudojant išorinius CSS aprašus nesusidarko HTML kodas, todėl kodas tampa lengviau skaitomas. Paieškos sistemoms patinka tekstas, bet nepatinka kai puslapio didžiąją dalį sudaro kodas, o ne žmogui skaitomas tekstas, todėl reikėtų stengtis į patį puslapį nerašyti css taisyklių, o jas įtraukti pasinaudojant <link> žyme.
Stilių galima aprašyti:
Vienu metu gali būti naudojami visi būdai, taip pat galima naudoti kelis išorinius failus viename HTML dokumente.
Stiliai naršyklėje taikomi tokiais prioritetais:
Kitaip tariant, naršyklė kraudama puslapį pirmiausia pažiūri į naršyklės nustatymuose esančius stiliaus aprašymus, tada į išorinius failus, jei juose randa aprašus skirtus tam pačiam elementui, kaip kad buvo rasta pagal nutylėjimą, tai naudoja tuos, kuriuos rado išoriniuose failuose ir žiūri toliau, ar yra kokių nors HTML elemento <style> taisyklių, jei yra - naudoja juos. Galiausiai yra patikrinami kiekvieno elemento atributai, jie yra paskutiniai, kurie gali pakeisti prieš tai esančius aprašymus.
Sukuriame paragrafą su html žyme <p>
html failo kodas:
1 |
<p> |
Kaip matome kol kas nėra jokių stiliaus taisyklių, tik grynas html kodas. Tokiu būdu parašytą tekstą naršyklė atvaizduos pagal savo pačios parametrus. Tikėtina, kad tai bus Serif šrifto ir 16px dydžio tekstas.
Pridėkime išorinį stiliaus failą stiliai.css:
1 |
p { |
html failo vidus su įtrauktu stiliaus failu:
1 |
<html> |
Dabar naršyklė atvaizduos tą patį paragrafą, tačiau jame esančio tekstas bus Verdana šrifto, jei vartotojo kompiuteryje nebus Verdana šrifto, tada jam rodys Geneva šriftu, jei ir jo neturės - tada sans-serif. Tekstas - 14 pikselių dydžio, pasviręs, pajuodintas ir raudonos spalvos.
Dabar html faile įterpsim <style> žymę ir padubliuosime keletą taisyklių:
Paliksime tą patį stilių failą stiliai.css:
1 |
p { |
html failo vidų pakeisime įtraukiant <style> žymę:
Dabar naršyklė atvaizduos paragrafą su tekstu, kurio tekstas bus Verdana šrifto, jei vartotojo kompiuteryje nebus Verdana šrifto, tada jam rodys Geneva šriftu, jei ir jo neturės - tada sans-serif. Tekstas jau bus 12 pikselių dydžio, nepasviręs, nepajuodintas ir raudonos spalvos. Kaip matote iš pradžių buvo pritaikytos išorinio failo taisyklės, paskui <style> žymoje esančios.
Pabaigai dar įterpsime style parametrą į žymę <p>
Stilių failas išlieka toks pats:
1 |
p { |
html failą papildome atributu style:
Dabar naršyklė atvaizduos paragrafą su tekstu, kurio tekstas bus Verdana šrifto, jei vartotojo kompiuteryje nebus Verdana šrifto, tada jam rodys Geneva šriftu, jei ir jo neturės - tada sans-serif. Tekstas bus 12 pikselių dydžio, pasviręs, nepajuodintas ir žalios spalvos.
Iš šių pavyzdžių sekos suprantame, kad iš pradžių tekstas buvo nepasviręs, kol nepridėjome css taisyklių, pridėjus jas išoriniame faile tekstas tapo pasviręs, jas antrą kartą aprašius <style> žymoje gavome vėl nepasvirusį, o galiausiai trečią kartą užrašius tą pačią taisyklę jau viduje <p> žymos gavome pasvirusį tekstą.
Taigi, kai jau supratote css kalbos pagrindines galimybes ir logiką, linkiu sėkmės mokantis toliau, jei kils klausimų galite rašyti konkrečios pamokos komentaruose arba paieškoti savo klausimo atsakymo forume atitinkamoje skitlyje.