Применение нескольких стилей в одном селекторе.

До сих пор мы с вами для одного элемента и селектора использовали только одно свойство. 

Как быть, если нам нужно в пределах одного селектора применить к элементу несколько свойств CSS.

В этом случае все довольно просто и давайте сейчас попробуем разобраться, как это можно сделать.

Давайте для примера возьмем селектор с классом red. 

.red {color:red}

Предположим, что этот селектор применяет стили CSS для элемента абзаца с классом red. 

<p class="red">Абзац</p>

И давайте добавим какое-нибудь еще одно свойство для нашего селектора .red.

Пусть это будет свойство font-weight. Это свойство CSS, которое устанавливает насыщенность шрифта.

Разделителем между свойствами в пределах одного селектора является знак точка с запятой. Добавляем новое свойство:

.red {
color:red;
font-weight:bold;
}

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

Т.е. это можно записать так:

.red {
color:red;
font-weight:bold
}

 

 

Т.к. разделять нечего и ошибки возникать не будет. Т.е. вы можете ставить знак ";", а можете не ставить. 

Если нужно давить еще каких-то свойств к этому селектору, ставим знак ; и добавляем столько свойств, сколько нам будет нужно.

.red {
color:red;
font-weight:bold;
свойство: значение;
….
}


Комментарии: