Kiekvienas iš šių būdų yra geras ir teisingas, tačiau reiktų žinoti kaip stilių taisyklės yra pridedamos html elementams, kokia viso šio proceso tvarka ir kas po ko seka.
Kiekviena naršyklė turi savo vidinius stilių aprašus, todėl jei sukursime puslapį tik su su html kalba, nebūtinai jis atrodys identiškai visose naršyklėse. Kai kurios naršyklės turi padding nustatyma 8px <body> elementui, todėl puslapis yra atitraukiamas nuo viršaus.
Taisyklių būna nurodyta daugiau. Yra nustatyta kokiu šriftu bus atvaizduojamas tekstas, kokia spalva, kokio dydžio ir t.t.
Kai naršyklė krauna puslapį, visų pirma yra įkeliamas html kodas, vėliau pritaikomos pačios naršyklės taisyklės, tada ieškoma išorinių stiliaus failų ir sukeliamos juose esančios taisyklės, baigus - pritaikomos vidinės html dokumente esančios taisyklės, kurios rašomos į <style type="text/css"> žymę. Galiausiai yra pritaikomos taisyklės esančios viduje html elementų style atributuose.
Apibendrinus tvarka yra tokia:
Turime html elementą div. Priskirsime jam skirtingus css stilius ir žiūrėsim kokį gauname rezultatą. Pavyzdį sudaro trys dalys, kiekvienoje papildysime html kodą, paliekant prieš tai buvusį.
HTML kodas:
Kaip matome iš 3 eilutės, yra įtrauktas css failas pavadinimu stiliai.css, šio failo vidus yra:
1 |
div { |
Tokiame puslapyje matysime div blokelį - 235 pikselių pločio su pilkos spalvos fonu (#ccc) ir juodu pasviru tekstu viduje.
Papildome html kodą su <style> žyme:
1 |
<html> |
Failo stiliai.css turinio nekeičiame, jis išlieka koks buvo:
1 |
div { |
Taigi dabar naršyklė pritaikė vidinius naršyklės stilius, tada išorinio failo stilius ir rado vidinių stilių, todėl pritaikė ir juos. Vidiniuose stiliuose dubliavosi taisyklės, nes buvo aprašytas tas pats div elementas, tik jau priskirtos kitokios reikšmės tiems patiems css parametrams. Kadangi vidinės taisyklės reikšmės buvo kraunamos galiausiai, tai jos ir liko užkrovus puslapį.
Taigi dabar turime div elementą, kaip ir buvo - pilką spalvą jo fone, jis taip pat lieka 235px pločio, tačiau jo tekstas jau nebe pasviras, o paprastas ir jis tapo 100 pikselių aukščio, bei jo pozicija yra lygiuojama horizontaliai per centrą.
HTML failą praplėsime naujomis css taisyklėmis. Šį kartą viduje div elemento.
1 |
<html> |
CSS stiliaus failas stiliai.css išlieka toks pats:
1 |
div { |
Taigi naršyklė užkrauna html kodą, tada savo vidinius stilius, tada išorinius, vidinius iš žymos <style> ir tada dar vidinius tiesiai iš html elemento atributo style.
Rezultata matome tokį: div elementas, per vidurį horizontaliai, pilkas fonas, šriftas vėl tampa pasviręs ir dar aplink elementą prisideda rėmelis - 10 pikselių storio, vientisas ir beveik juodos spalvos - #333.