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

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

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

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

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

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

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

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

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

Новости

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

Справочник CSS

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

Афоризмы

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

Видео Уроки


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



Наши новости

Поддержка сайта на joomla
Форум поддержки пользователей. Техническая поддержка
aitishnik.ru

Кровать для дома
Фотографии кроватей мебели для спальни
dekonte.ru


РЕКЛАМА


ВАША РЕКЛАМА
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, Идентификаторы

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

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



Другие новости по теме:
Комментарии для сайта Cackle