Управление дизайном сайта по средством CSS

Для улучшения внешнего вида сайта по его конкретному назначению, одной HTML разметки недостаточно. Основное достоинство CSS (каскадная таблица стилей) заключается в возможности смешивать и сопоставлять различные правила, которые значительно улучшает внешний вид сайта и наделяет его особыми стилистическими характеристиками в зависимости от тематики сайта. Таким образом CSS является, качественным дополнением HTML разметки.

responsive grid

Из чего состоит CSS

1. HTML-селектор – В каскадных таблицах стилей используется теги для переопределения результата действий. Например, если к тегу H1 применяются определенные стили (цвет, размер шрифта, и м.д.), то он уже выступает в качестве селектора с набором собственных характеристик.

Тег { свойство1: значение; свойство2: значение; }

H1{
font-size:36px;
color:#444;
text-transform:uppercase;
text-align:center;
font-family: arial;
}

Результат:

Мой заголовок

2. Классы в CSS.Существуют огромное множество классов с набором разных характеристик. Класс можно назначить как одному элементу, так и на группе элементов.

Тег.Имя класса { свойство1: значение; свойство2: значение; }

div.class{
background: #FF6652;
padding: 25px 0;
border: 1px solid #CC1800;
color: #fff;
text-align: center;
font-size: 22px;
}

Результат:

Стили для текста

Обычно используют классы без указания тега, что значительно упрощает написание правила:

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

Результат будет такой же как и в предыдущем примере.

Также можно назначить несколько классов, к любому тегу, для стилевых свойств, но уже с разным значением.

2. Индификатор или ID-селектор.Существуют огромное множество классов с набором разных характеристик. Класс можно назначить как одному элементу, так и на группе элементов.Его можно использовать как вместе с классом так и раздельно. Главное, чтобы индификатор которой назначается селектору был только один.

#Имя идентификатора { свойство1: значение; свойство2: значение; }

#title{
font-size:36px;
color:#444;
text-transform:uppercase;
text-align:center;
}

Результат:

Назначем ID заголовку

3. Дочерний сектор — это тег, который в структуре элементов находится внутри родительского элемента.Через главный элемент можно назначить стиль любому тегу, который находится в родительском теге.

Селектор 1 > Селектор 2 { Описание правил стиля }

ul > li{
color:green;
text-align: left;
list-style-type: none;
font-size: 18px;
padding: 20px;
}

Результат:

  • Пункт меню
  • Осуществляется применение стиля к селектору 2, только в том случае, если он является дочерним элементом для селектора 1.

    responsive grid

    5. Селекторы атрибутов — влияет на функциональность тега, если ему назначить атрибут с определенными свойствами. Например, назначение тегу input атрибут type. Простой селектор атрибута.

    [атрибут] { Описание правил стиля }

    input[type="text"]{
    font-size: 12px;
    color: #ccc;
    border-radius: 6px;
    border: 2px solid #FF6652;
    box-shadow: 1px 1px 3px #222;
    padding: 5px;
    }

    Результат:

    Наследование в CSS

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

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

    Каскадирование –основная особенность в стилях CSS

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

    Стили браузера имеют самую низкую иерархию, чтобы придать свойству элемента наиболее высокий приоритет мы используем !important в конце данного свойства. Таким образом, мы даем, понять браузеру какое правило следует подключить в первую очередь.

    Главная задача CSS сделать сайт стилистики неповторимым без особых нагрузок на сервер. За последнее время каскадные стили были существенно модернизованы и продолжают обновляется, таким образом улучшая качество самого кода.

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