САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Селекторы CSS Инструкции CSS Цвета CSS Слои Фона CSS Границы CSS Поля CSS Отступы CSS Высота и ширина CSS Бокс модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Дисплей CSS Макс. ширина CSS Позиционирование CSS Переполнение CSS Поплавок CSS Линейный блок CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

CSS3 Закругленные углы CSS3 Границы CSS3 Слои фона CSS3 Цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D трансформация CSS3 3D трансформация CSS3 трансформация CSS3 Анимация CSS3 Подсказки CSS3 Стиль изображения CSS3 Объект-подгонка CSS3 Кнопки CSS3 Пагинация CSS3 Несколько столбцов CSS3 Интерфейс CSS3 Переменные CSS3 Бокс размеры CSS3 Гибкий бокс CSS3 Медиа запросы CSS3 Медиа примеры

CSS3 Адаптивный дизайн

Введение Область просмотра Вид сетки Медиа запросы Изображения Видео Фреймворк Шаблоны

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

CSS Макеты CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

CSS Селекторы



CSS Селекторы

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

Можно разделить CSS селекторы на пять категорий:

На этой странице будут объяснены самые основные CSS селекторы.


CSS Селектор элементов

Селектор элементов выбирает HTML элементы на основе имени элемента.

Пример

Здесь все элементы <p> на странице будут выравниваненны по центру, с красным цветом текста:

p {
  text-align: center;
  color: red;
}
Посмотреть код »

CSS Селектор идентификаторов

Селектор id использует атрибут идентификатора HTML элемента для выбора конкретного элемента.

Идентификатор элемента является уникальным в пределах страницы, поэтому селектор id используется для выбора одного уникального элемента!

Чтобы выбрать элемент с определенным идентификатором, напишите символ хэша (#), за которым следует идентификатор элемента.

Пример

Приведенное ниже правило CSS будет применено к элементу HTML с помощью id="para1": 

#para1 {
  text-align: center;
  color: red;
}
Посмотреть код »

Примечание: Имя идентификатора не может начинаться с цифры!



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

Селектор классов выбирает HTML элементы с определенным атрибутом класса.

Чтобы выбрать элементы с определенным классом, поставить символ точку (.), за которым следует имя класса.

Пример

В этом примере все HTML-элементы с class="center" будут красными и выровненными по центру:

.center {
  text-align: center;
  color: red;
}
Посмотреть код »

Можно также указать, что класс должен влиять только на определенные элементы HTML.

Пример

В этом примере только элементы <p> с class="center" будут выровнены по центру:

p.center {
  text-align: center;
  color: red;
}
Посмотреть код »

HTML элементы также могут ссылаться на несколько классов.

Пример

В этом примере элемент <p> будет стилизован в соответствии с class="center" и с class="large":

<p class="center large">Этот пункт относится к двум классам.</p>
Посмотреть код »

Примечание: Имя класса не может начинаться с цифры!


CSS Селектор универсальный

Универсальный селектор (*) выбирает все HTML элементы на странице.

Пример

Приведенное ниже правило CSS влияет на каждый элемент HTML на странице:

* {
  text-align: center;
  color: blue;
}
Посмотреть код »

CSS Селектор группирования

Селектор группирования выбирает все HTML элементы с одинаковыми определениями стилей.

Посмотрите на следующий код CSS (элементы h1, h2 и p имеют одинаковые определения стилей):

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

Лучше будет сгруппировать селекторы, чтобы минимизировать код.

Чтобы сгруппировать селекторы, отделите каждый селектор запятой.

Пример

В этом примере мы сгруппировали селекторы из приведенного выше кода:

h1, h2, p {
  text-align: center;
  color: red;
}
Посмотреть код »

Проверьте себя с помощью упражнений!


Все CSS простые селекторы

Селектор Пример Описание
.class .intro Выбирает все элементы с class="intro"
#id #firstname Выбирает элемент с id="firstname"
* * Выбирает все элементы
element p Выбирает все элементы <p>
element,element,.. div, p Выбирает все элементы <div> и <p>