Trashëgimia e Vetive CSS
Le të themi se kemi një paragraf, dhe në të një
tekst në tagun i:
<p>
This is some <i>text</i> in paragraph.
</p>
Le t'i ngjyrosim paragrafët me ngjyrë të kuqe:
p {
color: red;
}
Si rezultat, jo vetëm teksti i paragrafit do të ngjyroset,
por edhe teksti i tagut i:
E gjitha ka të bëjë me faktin se vetia color
trashëgohet. Kjo do të thotë se nëse
tagu prind ka caktuar një ngjyrë të caktuar,
ata do të kenë të njëjtën ngjyrë edhe tek pasardhësit. Jo të gjitha
vetitë CSS trashëgohen, por shumë prej tyre (ato që
ju tashmë i njihni - të gjitha trashëgohen).
Sidoqoftë, nëse dëshironi, mund të rishkruani vetinë e prindit duke caktuar një përzgjedhës për pasardhësin. Për shembull, le t'i caktojmë paragrafit ngjyrën e kuqe dhe tekstit të pjerrët (italic) ngjyrën e kaltër:
<p>
This is some <i>text</i> in paragraph.
</p>
p {
color: red;
}
i {
color: blue;
}
:
Rendi i përzgjedhësve në kodin CSS në këtë rast
nuk ka rëndësi. Nëse ndërroni vendet
përzgjedhësit i dhe përzgjedhësin p, gjithçka do të funksionojë
në të njëjtën mënyrë:
<p>
This is some <i>text</i> in paragraph.
</p>
i {
color: blue;
}
p {
color: red;
}
:
Duke studiuar kodin, thuani se çfarë ngjyre do të ketë
teksti në tagun b:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
Duke studiuar kodin, thuani se çfarë ngjyre do të ketë
teksti në tagun b:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
b {
color: red;
}
Duke studiuar kodin, thuani se çfarë ngjyre do të ketë
teksti në tagun b:
<p>
This is some <b>text</b> in paragraph.
</p>
b {
color: red;
}
p {
color: blue;
}
Duke studiuar kodin, thuani se çfarë ngjyre do të ketë
teksti në tagun li:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
Duke studiuar kodin, thuani se çfarë ngjyre do të ketë
teksti në tagun li:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
Duke studiuar kodin, thuani se çfarë ngjyre do të ketë
teksti në tagun i:
<ul>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
i {
color: green;
}
Duke studiuar kodin, thuani se çfarë madhësie do të ketë
teksti në tagun i:
<ul>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
</ul>
i {
font-size: 30px;
}
ul {
font-size: 20px;
}
li {
color: red;
font-weight: bold;
}
