Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

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

.

На текущий момент мы рассмотрели способы оформления различных элементов, например абзацев и заголовков. Вы также увидели, как можно оформлять элементы в отдельных областях страницы, используя идентификаторы. Однако слишком широкое применение стиля (как окраска текста во всех абзацах в синий цвет) — это грубый подход с точки зрения дизайна. Что, если вам нужно выделить лишь несколько абзацев (или каких-то других элементов)? Используйте селекторы классов.

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

Введите в своем CSS-файле такой код:

Вы только что создали правило стиля для класса fun. Точка перед названием класса говорит о том, что перед вами селектор класса. В это правило вы добавили новое свойство letter-spacing, которое задает пробел между буквами. Здесь установлена величина 0.05 em. Значение 1 em определяет высоту символа М для любого шрифта, поэтому 0,05 означает 5 % от этой высоты. Казалось бы, это свойство почти изменит внешний вид текста, но, когда документ отправится в типографию, самые небольшие изменения будут бросаться в глаза. Впрочем, вы можете сами попробовать увеличить это значение и посмотреть, что получится.

Чтобы использовать стиль, после того как он был внесен в таблицу, добавьте такой атрибут class=fun:

А сейчас попробуйте применить классы к учебному сайту. Сначала нужно добавить правило стиля, показанное выше, к таблице стилей.

1. Откройте stylel. ess и добавьте в конце файла код из предыдущего листинга.

2. Сохраните файл и откройте в текстовом редакторе страницу about. html.

3. Найдите абзац, который содержит элемент цитаты (blockquote).

4. Добавьте в открывающий тег абзаца атрибут сlass=fun. Разметка будет выглядеть следующим образом:

blockquote

р class=funСчастье — это поплавать в океане, а затем выпить один или два бокала холодненького пива! И я разрешаю меня цитировать!/р /blockquote

Заметьте: атрибут class применен на уровне абзаца (не цитаты). Если наш Боб разговорится на несколько абзацев, это будет выглядеть так:

Получилось много повторов. Наверное, есть более аккуратный способ применить этот стиль? Да, конечно, вот он:

В этом примере к элементу применен класс fun, так что теперь все содержимое элемента будет отображаться в стиле родительского контейнера. Это избавит вас от необходимости применять разные классы ко всем вашим страницам.

.

Читайте так же:
Not found