Селекторы тегов.

В статье “Базовый синтаксис CSS” мы говорили о селекторах. Если вы не знаете что такое селектор, тогда советуем изучить данную статью.

В качестве селектора может выступать любой тег HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и т.д. Правила задаются в следующем виде:

Тег { свойство1: значение; свойство2: значение; ... }

Вначале указывается имя тега (заглавными или строчными не имеет значения). Внутри фигурных скобок пишется стилевое свойство, а после двоеточия — его значение.

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

 P { 
    text-align: justify; /* Выравнивание по ширине */
    color: white; /* Белый цвет текста */
   }

Виды селекторов

1. Селектор типа

Стиль применяется к HTML-элементам указанного типа. Иными словами, прямо к тегу. Например, чтобы задать базовые значения всем заголовкам первого уровня на сайте:

h1 { 
font-size: 1.875em; 
line-height: 1.075; 
}
2. Селектор класса

Применяется к элементам по имени, без привязки к тегу. CSS-класс определяется точкой перед именем:

.article-title { 
    color: red; 
}

Атрибутом class определяется элемент, к которому применится стиль. 

<h1 class="article-title">My cool article</h1>
3. Селектор идентификатора

Как и селектор класса, привязывается к элементу по имени. Определяется диезом:

#element-id { 
color: red; 
}

Атрибутом id определяется элемент, к которому применится стиль:

<h1 id="element-id">My cool article</h1>

Значения стилей id перебьют значения класса, вне зависимости от порядка записи в CSS. 

4. Универсальный селектор

Применяется ко всем элементам на странице. Следующая запись в таблице стилей добавит каждому элементу красную рамку:

* { 
border: solid 1px red; 
}

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

4 ответа к “Селекторы тегов.”

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

CSS flexbox

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

 
Препроцессор Sass

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

 
Программируемый язык стилей LESS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

 
CSS-фреймворки

CSS-фреймворки

CSS-фреймворки созданы для упрощения работы верстальщика, исключения ошибок при создании проекта и избавления от скучного монотонного написания одного и того же кода. Верстальщики получают продуманные

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: