Praneškite apie mus:


CSS hierarchija

0

CSS stiliai gali būti aprašyti trijose skirtingose vietose



  1. išoriniuose *.css failuose
  2. html dokumento <style type="text/css"> žymos viduje
  3. viduje html žymos atribute style

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.

Vidiniai naršyklių css stiliai

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.

Stilių priskyrimo tvarka

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:

  1. Įkeliamas html kodas
  2. Pritaikomos naršyklės vidinės taisyklės
  3. Pritaikomos išorinių *.css failų taisyklės
  4. Pritaikomos vidinės žymoje <style type="text/css"> esančios taisyklės
  5. Pritaikomos vidinės žymų atribute style esančios taisyklės

Pavyzdys

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į.

1 dalis

HTML kodas:

1
2
3
4
5
6
7
8
9
10
<html>
<head>
<link rel="stylesheet" type="text/css" href="stiliai.css" />
</head>
<body>

<div>Viduje div elemnto esantis tekstas</div>

</body>
</html>

Kaip matome iš 3 eilutės, yra įtrauktas css failas pavadinimu stiliai.css, šio failo vidus yra:

1
2
3
4
5
div {
width:235px;
background-color:#CCC;
font-style:italic;
}

Tokiame puslapyje matysime div blokelį - 235 pikselių pločio su pilkos spalvos fonu (#ccc) ir juodu pasviru tekstu viduje.

2 dalis

Papildome html kodą su <style> žyme:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<link rel="stylesheet" type="text/css" href="stiliai.css" />
<style type="text/css">
div {
font-style:none;
margin:0px auto;
height:100px;
}
</style>
</head>
<body>

<div>Viduje div elemnto esantis tekstas</div>

</body>
</html>

Failo stiliai.css turinio nekeičiame, jis išlieka koks buvo:

1
2
3
4
5
div {
width:235px;
background-color:#CCC;
font-style:italic;
}

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ą.

3 dalis

HTML failą praplėsime naujomis css taisyklėmis. Šį kartą viduje div elemento.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<link rel="stylesheet" type="text/css" href="stiliai.css" />
<style type="text/css">
div {
font-style:none;
margin:0px auto;
height:100px;
}
</style>
</head>
<body>

<div style="border:10px solid #333; font-style:italic;">
Viduje div elemnto esantis tekstas
</div>

</body>
</html>

CSS stiliaus failas stiliai.css išlieka toks pats:

1
2
3
4
5
div {
width:235px;
background-color:#CCC;
font-style:italic;
}

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.

Perskaityta: 3253 kartų

Lukas
Autorius: Lukas
El. paštas.: Šis el. pašto adresas yra apsaugotas nuo spam botų. Jum reikalingas įjungtas Javasctipt kad jį matytumėte
Manualai.lt tinklo autorius ir administratorius. VDU Energetikos Fizikos ir Verslo Informatikos studentas. LinkedIn
Raktažodžiai
pradmenys    css    hierarchija   
Patinka straipsnis?
dalintis Facebook
dalintis MySpace
Digg it
Komentarai

Komentarų nėra. Norėdami komentuoti turite prisijungti
CSS meniu
Naudingos nuorodos
Informacija ir viskas kas yra pateikta manualai.lt puslapiuose yra nemokama, tačiau, galite mus paremti per PayPal: