Руководство по классам CSS для новичков

Представьте, что вы создаете веб-страницу. Вы хотите, чтобы один абзац имел крупный красный шрифт, другой абзац – средний белый шрифт, а последний абзац – мелкий синий шрифт.

Благодаря классам CSS вы можете делать именно это. Классы CSS позволяют применять уникальные свойства стиля к группам элементов HTML для достижения желаемого внешнего вида веб-страницы.

В этом посте мы рассмотрим некоторые термины, которые вам необходимо знать, такие как класс CSS, селектор классов и специфичность CSS. Мы также рассмотрим, как создать класс в CSS и использовать его для стилизации ваших веб-страниц. 

Что такое класс CSS?

Класс CSS – это атрибут, используемый для определения группы элементов HTML с целью применения уникального форматирования к этим элементам в CSS. Эта группа может содержать более одного типа элементов.

Атрибут class не влияет на семантическое значение HTML-документа. Это означает, что простое добавление атрибута класса к элементу без какого-либо CSS не изменит внешний вид или форматирование элемента во внешнем интерфейсе.

Однако вы все равно должны выбирать имя, которое не основано на внешнем виде элемента, чтобы избежать путаницы при добавлении CSS. Например, вы хотите сделать все заголовки на странице жирным шрифтом и изменить цвет шрифта на синий. Для начала вы должны создать и добавить имя класса к элементам заголовка. Вместо использования имени класса, например .bold, выберите имя, например .bright. Таким образом, вы не перепутаете имя класса с полужирным шрифтом HTML.

Имена классов также не должны состоять из одного слова. Широко распространенная практика создания классов CSS – использовать строчные буквы и заменять пробелы дефисами. Некоторые примеры включают .bright-blue  и .fancy-text.

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

Как использовать классы CSS

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

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

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

<button type="button" class="btn">Click Me</button>

Вот результат: 

Источник изображения

Без этого класса кнопок вы могли бы использовать селектор типа для нацеливания на все кнопки и применения этого CSS. Но вам придется написать один и тот же CSS для любых элементов или , которые вы хотите отформатировать таким же образом. Таким образом, классы CSS позволяют форматировать различные типы элементов при написании меньшего количества кода.

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

Что такое селектор классов в CSS?

В CSS селектор класса форматируется как символ точки (.), За которым следует имя класса. Он выбирает все элементы с этим атрибутом класса, так что уникальные объявления CSS могут быть применены к этим конкретным элементам, не затрагивая другие элементы на странице.

Чтобы использовать селекторы классов, вы должны сначала применить атрибут класса к элементу HTML или их группе. Затем добавьте соответствующий селектор классов с определенными свойствами CSS в свою таблицу стилей. Давайте подробнее рассмотрим этот процесс ниже.

Как создать класс в CSS

Создать класс CSS просто. Вам просто нужно добавить на свои веб-страницы немного HTML и CSS.

Начните с добавления атрибута класса к элементам HTML, которые вы хотите стилизовать. Чтобы сделать это правильно, просто добавьте class = "class-name" внутри открывающих тегов этого элемента.

Давайте посмотрим на пример ниже.

Вот HTML:

<h1>Not green</h1>
<p class="pastoral">Green</p>
<p>Not green</p>
<p><a href="default.asp" target="_blank" class ="pastoral">The link</a> that appears within this paragraph is green.</p>

Затем вы можете создать набор правил для этого конкретного класса. Вам просто нужен селектор класса и блок объявления. Блок объявления состоит из свойств CSS, определенных значениями. В примере ниже, например, свойство цвета CSS определено с именем цвета «зеленый».

Вот CSS:

.pastoral {
color: green;
}

Вот результат:

Источник изображения

Вы успешно создали класс CSS. При применении к элементу класс .pastoral изменит цвет шрифта на зеленый. Теперь рассмотрим несколько более сложных примеров.

Селекторы потомков

Цель использования селекторов классов CSS – применить форматирование к определенным элементам. С этой целью селекторы потомков являются отличным дополнением к вашему набору инструментов.

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

Селекторы потомков позволяют добавлять эти специальные стили к определенным словам, не влияя на остальную часть абзаца или изменяя ваш HTML-документ.

Допустим, вы применяете класс .pastoral к заголовку, но хотите изменить цвет одного слова в заголовке. Затем вы можете заключить слово в элемент span и использовать селектор потомков. Вам просто нужно будет добавить еще один набор правил, используя тот же блок объявлений. Единственное отличие состоит в том, что после селектора класса CSS .pastoral, добавьте пробел, а затем селектор типа пролета.

Вот HTML:

<h1 class="pastoral">This headline is <span>very</span> festive</h1>

Вот CSS:

.pastoral {
color: green;
}
.pastoral span {
color: red;
}

Вот результат:

Источник изображения

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

Стилизация ссылок с помощью псевдоклассов

На веб-странице можно увидеть больше, чем HTML-контент. Во время взаимодействия со страницей передается большой объем информации об активности пользователей. Часть этой информации отражает то, что они делают.

Рассмотрите ссылку в вашем контенте. Пользователь может или не может взаимодействовать с ним. Если это так, вы можете использовать псевдоклассы для захвата временной информации о пользователях, например, когда они наводят курсор, щелкают и переходят по ссылке.

Псевдоклассы обозначаются двоеточием, за которым следует класс. Они появятся после селектора CSS без пробелов между ними. 

Общие псевдоклассы для стилей ссылок

• : ссылка представляет собой ссылку, которую пользователь не посещал.
• : visit указывает ссылку, которую пользователь уже посещал ранее.
• : hover показывает ссылку с курсором пользователя над ней.
• : active отмечает нажатую ссылку.

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

В этом случае вы должны добавить атрибут класса только к тем ссылкам, с которых вы хотите удалить подчеркивание. Затем добавьте четыре набора правил с помощью селектора классов и четырех соответствующих псевдоклассов. В каждом блоке объявления вы установите для свойства text-decoration значение «none».

Вот HTML:

<h2>Links on an HTML site</h2>
<p>By default, the underline will appear in links in every state: when hovered over, clicked on, visited, or not. You can remove it with CSS.</p>
<p><b><a href="default.asp" target="_blank">This is an unformatted link</a></b> that appears within a paragraph.</p>
<p><b><a href="default.asp" target="_blank" class="no-underline">This is a formatted link</a></b> that appears within a paragraph.</p>

Вот CSS:

.no-underline:link {
text-decoration: none;
}
.no-underline:visited {
text-decoration: none;
}
.no-underline:hover {
text-decoration: none;
}
.no-underline:active {
text-decoration: none;
}

Вот результат:

Источник изображения

Стилизация кнопок с помощью псевдоклассов

Псевдоклассы можно использовать для стилизации всех видов селекторов. Помимо текстовых ссылок, вы также можете форматировать свои кнопки.

С .button классом CSS, вы можете стилизовать внешний вид кнопки для различных состояний: : линии, : посетили, : при наведении, и : активная.

Селекторы ID

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

Использование селекторов ID включает атрибут id в элементе HTML, который вы хотите выбрать. Соответствующий селектор начинается со знака фунта (#), а не с точки (.).

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

Кроме того, атрибуты id обеспечивают цель для фрагментов URL (таких как привязки страниц), поэтому они должны быть уникальными. Фрагменты помогают направить пользователя к определенной части веб-страницы – фрагмент выглядит как селектор идентификатора, размещенный в конце URL-адреса.

Источник

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

Кроме того, этот метод делает URL-адреса вашего веб-сайта зависимыми от стилей CSS. Небольшая ошибка, например, если вы забудете обновить таблицу стилей после редактирования URL-адреса, может привести к поломке разделов или всего веб-сайта.

Специфика CSS

В некоторых случаях разные селекторы CSS имеют разный вес. Когда два или более правила конфликтуют с одним и тем же элементом, применяется более конкретное – в этом и заключается специфика CSS. Ранжирование объявлений стилей по определенным правилам браузера определяет окончательный внешний вид элемента.

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

Вот как разные селекторы ранжируются в иерархии:

1. Встроенный CSS: встроенный CSS отображается как атрибуты стиля в открывающем теге элементов HTML. Поскольку этот CSS ближе всего к HTML, он имеет высочайший уровень специфичности.
2. Селекторы идентификаторов: идентификатор уникален для элемента страницы и, следовательно, очень специфичен.
3. Селекторы классов, селекторы атрибутов и селекторы псевдоклассов: эти три типа селекторов имеют одинаковую специфичность. Если все три типа применяются к одному и тому же элементу HTML, будет применяться тот, который появляется в таблице стилей последним, и переопределить остальные.
4. Селекторы типа: они выбирают все элементы HTML, которые имеют заданное имя узла и элемент синтаксиса. Это имена элементов и псевдоэлементы.

Начать использовать классы CSS

Классы CSS помогают быстрее и проще настраивать элементы на веб-странице. Использование селекторов классов CSS позволяет настраивать правила для форматирования целых классов элементов HTML, определенных элементов в классе или отдельных элементов во многих классах. При разработке сайта вы можете проявить столько творчества, сколько захотите, но помните, что цель – улучшить пользовательский интерфейс (UX) вашего сайта .

Источник записи: https://blog.hubspot.com