Типы селекторов CSS и их применение

Селекторы CSS это способ задать применение стилей к HTML-элементам.

Существуют различные виды селекторов

универсальный селектор (применяется ко всем элементам веб-страницы)

селектор по тегу

В качестве селекторов могут использоваться теги <a>, <article>, <background>, <body>, <H1>, <H2>, <H3>, <H4>, <H5>, <H6>, <i>, <li>, <ol>, <p> и другие.

В примере ниже изменение размера шрифта применяется к элементу article.

Содержимое CSS-файла:

article {
 font-size: 1.2rem;
}

селектор по идентификатору (применение стилей к элементу с атрибутом id с неповторяющимся в пределах веб-страницы значением)

В этом примере используются два файла. Один с расширением html, второй - css.

Содержимое HTML-файла:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="styles.css" type="text/css" media="all"/>
      <title>Пример использования селектора id в CSS</title>
   </head>
   <body>
      <h1 id="header">Заголовок</h1>
   </body>
</html>

HTML-файл должен быть сохранён в кодировке UTF-8, чтобы кириллица правильно отображалась.

Содержимое CSS-файла:

#header{
   color:#0000ffff
}

Результат работы кода в браузере:

селектор по классу (применяется к элементам, для которых назначен атрибут class с соответствующим значением)

С помощью классов к одному и тому же элементу веб-страницы можно применить разные стили. Для этого в стилях CSS после тега необходимо поставить точку и название класса. Название класса должно начинаться только с буквы и может содержать также числа, дефисы и знаки подчёркивания.

КОД:


<style>



p{


width: 350px;


}



.yellow{


background-color: yellow;


}



.gray{


background-color: gray;


}



</style>

Селекторы можно группировать, например, одновременно применить одинаковые стили к селектору по тегу и селектору по классу.

Страница обновлена 9 июня 2024 года.