Селекторы классов CSS

Селекторы классов

Селекторы классов CSS выбирают элементы на HTML-странице, если у них есть атрибут с именем класс, значение которого совпадает с именем селектора класса .

В документе таблицы стилей имени селектора класса предшествует точка (например, «. «).

Если селектор класса объединен с другим или несколькими селекторами типа или класса, селекторам класса должна предшествовать точка.

На HTML-странице любое количество элементы могут иметь одинаковое значение атрибута класса.

синтаксис:

 .classname {CSS-Property: value;  ........................} 

Простой пример селекторов классов CSS

Код CSS:

  .w3r {color: red; /* устанавливает красный цвет */background-color: aliceblue; /* устанавливает цвет фона на aliceblue */}  

HTML code:

       Простой пример селекторов классов CSS     

Lorem ipsum dolor sit amet, conctetur adipiscing elit. Сделано элитная урна.

Целое число malesuada tempus enim nec rhoncus. Aenean tempus adipiscing porttitor.

Результат:

Lorem ipsum dolor sit amet, conctetur adipiscing elit. Donec a urna elit.

Целое число malesuada tempus enim nec rhoncus. Aenean tempus adipiscing porttitor.

Просмотрите этот простой пример селектора классов CSS в отдельном окне браузера.

Расширенный пример селекторов классов CSS

CSS-код:

  .w3resource {color: red; /* устанавливает красный цвет */background-color: aliceblue; /* устанавливает цвет фона на aliceblue */}. w3resource1 {font-weight: bold; /* устанавливает полужирный размер шрифта */font-variant: small-caps; /* устанавливает для шрифтов маленькие заглавные буквы */}  

HTML code:

        Расширенный пример селекторов классов CSS     

Мы изучаем селектор классов CSS в w3resource.

Мы изучаем селектор классов CSS в w3resource.

Результат:

Мы изучаем селектор классов CSS в w3resource.

Мы изучаем селектор классов CSS в w3resource.

Просмотреть это расширенный пример селектора классов CSS в отдельном окне браузера.

Оцените статью
nanomode.ru
Добавить комментарий