Идентификаторы и классы - «CSS»
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Наш опрос



Наши новости

       
17-03-2016, 18:24
Идентификаторы и классы - «CSS»
Рейтинг:

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


Для начала перечислим характерные признаки этих селекторов.


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



  • В коде документа каждый идентификатор уникален и должен быть включён лишь один раз.

  • Имя идентификатора чувствительно к регистру.

  • Через метод getElementById можно получить доступ к элементу по его идентификатору и изменить свойства элемента.

  • Стиль для идентификатора имеет приоритет выше, чем у классов.


Классы



  • Классы могут использоваться в коде неоднократно.

  • Имена классов чувствительны к регистру.

  • Классы можно комбинировать между собой, добавляя несколько классов к одному тегу.


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


Если во время работы веб-страницы требуется изменить стиль некоторых элементов «на лету» или выводить внутри них какой-либо текст, с идентификаторами это делается гораздо проще. Обращение к элементу происходит через метод getElementById, параметром которого служит имя идентификатора. В примере 21.1 к текстовому полю формы добавляется идентификатор с именем userName, затем с помощью функции javascript делается проверка на то, что пользователь ввёл в это поле какой-либо текст. Если никакого текста нет, но кнопка Submit нажата, выводится сообщение внутри тега с идентификатором msg. Если всё правильно, данные формы отправляются по адресу, указанному атрибутом action.


Пример 21.1. Проверка данных формы


HTML5IECrOpSaFx


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Проверка формы</title>
  <script>
   function validForm(f) {
    user = document.getElementById("userName");
    if(user.value == "") 
     document.getElementById("msg").innerHTML = 'Пожалуйста, введите имя.';
    else f.submit();
   }
  </script>
 </head>
 <body>
  <form action="handler.php" onsubmit="validForm(this); return false">
   <p>Введите свое имя:</p>
   <div id="msg"></div>
   <p><input type="text" id="userName" name="user"></p>
   <p><input type="submit"></p>
  </form>
 </body>
</html>

Поскольку идентификаторы чувствительны к регистру, имеет значение их однотипное написание. Внутри тега <input> используется имя userName, его же следует указать и в методе getElementById. При ошибочном написании, например, username, скрипт перестанет работать, как требуется.


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


Пример 21.2. Сочетание стилей


HTML5CSS 2.1IECrOpSaFx


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Идентификаторы</title>
  <style>
   #A, .a {
    border: none;
    background: #f0f0f0;
    color: green;
    padding: 5px;
   }
   .b {
    border: 1px solid red;
    color: red;
    padding: 0;
   }
  </style>
 </head>
 <body>
  <p id="A" class="b">Стиль идентификатора</p>
  <p class="a b">Стиль классов a и b</p>
  <p class="b">Стиль класса b</p>
 </body>
</html>


Для первого абзаца устанавливается стиль от идентификатора A и класса b, свойства которых противоречат друг другу. При этом стиль класса будет игнорироваться из-за особенностей каскадирования и специфичности. Для второго абзаца стиль задаётся через классы a и b одновременно. Приоритет у классов одинаковый, значит, в случае противоречия будут задействованы те свойства, которые указаны в стиле ниже. К последнему абзацу применяется стиль только от класса b. На рис. 21.1 показан результат применения стилей.


 



Рис. 21.1. Использование стилей для текста


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


Классы


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


Пример 21.3. Использование классов


.r, .b { 
padding: 10px;
background: #FCE3EE;
}
.r {
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px
}
.b { border: 1px solid #ED1C24; }
.n { border: none; }[/code]

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


Периодически поднимается спор о целесообразности использования идентификаторов в вёрстке. Основной довод состоит в том, что идентификаторы предназначены для доступа и управления элементами веб-страницы с помощью скриптов, а для изменения стилей элементов должны применяться исключительно классы. В действительности нет разницы, через что задавать стили, но следует помнить о некоторых особенностях идентификаторов и классов, а также подводных камнях, которые могут поджидать разработчиков. Для начала перечислим характерные признаки этих селекторов. Идентификаторы В коде документа каждый идентификатор уникален и должен быть включён лишь один раз. Имя идентификатора чувствительно к регистру. Через метод getElementById можно получить доступ к элементу по его идентификатору и изменить свойства элемента. Стиль для идентификатора имеет приоритет выше, чем у классов. Классы Классы могут использоваться в коде неоднократно. Имена классов чувствительны к регистру. Классы можно комбинировать между собой, добавляя несколько классов к одному тегу. Идентификаторы Если во время работы веб-страницы требуется изменить стиль некоторых элементов «на лету» или выводить внутри них какой-либо текст, с идентификаторами это делается гораздо проще. Обращение к элементу происходит через метод getElementById, параметром которого служит имя идентификатора. В примере 21.1 к текстовому полю формы добавляется идентификатор с именем userName, затем с помощью функции javascript делается проверка на то, что пользователь ввёл в это поле какой-либо текст. Если никакого текста нет, но кнопка Submit нажата, выводится сообщение внутри тега с идентификатором msg. Если всё правильно, данные формы отправляются по адресу, указанному атрибутом action. Пример 21.1. Проверка данных формы HTML5 IE Cr Op Sa Fx Поскольку идентификаторы чувствительны к регистру, имеет значение их однотипное написание. Внутри тега используется имя userName, его же следует указать и в методе getElementById. При ошибочном написании, например, username, скрипт перестанет работать, как требуется. В примере выше стили вообще никакого участия не принимали, сами идентификаторы требовались для работы скриптов. При использовании в CSS следует учитывать, что идентификаторы обладают высоким приоритетом по сравнению с классами. Поясним это на примере 21.2. Пример 21.2. Сочетание стилей HTML5 CSS 2.1 IE Cr Op Sa Fx Для первого абзаца устанавливается стиль от идентификатора A и класса b, свойства которых противоречат друг другу. При этом стиль класса будет игнорироваться из-за особенностей каскадирования и специфичности. Для второго абзаца стиль задаётся через классы a и b одновременно. Приоритет у классов одинаковый, значит, в случае противоречия будут задействованы те свойства, которые указаны в стиле ниже. К последнему абзацу применяется стиль только от класса b. На рис. 21.1 показан результат применения стилей. Рис. 21.1. Использование стилей для текста Специфичность в каскадировании начинает играть роль при разрастании стилевого файла за счёт увеличения числа селекторов, что характерно для больших и сложных сайтов. Чтобы стиль применялся корректно, необходимо грамотно управлять специфичностью селекторов путем использования идентификаторов, повышения важности через !important, порядком следования свойств. Классы Поскольку к элементу одновременно можно добавлять более одного класса, это позволяет завести несколько универсальных классов со стилевыми свойствами на все случаи и включать их к тегам при необходимости. Предположим, что большинство блоков на странице имеют закругленные уголки, причём некоторые блоки ещё имеют красную рамку, а некоторые нет. В этом случае можем написать такой стиль (пример 21.3). Пример 21.3. Использование классов

Теги: CSS, Идентификаторы классы

Просмотров: 9 137
Комментариев: 1:   17-03-2016, 18:24
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме: