Обзор популярных расширений Joomla

Статьи о создании и развитии сайта

Обучающие материалы по верстке HTML\CSS


search

Классы и идентификаторы

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

Классы и идентификаторы можно применять с дочерними, соседними и контекстными селекторами.

Классы

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

div .new {color:blue; padding: 5px;} - в файле стилей

<div class="new">текст</div> - в HTML-документе

В итоге, указанные стили будут применяться только для текста с тегом div, в котором указывается класс. Если в файле стилей оставить один класс, то в HTML-документе изменения будут внесены во все места, где установлен выдуманный класс new.

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

<p class="new old">

Идентификаторы

Идентификаторы схожи по применению с классами, но в отличие от классов, в веб-документе они указываются только один раз! Уникальное имя элемента указывается для изменения его стилей, а также обращений к нему через скрипты. В файле CSS идентификаторы обозначаются латинскими буквами (допускается _ и - ), перед которым ставится знак #:

#ukaz {text-align:center; font-size:15px} - в файле стилей

<p id="ukaz">Заголовок</p> - в HTML-документе

Как и классы, в файле CSS идентификаторы могут применяться отдельно и вместе с тегами.

Применение классов и идентификаторов значительно увеличивают возможности вёрстки и упрощает многие задачи.

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

Защитный код
Обновить

Комментарии

  • Модуль VTEM Panorama

    Дмитрий
    Доброго времни суток! Несовсем догоняю как привязать к joomshoping те для каждого товара должен ...
     
  • Плагин Edocs

    sveta
    после перехода с http на https плагин перестал работать. Меняла все пути, которые возможно, но не ...
     
  • Компонент JoomShopping. Полезности

    Димы
    Ух, шикарно, спасибо. Изменил карточку товара. Цену и кнопку "В корзину" разместил слева от ...
     
  • Работа с категориями в K2

    Николай
    Подскажите пожалуйста, пользуюсь Serpstat. Комплексный аудит сайта по метатегам (путь:Аудит сайта ...
     
  • Компонент JoomShopping. Товары и категории

    Валерий
    Здравствуйте. Мне очень нужна Ваша помощь. Как возможно сделать, чтобы форма заказа товара в joomshopping ...