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

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 - правило-набора, состоит из селектора и блока объявления:

CSS селектор

Селектор h1 указывает на элемент HTML <h1>, у которого устанавливается стиль, какой Вы пожелаете.

Декларация блока {свойство: значение;} содержит одно или несколько объявлений, разделенных точкой с запятой ;.

Каждое объявление содержит имя свойства и значения CSS, разделенных двоеточием :.

Объявление CSS всегда заканчивается точкой с запятой, объявленнные блоки окружены фигурными скобками {...}.

В следующем примере все элементы <p> текста, будут выравнены по центру text-align: center;, красным цветом color: red;:

Пример

p {
   color: red;
   text-align: center;
}
Редактор кода »

CSS Селекторы

CSS селекторы используются для "поиска" (или выбора) элементов HTML на основе имени элемента, индентификатора id, класса class, атрибута и др.


Элемент селектор

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

Вы можете выбрать все параграфы <p> на данной странице (в примере, все элементы <p> будут выравненны по центру text-align: center;, с красным цветом color: red; текста):

Пример

p {
   text-align: center;
   color: red;
}
Редактор кода »

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

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

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

Чтобы выбрать элемент с определенным идентификатором id, нужно прописать в CSS символ #para1, а затем следовать по идентификатору элемента.

Ниже в примере применено правило стиля к элементу HTML с id="para1":

Пример

#para1 {
   text-align: center;
   color: red;
}
Редактор кода »

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


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

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

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

В приведенном примере ниже все элементы HTML class="center" будут иметь красный цвет color: red; и выравнены по центру text-align: center;:

Пример

.center {
    text-align: center;
    color: red;
}
Редактор кода »

Вы также можете указать, только определенному элементу HTML p, где будет установлен класс .center.

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

Пример

p.center {
    text-align: center;
    color: red;
}
Редактор кода »

В HTML элементах, также можно установить, несколько классов.

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

Пример

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

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


Группировка селекторов

Если у вас есть элементы с одинаковыми определениями стиля, вроде этого:

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

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

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

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

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

В примере ниже мы сгруппировали селекторы:

Пример

h1, h2, p {
   text-align: center;
    color: red;
}
Редактор кода »

CSS комментарии

Комментарии используются для объяснения кода, он может помочь при редактировании исходного кода, познее.

Комментарии игнорируются браузерами.

В CSS комментарий начинается с /* и заканчивается */. Комментарии могут занимать несколько строк:

Пример

p{
   color: red;
   /* Это однострочный комментарий */
   text-align: center;
}

/* Это
многострочный
комментарий */
Редактор кода »

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