Κληρονομικότητα Ιδιοτήτων CSS

Ας υποθέσουμε ότι έχουμε μια παράγραφο, και μέσα σε αυτήν κάποιο κείμενο στην ετικέτα i:

<p>
	Αυτό είναι λίγο <i>κείμενο</i> μέσα σε παράγραφο.
</p>

Ας βάψουμε τις παραγράφους με κόκκινο χρώμα:

p {
	color: red;
}

Ως αποτέλεσμα, δεν θα βαφτεί μόνο το κείμενο της παραγράφου, αλλά και το κείμενο της ετικέτας i:

Το όλο θέμα είναι ότι η ιδιότητα color κληρονομείται. Αυτό σημαίνει ότι εάν στη γονική ετικέτα έχει οριστεί κάποιο χρώμα, τότε αυτό το χρώμα θα έχουν και οι απόγονοι. Δεν κληρονομούνται όλες οι ιδιότητες CSS, αλλά πολλές (από αυτές που γνωρίζετε ήδη - όλες κληρονομούνται).

Εάν επιθυμείτε, ωστόσο, μπορείτε να παρακάμψετε μια ιδιότητα του γονέα, ορίζοντας έναν επιλογέα για τον απόγονο. Για παράδειγμα, ας ορίσουμε για την παράγραφο το κόκκινο χρώμα, και για την πλάγια γραφή - το γαλάζιο:

<p>
	Αυτό είναι λίγο <i>κείμενο</i> μέσα σε παράγραφο.
</p>

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

Η σειρά των επιλογέων στον κώδικα CSS σε αυτήν την περίπτωση δεν έχει σημασία. Εάν αντιστρέψετε τις θέσεις του επιλογέα i και του επιλογέα p, όλα θα λειτουργούν με τον ίδιο τρόπο:

<p>
	Αυτό είναι λίγο <i>κείμενο</i> μέσα σε παράγραφο.
</p>

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

Μελετώντας τον κώδικα, πείτε ποιο χρώμα θα έχει το κείμενο στην ετικέτα b:

<p>
	Αυτό είναι λίγο <b>κείμενο</b> μέσα σε παράγραφο.
</p>

p {
	color: blue;
}

Μελετώντας τον κώδικα, πείτε ποιο χρώμα θα έχει το κείμενο στην ετικέτα b:

<p>
	Αυτό είναι λίγο <b>κείμενο</b> μέσα σε παράγραφο.
</p>

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

Μελετώντας τον κώδικα, πείτε ποιο χρώμα θα έχει το κείμενο στην ετικέτα b:

<p>
	Αυτό είναι λίγο <b>κείμενο</b> μέσα σε παράγραφο.
</p>

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

Μελετώντας τον κώδικα, πείτε ποιο χρώμα θα έχει το κείμενο στην ετικέτα li:

<ul>
	<li>κείμενο</li>
	<li>κείμενο</li>
	<li>κείμενο</li>
</ul>

ul {
	color: blue;
}

Μελετώντας τον κώδικα, πείτε ποιο χρώμα θα έχει το κείμενο στην ετικέτα li:

<ul>
	<li>κείμενο</li>
	<li>κείμενο</li>
	<li>κείμενο</li>
</ul>

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

Μελετώντας τον κώδικα, πείτε ποιο χρώμα θα έχει το κείμενο στην ετικέτα i:

<ul>
	<li>κείμενο <i>πλάγιο</i> κείμενο</li>
	<li>κείμενο <i>πλάγιο</i> κείμενο</li>
	<li>κείμενο <i>πλάγιο</i> κείμενο</li>
</ul>

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

Μελετώντας τον κώδικα, πείτε ποιο μέγεθος θα έχει το κείμενο στην ετικέτα i:

<ul>
	<li>κείμενο <i>πλάγιο</i> κείμενο</li>
	<li>κείμενο <i>πλάγιο</i> κείμενο</li>
	<li>κείμενο <i>πλάγιο</i> κείμενο</li>
</ul>

i {
	font-size: 30px;
}
ul {
	font-size: 20px;
}
li {
	color: red;
	font-weight: bold;
}