В сегодняшней статье мы рассмотрим CSS классы и их взаимосвязь с языком гипертекста. HTML - теги и CSS связаны напрямую. Эта взаимосвязь позволяет определить, как выглядит тег или как он ведет себя при использовании его имени в таблице стилей: tag { /* Внешний вид и функциональные изменения. */ name:value; } Code tag { /* Внешний вид и функциональные изменения. */ name:value; } Но зачастую требуется больше контроля, чем просто делать каждый экземпляр тега одинаковым. Если бы все ячейки HTML-таблицы были выполнены в одном стиле, это выглядело бы непрактично. К примеру, если вам нужно выделить определенные данные. Поэтому CSS предоставляет нам два разных определения, которые мы можем использовать - CSS классы и идентификаторы. CSS классы - когда их использовать Когда у вас на странице есть повторяющиеся элементы, которые должны иметь одинаковое оформление, нужно использовать CSS классы. Для этого необходимо выполнить два шага: Шаг 1 - добавить класс в HTML Чтобы повлиять на внешний вид HTML-страницы, вы должны сначала разметить элементы с атрибутомclass="class-name". Вот пример: <div class="box"> Контейнер 1 </div> <div class="box"> Контейнер 2 </div> <div class="box"> Контейнер 3 </div> Code <div class="box"> Контейнер 1 </div> <div class="box"> Контейнер 2 </div> <div class="box"> Контейнер 3 </div> В данном примере я хочу создать три контейнера одинакового размера. Возможно, я захочу запустить галерею изображений, или поместить в них изображения в качестве HTML - ссылки для перехода на другие страницы. При этом все контейнеры должны быть одинаковыми. Давайте посмотрим, что нужно сделать в нашем CSS: div.box{ height:200px; width:200px; text-align:center; font-size:14px; color:#090; background-color:#ddd; margin-right:10px; } Code div.box{ height:200px; width:200px; text-align:center; font-size:14px; color:#090; background-color:#ddd; margin-right:10px; } Чтобы задать правило для определенного тега с CSS классом, а не просто определить tagname{ }, мы используем tagname.classname{ }. Точка между tagname и classname является тем, что определяет правило как CSS класс. Также обратите внимание, что там нет пробелов. Если поставить пробел в правиле, то оно не будет работать так, как вы планировали. В этом примере использовалось свойство margin-right:10px. Эта строка гарантирует, что между тремя контейнерами сохраняется пространство в 10 пикселей. Свойство float со значение left обеспечивает, чтобы все контейнеры размещались слева. Такое сочетание должно дать вам что-то вроде этого: Если вы не укажете класс Чтобы показать вам, что ваш CSS класс изображения box применяется только там, где вы хотите, поместите дополнительный элемент <div> после «Контейнер 3»: <div> Контейнер 4 </div> Code <div> Контейнер 4 </div> Обновите страницу. Вы увидите, что ни одно из правил, установленных в div.box {} не применяется. Потому что вы не указали значение класса. Вот почему этот вариант использования классов CSS более гибкий, чем простое tagname{ }. На странице может быть много элементов <div>, но стили будут применяться только к тем, в которых задано соответствующее значение атрибута class! Использование более чем одного класса В современном веб-дизайне для элемента иметь только один класс CSS - редкость. Давайте возьмем наши три квадрата и посмотрим, что произойдет, если вы захотите перекрасить каждый из них. Чтобы указать, что вы хотите использовать в CSS несколько классов, нужно добавить следующий класс через пробел. Как здесь: <div class="box red"> Контейнер 1 </div> <div class="box green"> Контейнер 2 </div> <div class="box blue"> Контейнер 3 </div> Code <div class="box red"> Контейнер 1 </div> <div class="box green"> Контейнер 2 </div> <div class="box blue"> Контейнер 3 </div> Расположение каскадом Поскольку стили CSS используют каскадный порядок, вы размещаете свои классы по уровню важности. В данном случае мы хотим, чтобы класс class="box" применялся перед class="red". Иначе class="red"будет применяться до class="box". Надеюсь, это понятно! Изменим наш код CSS: 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{ background-color:#ccccff; } Code 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{ background-color:#ccccff; } Поскольку у каждого из трех контейнеров есть 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, действительно имеет значение, так что следите за этим.