Ответы на вопросы. CSS-конструирование

На начало урока 10
Возврат

Вопросы

CSS-конструирование

Ответы на вопросы

Чем элемент отличается от тега?
Ответ. Элемент — это объект гипертекстового документа. Он может иметь визуальное представление (абзац, заголовок) или нет (объекты LINK и META). Браузер использует элементы, для построения объектной модели документа. Построенная модель отображается на экране и используется браузером и скриптами (программами, подсоединённые к HTML-коду), для обработки событий (зависание курсора над элементом, щелчок на ссылке или рисованной кнопке…).
Теги — это средство языка HTML для описания элементов. Элемент может задаваться одиночным тегом (например, <HR>) или парным (например, ...).
Как можно задавать стилевые правила для конкретного элемента?
Ответ. Стилевые правила для конкретного элемента можно задавать в открывающем теге этого элемента при помощи атрибута style. Но даже в этом случае лучше описывать стили в отдельном файле, используя классы. Такой способ позволит изолировать структурную разметку от визуальной.
Изоляция стилевых описаний удобна при редактировании дизайна и способствует переносимости сайта с одних визуальных платформ на другие. При таком переносе достаточно заменить стилевой файл, ничего не меняя на страницах с HTML-кодом.
Как можно задавать стилевые правила для всех элементов с одинаковым именем тега?
Ответ. Для всех элементов с одинаковым именем тега стилевое определение удобно записывать с привязкой к тегу:
```
  
ИМЯ_ТЕГА 
{
  набор правил
}
```
Каким образом можно задавать разные свойства для элементов с одинаковым именем образующего тега?
Ответ. Для элементов с одинаковыми именами тегов можно задавать наборы стилевых определений в формате:
```
 
ИМЯ_ТЕГА.имя_класса 
{
 набор правил
}
```
То есть для задания класса нужно в заголовке определения к имени тега добавить через точку имя класса. Например, можно определить два класса абзацев — pj (выравнивание по ширине) и pr (выравнивание справа):
```
 
.pj {text-align:justify}
.pr {text-align:right}
```
Для связи стилевых классов с элементами используется атрибут class. Для абзацев, которые нужно выравнивать по ширине, теперь нужно записывать , а для абзацев с ровным правым краем — .
Каким образом можно задать стилевое свойство без привязки к тегу?
Ответ. Стилевые определения можно описывать без указания тега. В этом случае каждому определению присваивается имя, которое можно использовать для сопоставления заданного стиля конкретному элементу. Такие стилевые определения называются классами. Класс записывается следующим образом:
```
  
.имя
{
 свойство: величина;
 ...
 свойство: величина;
}
```
Иными словами, определение записывается, как обычно, но вместо указаний на теги в заголовке используется конструкция .имя. Например, можно определить стилевой класс с именем def:
```
  
.def
{
  font-size: 130%;
  border: 2px solid red;
  background: #FFFFCC;
  padding: 10px;
}
```
Как связать стилевое свойство, заданное без привязки к тегу, с конкретным тегом?
Ответ. Сопоставить класс с элементом можно при помощи атрибута class. В качестве значения атрибута указывается имя класса, например, .
Как задать стилевое определение, которое будет работать только при определенной комбинации вложенности элементов?
Ответ. Стилевое определение, которое будет работать только при определенной комбинации вложенности элементов, называется контекстным. Для задания контекстного определения нужно в его заголовке перечислить через пробелы имена тегов в порядке предполагаемой вложенности. Например, можно установить цвет для EM красным только для случая, когда этот элемент расположен внутри элемента P:
```
  
P EM {color:red}
```
Чем отличается элемент уровня блока от последовательного элемента?
Ответ. Элементы HTML можно разделить на два класса — последовательные элементы и элементы уровня блока.
Элемент-блок браузер выводит на экран с новой строки, перевода строки перед выводом последовательного элемента браузер не делает.
Абзац, горизонтальная линия и заголовок являются элементами уровня блока.
К последовательным элементам можно отнести, например, теги, выделяющие текст курсивом или жирностью.
Каким образом элементы DIV и SPAN отображаются на экране?
Ответ. Элементы DIV и SPAN не имеют никакого предопределённого образа на экране. Эти элементы служат для группировки других элементов и построения новых. Визуальный образ этим элементам задаётся набором стилевых правил.
Какую роль играют в языке CSS элементы DIV и SPAN?
Ответ. Эти элементы позволяют выделять в документе области и задавать для них специфические свойства.
Чем элемент DIV отличается от элемента SPAN?
Ответ. Разница между DIV и SPAN только в одном — первый элемент является элементом уровня блока, второй — последовательным элементом. Использование элемента SPAN позволяет задавать стилевые свойства даже отдельным словам и буквам.

Каким образом в языке CSS записываются комментарии?

Ответ. Комментарии в языке CSS записываются при помощи конструкции /* Это комментарий CSS */:

  
/* Выделенная область 
   ------------------ */
.def
{
  font-size: 130%;       /* Повышенный размер шрифта    */
  border: 2px solid red; /* Рамка красного цвета        */
  background: #FFFFCC;   /* Жёлтый фон                  */
  padding: 10px;         /* Отступ содержимого от рамки */
}

Комментарии можно записывать не только в стилевом файле или головной части HTML-кода, но и внутри значения атрибута style:

Возврат
На начало урока 10