CSS Xasslərinin İrsi

Bizdə bir abzas və onun içində i teqində olan mətn olsun:

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

Gəlin abzasları qırmızı rəngə boyayaq:

cssp {
  color: red;
}

Nəticədə təkcə abzasın mətni deyil, həm də i teqinin mətni boyanacaq:

Bütün iş ondadır ki, color xassəsi irsilənir. Bu o deməkdir ki, əgər valideyn teqdə müəyyən bir rəg təyin olunubsa, həm də onun nəvələrində də olacaq. Bütün CSS xassələri irsilənmir, amma çoxları (sizin artıq bildiyinizlərdən - hamısı irsilənir).

İstəyə bağlı olaraq, lakin, valideynin xassəsini onun nəvəsi üçün seçici təyin etməklə dəyişmək olar. Məsələn, gəlin abzasa qırmızı rəng, kursivə isə mavi rəng verək:

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

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

Результат:

Belə halda CSS kodunda seçicilərin sırasının əhəmiyyəti yoxdur. Əgər i seçicisi ilə p seçicisinin yerlərini dəyişsək, hər şey eyni şəkildə işləyəcək:

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

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

Результат:

Задание 1

Kodu öyrənərək, b teqindəki mətinin hansı rəngdə olacağını deyin:

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

cssp {
  color: blue;
}

Задание 2

Kodu öyrənərək, b teqindəki mətinin hansı rəngdə olacağını deyin:

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

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

Задание 3

Kodu öyrənərək, b teqindəki mətinin hansı rəngdə olacağını deyin:

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

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

Задание 4

Kodu öyrənərək, li teqindəki mətinin hansı rəngdə olacağını deyin:

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

cssul {
  color: blue;
}

Задание 5

Kodu öyrənərək, li teqindəki mətinin hansı rəngdə olacağını deyin:

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

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

Задание 6

Kodu öyrənərək, i teqindəki mətinin hansı rəngdə olacağını deyin:

html<ul>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
</ul>

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

Задание 7

Kodu öyrənərək, i teqindəki mətinin hansı ölçüdə olacağını deyin:

html<ul>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
</ul>

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