CSS თვისებების მემკვიდრეობა

დავუშვათ, გვაქვს პარაგრაფი, და მასში რაღაც ტექსტი i თეგში:

<p>
	This is some <i>text</i> in paragraph.
</p>

მოდით, პარაგრაფებს წითელი ფერი მივანიჭოთ:

p {
	color: red;
}

შედეგად, წითელი ფერით შეიღებება არა მხოლოდ პარაგრაფის ტექსტი, არამედ i თეგის ტექსტიც:

საქმე იმაშია, რომ color თვისება მემკვიდრეობით მიიღება. ეს ნიშნავს, რომ თუ მშობელ თეგს აქვს რაიმე ფერი მინიჭებული, ეს ფერი მის შვილებსაც ექნებათ. ყველა CSS თვისება არ მემკვიდრეობით მიიღება, მაგრამ ბევრი მიიღება (მათ შორის ის, რაც თქვენ იცით - ყველა მემკვიდრეობით მიიღება).

სურვილის შემთხვევაში, შესაძლებელია მშობლის თვისების გადაფარება, შვილის სელექტორის მინიჭებით. მაგალითად, მივანიჭოთ პარაგრაფს წითელი ფერი, ხოლო კურსივს - ლურჯი:

<p>
	This is some <i>text</i> in paragraph.
</p>

p {
	color: red;
}
i {
	color: blue;
}

სელექტორების თანმიმდევრობას CSS კოდში ამ შემთხვევაში მნიშვნელობა არ აქვს. თუ i სელექტორი და p სელექტორი ადგილებს შევუცვლით, ყველაფერი ისევ იმუშავებს ასევე:

<p>
	This is some <i>text</i> in paragraph.
</p>

i {
	color: blue;
}
p {
	color: red;
}

კოდის შესწავლის შემდეგ, თქვით რა ფერი ექნება ტექსტს b თეგში:

<p>
	This is some <b>text</b> in paragraph.
</p>

p {
	color: blue;
}

კოდის შესწავლის შემდეგ, თქვით რა ფერი ექნება ტექსტს b თეგში:

<p>
	This is some <b>text</b> in paragraph.
</p>

p {
	color: blue;
}
b {
	color: red;
}

კოდის შესწავლის შემდეგ, თქვით რა ფერი ექნება ტექსტს b თეგში:

<p>
	This is some <b>text</b> in paragraph.
</p>

b {
	color: red;
}
p {
	color: blue;
}

კოდის შესწავლის შემდეგ, თქვით რა ფერი ექნება ტექსტს li თეგში:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul {
	color: blue;
}

კოდის შესწავლის შემდეგ, თქვით რა ფერი ექნება ტექსტს li თეგში:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul {
	color: blue;
}
li {
	color: red;
}

კოდის შესწავლის შემდეგ, თქვით რა ფერი ექნება ტექსტს 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;
}

კოდის შესწავლის შემდეგ, თქვით რა ზომა ექნება ტექსტს 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;
}