Prihlásenie





Home Technológie CSS Nevýhody CSS CSS a dedičnosť
CSS a dedičnosť PDF Vytlačiť E-mail
Napísal Ján Šuňavec   
12.09.2010
CSS neumožňuje dedenie vlastností, priamo zápisom v CSS súbore. Napríklad: 
<div class='a'></div>
<div class='b'></div>

<style>
.a
{
   font-size:18px;
   position:relative;
   border:1px solid black;
   width:50px;
   height:50px;
   float:left;
}

.b
{
   font-size:18px;
   position:relative;
   border:1px solid red;
   width:50px;
   height:50px;
   float:right;
}
</style>

Vlastnosti “a” a “b” sú rovnaké až na príkaz „float“. Ak chceme efektívnejší zápis potom napíšeme. 
<div class='main'>
<div class='a'></div>
<div class='b'></div>
</div>

<style>
.main
{
    font-size:18px;
    position:relative;
    border:1px solid red;
    width:50px;
    height:50px;
}

.a
{
    foat:left; /* Float: left je východzia hodnota nemusí sa uvádzať*/
}

.b
{
    float:right;
}
</style>

Vytvorili sme triedu „.main“, ktorá sa stala akoby nadradená ostatným triedam. Avšak s CSS syntaxe to nezistíte. Ešte k tomu sme museli meniť HTML, čo sa nie vždy hodí. Druhe riešenie je trochu efektívnejšie. 
	
<div class='main a'></div>
<div class='main b'></div>

<style>
.main
{

    font-size:18px;
    position:relative;
    width:50px;
    height:50px;
    border:1px solid red;
}

.a
{
    float:left;
}

.b
{
    float:right;
}
</style>

Ani v tomto prípade nie je zo zápisu jasné že .main je rodič triedy “a” a “b”. Ak vás napadne nasledovný zápis: 
.main .a {
    float:left;
}

Tak to už značí niečo celkom iné. Jedine čo ostáva je napísať si do poznámky. 
.a
{ /* extends .main*/
    float:left;
}