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

Класс CSS с привязкой к элементу

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

Пример синтаксиса

    НАЗВАНИЕ ЭЛЕМЕНТА.имя-класса { свойство: значение }

В CSS-файле это будет выглядеть так

P.class1 { text-align: center }

P.class2 { text-align: left }

Вызов из HTML будет выглядеть таким образом

< P CLASS=”class1”> Текст выровнен по центру </P>
< P CLASS=”class2”> Текст выровнен по левой стороне </P>
< P> текст отформатирован по умолчанию </P>

Класс CSS без привязки к элементу

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

.имя класса { свойство: значение }

Пример записи в файле CSS

.class1 {color: green }
.class2 {color: red }

Пример в html-коде

<P    CLASS=”class1”> Текст зеленого цвета </P>
<H3 CLASS=”class1”> Заголовок зеленого цвета </H3>

<P    CLASS=”class2” > Текст красного цвета </P>
<H3 CLASS=”class2”> Заголовок красного цвета </H3>

 

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

Уважаемые читатели, если Вы хотите еще глубже разобраться в такой теме как “Стандарты CSS, использование и применение” Предлагаю Вам очень качественный видиокурс Евгения Попова.   Для ознакомления с этим предложением пройдите по этой ссылке.

 

Комментарии (15) на “Классы CSS”

  • Максим пишет:

    Css видимо навсегда для меня останется тайной за семью печатями)

  • Natabul пишет:

    Спасибо за предложение. курс Попова у меня уже есть, но до этих уроков я еще не дошла.

  • Сергей пишет:

    Спасибо за нужную информацию. Приму на вооружение.
    Вопрос: не подскажите как правильно писать на блоге (каким шрифтом? как выделять правильно заголовки? и т. д.???)? В этом плане в меня одни ????? вопросы!Помогите пожалуйста!

    • Юрий пишет:

      Все шрифты, размеры шрифта и заголовки для блогов на wordpress зашиты в шаблоне(теме) блога. Если что-то менять, то надо или менять тему или изменять некоторые настройки в теме. На вашем блоге я был, все очень даже неплохо, сильно беспокоиться я не вижу причин. Главное, чтобы было понятно, что Вы хотите своим посетителям донести. Успехов Вам.

  • Дмитрий пишет:

    Спасибо за интересную и полезную статью!

  • Юрий пишет:

    полезная информация. Приму к сведению

  • Петрович пишет:

    У Вас очень полезная, и актуальная информация!

  • Александр пишет:

    Информация действительно, полезная, спасибо

  • Сергей пишет:

    Интересно описываете классы. Все так понятно и кратко на обывателя. Спасибо.

  • Aleks пишет:

    Просто и понятно написано про классы CSS.
    Зачет и уважение!

  • Валентина пишет:

    Ох, как это для меня сложно! Честно. Я чем дальше учусь, тем больше чувствую себя “чайником”… Юрий, а я могу вас попросить, подскажите, у вас кнопка Гугл+ с кодом стоит? Если с кодом, пожалуйста, если можно, напишите мне на емайл, как её можно установить. Голову уже сломала, читаю на Гугле пояснения всякие, но не выходит у меня, чтобы код установить. Плагин ставила, но мне это как-то не очень, без кода смысла нет.

  • Андрей пишет:

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

    • Юрий пишет:

      Можно и так, можно сделать тестовый поддомен, можно на локальной версии тренироваться.

Оставить комментарий

Популярные записи
Получать новые статьи
Свежие статьи на сайте Ваш e-mail: