Меню
Наши новости
Учебник CSS

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

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

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

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

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

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

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

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

Новости

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

Справочник CSS

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

Афоризмы

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

Видео Уроки


Популярные статьи
Наш опрос



Наши новости


РЕКЛАМА


ВАША РЕКЛАМА
17-03-2016, 18:01
Идентификаторы - «CSS»
Рейтинг:

Идентификатор (называемый также «ID
селектор») определяет уникальное имя элемента, которое
используется для изменения его стиля и обращения к нему через скрипты.


Синтаксис применения идентификатора следующий.


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

При описании идентификатора вначале указывается символ решётки (#), затем идет имя идентификатора. Оно должно начинаться с латинского символа и может содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах идентификатора недопустимо. В отличие от классов идентификаторы должны быть уникальны, иными словами,
встречаться в коде документа только один раз.


Обращение к идентификатору происходит аналогично классам, но в качестве ключевого
слова у тега используется атрибут id, значением
которого выступает имя идентификатора (пример 9.1). Символ решётки при
этом уже не указывается.


Пример 9.1. Использование идентификатора


HTML5CSS 2.1IECrOpSaFx


<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Идентификаторы</title>
  <style>
   #help {
    position: absolute; /* Абсолютное позиционирование */
    left: 160px; /* Положение элемента от левого края */
    top: 50px; /* Положение от верхнего края */
    width: 225px; /* Ширина блока */
    padding: 5px; /* Поля вокруг текста */
    background: #f0f0f0; /* Цвет фона */ 
   }
  </style>
 </head> 
 <body> 
  <div id="help">
   Этот элемент помогает в случае, когда вы находитесь в осознании того
   факта, что совершенно не понимаете, кто и как вам может помочь. Именно
   в этот момент мы и подсказываем, что помочь вам никто не сможет.
  </div>

 </body> 
</html>

В данном примере определяется стиль тега <div> через идентификатор с именем help (рис. 9.1).


 



Рис. 9.1. Результат применения идентификатора


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


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

Вначале указывается имя тега, затем без пробелов символ решётки и название
идентификатора. В примере 9.2 показано использование идентификатора применительно
к тегу <p>.


Пример 9.2. Идентификатор совместно с тегом


HTML5CSS 2.1IECrOpSaFx


<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Идентификаторы</title>
  <style>
   P {
    color: green; /* Зеленый цвет текста */
    font-style: italic; /* Курсивное начертание текста */
   }
   P#opa { 
    color: red; /* Красный цвет текста */
    border: 1px solid #666; /* Параметры рамки */
    background: #eee; /* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body> 
   <p>Обычный параграф</p> 
   <p id="opa">Параграф необычный</p>
 </body> 
</html>

Результат данного примера показан на рис. 9.2.


 


 


Рис. 9.2. Вид текста после применения стиля


В данном примере вводится стиль для тега <p> и для такого же тега, но с указанием идентификатора opa.



Вопросы для проверки


1. В каких ситуациях имена идентификаторов и классов можно называть одинаково?



  1. Никогда, это недопустимо.

  2. В любом случае.

  3. Только, если они применяются к одному элементу.

  4. Только, если они применяются к разным элементам.

  5. Только, если в коде они встречаются один раз.


2. Какое имя идентификатора написано неправильно?



  1. id_1id1

  2. a-a-a-1-1-1

  3. L0g0

  4. bla-bla

  5. кrevedko


3. Какая ошибка содержится в следующем коде?


<div class="frame1">

<div id="_nav"><a href="209.html">Подключение к MySQL через PHP</a></div>

<div id="_nav"><a href="213.html">Создание таблиц в phpMyAdmin</a></div>

<div id="_nav"><a href="211.html">Структура базы данных</a></div>

</div>



  1. Имя класса написано неверно.

  2. Имена идентификаторов написаны неверно.

  3. Неправильное вложение тегов.

  4. Повторяющиеся идентификаторы.

  5. Разные идентификаторы для однотипных элементов.


4. Как корректно задать стиль для тега <div> с идентификатором loom?



  1. loom { font-size: bold; }

  2. div { font-size: bold; }

  3. .loom { font-size: bold; }

  4. #loom# { font-size: bold; }

  5. #loom { font-size: bold; }



Ответы


1. В любом случае.


2. кrevedko


3. Повторяющиеся идентификаторы.


4. #loom { font-size: bold; }


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

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

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



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