Классы

Результат применения классов к тегам и показан на рис. 8.2.

Рис. 8.2. Вид тегов, оформленных с помощью классов

Классы удобно использовать, когда нужно применить стиль к разным элементам веб-страницы: ячейкам таблицы, ссылкам, абзацам и др. В примере 8.3 показано изменение цвета фона строк таблицы для создания «зебры».

Пример 8.3. Использование классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

      АлмазАметистСапфир
Название
Цвет
Твердость по Моосу
 
 
Белый
10
 
 
Рубин
Красный
9
 
 
Голубой
7
 
 
Изумруд
Зеленый
8
 
 
Голубой
9
 
 
  

Рис. 8.3. Результат применения классов

Одновременное использование разных классов

К любому тегу одновременно можно добавить несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяется стиль, описанный в правилах для каждого класса. Поскольку при добавлении нескольких классов они могут содержать одинаковые стилевые свойства, но с разными значениями, то берётся значение у класса, который описан в коде ниже.

В примере 8.4 показано использование разных классов для создания облака тегов.

Пример 8.4. Сочетание разных классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

      
Paint.NET Photoshop цвет фон палитра слои свет панели линия прямоугольник пиксел градиент 
  

Результат данного примера показан на рис. 8.4.

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

Вопросы для проверки

1. Какое имя класса написано правильно?

2. Какой цвет будет у слова «потока» в коде?

При использовании следующего стиля?

4. Какое имя класса следует добавить к тегу , чтобы текст был одновременно жирным и красного цвета, если имеется следующий стиль?

Источник

Классы в CSS– удобный путеводитель

В сегодняшней статье мы рассмотрим классы в CSS и их взаимосвязь с языком гипертекста. HTML — теги и CSS связаны напрямую. Эта взаимосвязь позволяет определить, как выглядит тег или как он ведет себя при использовании его имени в таблице стилей:

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

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

CSS классы — когда их использовать

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

Шаг 1 — добавить класс в HTML

Чтобы повлиять на внешний вид HTML-страницы , вы должны сначала разметить элементы с атрибутом class=»class-name» . Вот пример:

 
Контейнер 1
 
Контейнер 2
 
Контейнер 3
 

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

Давайте посмотрим, что нужно сделать в нашем CSS :

Чтобы задать правило для определенного тега с CSS классом, а не просто определить tagname < >, мы используем tagname.classname < >. Точка между tagname и classname является тем, что определяет правило как CSS класс. Также обратите внимание, что там нет пробелов. Если поставить пробел в правиле, то оно не будет работать так, как вы планировали.

В этом примере использовалось свойство margin-right:10px . Эта строка гарантирует, что между тремя контейнерами сохраняется пространство в 10 пикселей. Свойство float со значение left обеспечивает, чтобы все контейнеры размещались слева.

Такое сочетание должно дать вам что-то вроде этого:

Если вы не укажете класс

Чтобы показать вам, что ваш CSS класс изображения box применяется только там, где вы хотите, поместите дополнительный элемент после « Контейнер 3 »:

Обновите страницу. Вы увидите, что ни одно из правил, установленных в div.box <> не применяется. Потому что вы не указали значение класса.

Вот почему этот вариант использования классов CSS более гибкий, чем простое tagname < >. На странице может быть много элементов , но стили будут применяться только к тем, в которых задано соответствующее значение атрибута class !

Использование более чем одного класса

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

Чтобы указать, что вы хотите использовать в CSS несколько классов, нужно добавить следующий класс через пробел. Как здесь:

 
Контейнер 1
 
Контейнер 2
 
Контейнер 3
 

Расположение каскадом

Поскольку стили CSS используют каскадный порядок, вы размещаете свои классы по уровню важности. В данном случае мы хотим, чтобы класс class=»box» применялся перед class=»red» . Иначе class=»red» будет применяться до class=»box» . Надеюсь, это понятно!

div.box < height:200px; width:200px; text-align:center; font-size:14px; color:#090; background-color:#dddddd; margin-right:10px; >div.red < background-color:#ffcccc; >div.green < background-color:#ccffcc; >div.blue

Поскольку у каждого из трех контейнеров есть CSS класс .box , к ним всем применяются свойства, прописанные в div.box . Но к каждому применяется также дополнительный класс ( red , green , или blue ). Конечный результат:

Примечание: несмотря на то, что div.box определяет background-color:#cccccc ; « цветовые » классы определяются после него. Например, в box red свойство background-color , указанном в div.red , перезаписывает аналогичное свойство в div.box . Это то, что подразумевается под каскадом: в CSS логике определяется сверху вниз. А при определении классов HTML — слева направо.

CSS классы при создании макета сайта

Подумайте, для каких элементов нужно использовать CSS классы при верстке макета страницы. Вот некоторые мысли для подсказки:

• Любые изображения, которые вам захочется сделать иконками или изображением товара, придется сделать в форме квадрата: например img.thumbnail < width:200px;height:200px; >;
• Стили ссылок для кнопок должны определяться отдельно от стилей обычных ссылок. Например, a.button <> ;
• Нужно применить другой цвет при наведении курсора на ссылки в вашей навигации. Например, a.nav:hover < >a.nav: Hover <> .

Классы DR CSS; TL

Эффективное использование классов позволяет элементу страницы дать имя, которое понимает CSS . Используя эти «имена» можно применить один ряд правил для нескольких экземпляров элемента без повторного определения кода CSS .

И поскольку они располагаются каскадом, порядок в котором вы размещаете свои классы в HTML , действительно имеет значение, так что следите за этим.

Если у вас есть какие-либо вопросы, не стесняйтесь задать их в комментариях!

ВЛ Виктория Лебедева автор-переводчик статьи « Using CSS Classes – A Handy Guide »

Источник