наверх




Для более гибкой работы с документом допустимо перечислять необходимые нам селекторы, для задания общих свойств стилей. Так же, есть возможность указания стилей класса лишь в том случае, когда он находится внутри определенного класса или идентификатора.

Общие стили


Для того, чтобы задать общие стили нескольким селекторам необходимо их просто напросто перечислить через запятую.

#word,  .main, p {
  color: red;
}


В приведенном выше примеры все элементы с идентификатором word, классом main и теги p будут иметь свойство красного цвета текста. При этом, можно отдельно задать свойства для класса main, а уже в общих стилях задать один общий стиль.

#word,  .main, p {
  color: red;
}

.main {
  padding: 6px;
  font-size: 13pt;
}


Стили для разных селекторов


Для того чтобы указать, что у данного селектора под другим селектором одни стили, а под другим селектором другие стили, используется определенный в CSS метод.

.main > #str {
  color: red;
}

.side > #str {
  color: green;
}


<div class="main">... <span id="str">Текст красного цвета</span></div>
<div class="side">... <span id="str">Текст зеленого цвета</span></div>


То есть под классом main у идентификатора str будет красный цвет текста, а у класса side у идентификатора str будет зеленый цвет текста. Так же, идентификатору str можно задать один общий стиль, а уже под различные классы добавить другие.

#str {
  font-size: 11pt;
}

.main > #str {
  color: red;
}

.side > #str {
  color: green;
}


Наследование


Если мы зададим одному классу определенный цвет текста, то этот же цвет текста будет и у дочерних элементов внутри данного класса.

.main {
  color: blue;
}


<div class="main">
Это текст синего цвета.
	<div class="wrap">
	Этот текст тоже синего цвета.
		<p>
		И здесь тоже синего цвета.
		</p>
	</div>
</div>


Для того чтобы сделать, что у класса wrap текст был, например, красного цвета, то этот стиль нужно задать ему отдельно. Но при этом и у тега <p> цвет текста так же сменится на красный.

.main {
  color: blue;
}

.wrap {
  color: red;
}


<div class="main">
Это текст синего цвета.
	<div class="wrap">
	Этот текст теперь красного цвета.
		<p>
		Здесь теперь текст красного цвета.
		</p>
	</div>
</div>






Поделиться
Text-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный text-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.