Ваш ключ: необходима авторизация | MyProxy - бесплатный обменник валидных прокси между пользователями форума.

Использование CSS классов – удобный путеводитель.

Тема в разделе Сайтостроительство, создана пользователем Hangman666, 13 июл 2016.

Войдите для ответа
  1. Hangman666 Хранитель Идей

    Hangman666
    Статус:
    Вне сети
    Сообщения:
    474
    Симпатии:
    271
    Регистрация:
    10.03.16
    В сегодняшней статье мы рассмотрим CSS классы и их взаимосвязь с языком гипертекста. HTML - теги и CSS связаны напрямую. Эта взаимосвязь позволяет определить, как выглядит тег или как он ведет себя при использовании его имени в таблице стилей:
    Код:
    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>

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

    Давайте посмотрим, что нужно сделать в нашем CSS:
    Код:
    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 обеспечивает, чтобы все контейнеры размещались слева.

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

    [​IMG]
    Если вы не укажете класс
    Чтобы показать вам, что ваш CSS класс изображения box применяется только там, где вы хотите, поместите дополнительный элемент <div> после «Контейнер 3»:
    Код:
    <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>

    Расположение каскадом
    Поскольку стили 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;
    }

    Поскольку у каждого из трех контейнеров есть CSS класс .box, к ним всем применяются свойства, прописанные в div.box. Но к каждому

    применяется также дополнительный класс (red, green, или blue). Конечный результат:
    [​IMG]
    Примечание: несмотря на то, что 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, действительно имеет значение, так что следите за этим.
     
    13 июл 2016 #1
Top