CSS вопросы : Вопрос 1 : 20

Каким образом средствами CSS задается тень для HTML-элементов?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Согласно консорциуму W3C в рекомендации CSS3 для задания тени элментам HTML используется свойство box-shadow.

Синтаксис: box-shadow: none | [сдвиг по x] [сдвиг по y] [радиус размытия] [растяжение] [цвет]

Значения:
none - Отменяет добавление тени. 
inset - Тень выводится внутри элемента. Необязательный параметр. 
сдвиг по x - Смещение тени по горизонтали относительно элемента. 
Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
сдвиг по y - Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх. Обязательный параметр.
размытие - Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.
растяжение - Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.
цвет - Цвет тени в любом доступном CSS формате, по умолчанию тень черная. Необязательный параметр. 

Допускается указывать несколько теней, разделяя их параметры между собой запятой. Учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу.

Каким образом средствами CSS задается тень для HTML-элементов?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Согласно консорциуму W3C в рекомендации CSS3 для задания тени элментам HTML используется свойство box-shadow.

Синтаксис: box-shadow: none | [сдвиг по x] [сдвиг по y] [радиус размытия] [растяжение] [цвет]

Значения:
none - Отменяет добавление тени. 
inset - Тень выводится внутри элемента. Необязательный параметр. 
сдвиг по x - Смещение тени по горизонтали относительно элемента. 
Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
сдвиг по y - Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх. Обязательный параметр.
размытие - Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.
растяжение - Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.
цвет - Цвет тени в любом доступном CSS формате, по умолчанию тень черная. Необязательный параметр. 

Допускается указывать несколько теней, разделяя их параметры между собой запятой. Учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу.

Какое CSS свойство позволяет закруглять углы блоков?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Это свойство называется border-radius. Самый простой вариант использования, закругление краёв блоков. Пример: border-radius: 10px;

Какое CSS свойство позволяет закруглять углы блоков?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Это свойство называется border-radius. Самый простой вариант использования, закругление краёв блоков. Пример: border-radius: 10px;

Как накладывать элементы друг на друга.

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative. Вот код примера с картинками:

#element1 {
    position: absolute;
    left: 100px;
    top: 100px;
    z-index: 1;
    }

#element2 {
    position: absolute;
    left: 115px;
    top: 115px;
    z-index: 2;
    }

#element3 {
    position: absolute;
    left: 130px;
    top: 130px;
    z-index: 3;
}
 

Как накладывать элементы друг на друга.

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative. Вот код примера с картинками:

#element1 {
    position: absolute;
    left: 100px;
    top: 100px;
    z-index: 1;
    }

#element2 {
    position: absolute;
    left: 115px;
    top: 115px;
    z-index: 2;
    }

#element3 {
    position: absolute;
    left: 130px;
    top: 130px;
    z-index: 3;
}
 

Какие преимущества и недостатки разных способов установки стилей?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Внешние таблицы стилей
Преимущества:
1. Может контролировать стили нескольких документов одновременно.
2. Классы могут быть созданы для использования в многих типах HTML элементов нескольких документов.
3. Селекторы и группирование могут быть применены к стилям в сложных контекстах.
Недостатки:
1. Необходимо для каждого документа подгружать отдельно внешнюю таблицу стилей.
2. Отрисовка документа может быть приостановлена, пока не загрузятся внешние стили.
3. Становится громоздким, если объявлено небольшое количество стилей.

Встроенная таблица стилей
Преимущества:
1. Созданные классы могут использоваться многими тегами документа.
2. Селекторы и группирование могут быть применены к стилям в сложных контекстах.
3. Не требуется дополнительных загрузок для получения информации о стилях.
Недостатки:
1. Этот метод не может контролировать стили многих документов одновременно.

Встроенные(inline) стили
Преимущества:
1. Полезны для маленького количества стилей.
2. Могут перезаписывать правила, наложенные другими стилями.
Недостатки:
1. Не отделяют вид от содержания (главную цель SGML/HTML).
2. Не могут контролировать стили нескольких документов одновременно.
3. Селекторы и группирование не могут быть применены к стилям в сложных контекстах.

Какие преимущества и недостатки разных способов установки стилей?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Внешние таблицы стилей
Преимущества:
1. Может контролировать стили нескольких документов одновременно.
2. Классы могут быть созданы для использования в многих типах HTML элементов нескольких документов.
3. Селекторы и группирование могут быть применены к стилям в сложных контекстах.
Недостатки:
1. Необходимо для каждого документа подгружать отдельно внешнюю таблицу стилей.
2. Отрисовка документа может быть приостановлена, пока не загрузятся внешние стили.
3. Становится громоздким, если объявлено небольшое количество стилей.

Встроенная таблица стилей
Преимущества:
1. Созданные классы могут использоваться многими тегами документа.
2. Селекторы и группирование могут быть применены к стилям в сложных контекстах.
3. Не требуется дополнительных загрузок для получения информации о стилях.
Недостатки:
1. Этот метод не может контролировать стили многих документов одновременно.

Встроенные(inline) стили
Преимущества:
1. Полезны для маленького количества стилей.
2. Могут перезаписывать правила, наложенные другими стилями.
Недостатки:
1. Не отделяют вид от содержания (главную цель SGML/HTML).
2. Не могут контролировать стили нескольких документов одновременно.
3. Селекторы и группирование не могут быть применены к стилям в сложных контекстах.

Что такое специфичность в CSS?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

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

Специфичность считается по селектору. Правила подсчета очень просты: 
- каждый присутствующий в селекторе идентификатор добавляет к специфичности 0,1,0,0; 
- каждый класс, псевдокласс или атрибут добавляет к специфичности 0,0,1,0; 
- каждый элемент или псевдоэлемент добавляет к специфичности 0,0,0,1; 
Универсальный селектор и комбинаторы не учитываются. 

1 p {/*какие-то определения */} — одинокий селектор типа. Специфичность 0,0,0,1. 
2 div p {/*какие-то определения */} — два селектора типа. Специфичность 0,0,0,2. 
3 p.note {/*какие-то определения */} — селектор типа и класса. Специфичность 0,0,1,1. 
4 form.feedbackForm input[type="text"] {/*какие-то определения */} — два селектора типа, один класса и один атрибута. Специфичность 0,0,2,2. 
5 #conten a:hover {/*какие-то определения */} — селектор идентификатора, типа и псевдокласс. Специфичность 0,1,1,1. 

Кто победил? 
Сравниваются специфичности очень просто. Какое число больше, то определение и выиграло. 
Например: 
0,0,1,4 больше, чем 0,0,1,2. 
0,1,2,0 больше, чем 0,0,2,1. 
Встроенный стиль всегда перебивает стиль заданный во внешней или вложенной таблице стилей, так как его специфичность равна 1,0,0,0

Что такое специфичность в CSS?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

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

Специфичность считается по селектору. Правила подсчета очень просты: 
- каждый присутствующий в селекторе идентификатор добавляет к специфичности 0,1,0,0; 
- каждый класс, псевдокласс или атрибут добавляет к специфичности 0,0,1,0; 
- каждый элемент или псевдоэлемент добавляет к специфичности 0,0,0,1; 
Универсальный селектор и комбинаторы не учитываются. 

1 p {/*какие-то определения */} — одинокий селектор типа. Специфичность 0,0,0,1. 
2 div p {/*какие-то определения */} — два селектора типа. Специфичность 0,0,0,2. 
3 p.note {/*какие-то определения */} — селектор типа и класса. Специфичность 0,0,1,1. 
4 form.feedbackForm input[type="text"] {/*какие-то определения */} — два селектора типа, один класса и один атрибута. Специфичность 0,0,2,2. 
5 #conten a:hover {/*какие-то определения */} — селектор идентификатора, типа и псевдокласс. Специфичность 0,1,1,1. 

Кто победил? 
Сравниваются специфичности очень просто. Какое число больше, то определение и выиграло. 
Например: 
0,0,1,4 больше, чем 0,0,1,2. 
0,1,2,0 больше, чем 0,0,2,1. 
Встроенный стиль всегда перебивает стиль заданный во внешней или вложенной таблице стилей, так как его специфичность равна 1,0,0,0

Какая разница между значениями 0 и auto в свойстве margin? Приведите примеры.

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

В вертикальных полях, auto всегда означает 0. В горизонтальных полях, auto означает 0 только тогда, если свойство width также auto.
Для данного HTML:

<html> 
    <body> 
        <p></p> 
    </body> 
</html> 


Пример 1: auto свойство width.

body { width: 30em; } 
p { width:auto; margin-left:auto; margin-right:auto; } 


Из того, что свойство width auto, поля будут нулевыми. Ширина p тогда будет 30em, без полей.

Пример 2: два auto поля

body { width: 30em; } 
p { width: 20em; margin-left: auto; margin-right: auto; } 


Ширина p 20em и оставшиеся 10em будут поделены между правым и левым полями по 5em.

Пример 3: одно auto поле

body { width: 30em; } 
p { width: 20em; margin-left: 2em; margin-right: auto; } 


В этом случае, ширина параграфа p 20em и поле слева 2em. Поскольку общая длина 30em правое поле будет 8em.
Имейте ввиду, что значение width по-умолчанию равно auto, поэтому установка полей в auto имеет смысл, если только устанавливается width в что-то отличное от auto.

Какая разница между значениями 0 и auto в свойстве margin? Приведите примеры.

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

В вертикальных полях, auto всегда означает 0. В горизонтальных полях, auto означает 0 только тогда, если свойство width также auto.
Для данного HTML:

<html> 
    <body> 
        <p></p> 
    </body> 
</html> 


Пример 1: auto свойство width.

body { width: 30em; } 
p { width:auto; margin-left:auto; margin-right:auto; } 


Из того, что свойство width auto, поля будут нулевыми. Ширина p тогда будет 30em, без полей.

Пример 2: два auto поля

body { width: 30em; } 
p { width: 20em; margin-left: auto; margin-right: auto; } 


Ширина p 20em и оставшиеся 10em будут поделены между правым и левым полями по 5em.

Пример 3: одно auto поле

body { width: 30em; } 
p { width: 20em; margin-left: 2em; margin-right: auto; } 


В этом случае, ширина параграфа p 20em и поле слева 2em. Поскольку общая длина 30em правое поле будет 8em.
Имейте ввиду, что значение width по-умолчанию равно auto, поэтому установка полей в auto имеет смысл, если только устанавливается width в что-то отличное от auto.

Дайте определение понятиям: "незамещаемый/замещаемый элемент", "блочный/строчный элемент".

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Незамещаемый элемент

Содержимое такого элемента включено в документ. Например, многострочное поле ввода (textarea) или абзац (p) являются незамещаемыми, так как их текстовое содержимое находится в документе.

Замещаемый элемент

Элемент, который служит полем подстановки для чего-то другого. Классический пример такого элемента - изображение (img), подставляемое в поток документа в то место, где находится элемент img. Большинство элементов input относятся к замещаемым (например <input type='radio' >)

Блочный элемент

По-умолчанию, блочными являются абзацы (p), заголовки (h1..6), элементы div. Эти элементы генерируют переводы строк перед и после своих блоков, поэтому блочные элементы размещаются по вертикали. Элемент можно принудительно сделать блочным, установив ему стиль display:block.

Строчный элемент

Например, элементы span или strong. Они не генерируют переводов строк вокруг себя и являются потомками блочных. Это означает, что можно помещать строковые элементы в блочные, но не наоборот. Строковый элемент можно задать свойством CSS display:inline.

Дайте определение понятиям: "незамещаемый/замещаемый элемент", "блочный/строчный элемент".

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Незамещаемый элемент

Содержимое такого элемента включено в документ. Например, многострочное поле ввода (textarea) или абзац (p) являются незамещаемыми, так как их текстовое содержимое находится в документе.

Замещаемый элемент

Элемент, который служит полем подстановки для чего-то другого. Классический пример такого элемента - изображение (img), подставляемое в поток документа в то место, где находится элемент img. Большинство элементов input относятся к замещаемым (например <input type='radio' >)

Блочный элемент

По-умолчанию, блочными являются абзацы (p), заголовки (h1..6), элементы div. Эти элементы генерируют переводы строк перед и после своих блоков, поэтому блочные элементы размещаются по вертикали. Элемент можно принудительно сделать блочным, установив ему стиль display:block.

Строчный элемент

Например, элементы span или strong. Они не генерируют переводов строк вокруг себя и являются потомками блочных. Это означает, что можно помещать строковые элементы в блочные, но не наоборот. Строковый элемент можно задать свойством CSS display:inline.

Как ставить видео в HTML5.

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

<!DOCTYPE HTML> 
 <html> 
 <body> 
 
 <video width="320" height="240" controls="controls"> 
   <source src="movie.mp4" type="video/mp4" /> 
   <source src="movie.ogg" type="video/ogg" /> 
   <source src="movie.webm" type="video/webm" /> 
 Ваш браузер не поддерживает этот тег 
 </video> 
 
 </body> 
 </html>  

Как ставить видео в HTML5.

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

<!DOCTYPE HTML> 
 <html> 
 <body> 
 
 <video width="320" height="240" controls="controls"> 
   <source src="movie.mp4" type="video/mp4" /> 
   <source src="movie.ogg" type="video/ogg" /> 
   <source src="movie.webm" type="video/webm" /> 
 Ваш браузер не поддерживает этот тег 
 </video> 
 
 </body> 
 </html>  

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

В примере:
Серый блок -- юзер-ориентированное содержимое.
Желтый -- поисково-ориентированное содержимое.

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>title</title> 
    <style> 
    * { 
        margin: 0; 
        padding: 0; 
    } 
    #content { 
        position: relative; 
        margin: 0 auto; 
        width: 800px; 
        background-color:red; 
    } 
    #SEO-box { 
        bottom: 0px; 
        overflow: hidden; 
        position: absolute; 
        width: 100%; 
        background-color: green; 
    } 
    #SEO-delimiter{ 
        margin-top: 100px; 
    } 
    #SEO-content { 
        height:100px; 
        background-color: yellow; 
    } 
    #page-content { 
        width: 100%; 
        height: 300px; 
        background-color: silver; 
    } 
 
    </style> 
</head> 
<body> 
    <div id="content"> 
        <div id="SEO-box"> 
            <div id="SEO-content"></div> 
        </div> 
        <div id="page-content"></div> 
        <div id="SEO-delimiter"></div> 
    </div> 
</body> 
</html> 

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

В примере:
Серый блок -- юзер-ориентированное содержимое.
Желтый -- поисково-ориентированное содержимое.

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>title</title> 
    <style> 
    * { 
        margin: 0; 
        padding: 0; 
    } 
    #content { 
        position: relative; 
        margin: 0 auto; 
        width: 800px; 
        background-color:red; 
    } 
    #SEO-box { 
        bottom: 0px; 
        overflow: hidden; 
        position: absolute; 
        width: 100%; 
        background-color: green; 
    } 
    #SEO-delimiter{ 
        margin-top: 100px; 
    } 
    #SEO-content { 
        height:100px; 
        background-color: yellow; 
    } 
    #page-content { 
        width: 100%; 
        height: 300px; 
        background-color: silver; 
    } 
 
    </style> 
</head> 
<body> 
    <div id="content"> 
        <div id="SEO-box"> 
            <div id="SEO-content"></div> 
        </div> 
        <div id="page-content"></div> 
        <div id="SEO-delimiter"></div> 
    </div> 
</body> 
</html> 

Для чего необходим файл reset.css на сайте?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Каждый html – элемент изначально имеет определенный набор свойств и значений, определяемых браузером. Они могут как совпадать, так и различаться.

Чтобы не зависеть от этого, рекомендуется использовать файл reset.css (он может называться по-разному), который содержит обнуленные значения всех свойств тегов.

Достоинства: во всех браузерах все элементы будут иметь одинаковые начальные свойства.

Недостатки: приходится повторно определять большее количество свойств.

Пример (фрагмент):

html, body, div, span, p, h1, h2, h3, h4, h5, h6, … { 
    margin: 0; 
    padding: 0; 
    border: 0 none; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
    text-decoration: none; 
}  

Для чего необходим файл reset.css на сайте?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Каждый html – элемент изначально имеет определенный набор свойств и значений, определяемых браузером. Они могут как совпадать, так и различаться.

Чтобы не зависеть от этого, рекомендуется использовать файл reset.css (он может называться по-разному), который содержит обнуленные значения всех свойств тегов.

Достоинства: во всех браузерах все элементы будут иметь одинаковые начальные свойства.

Недостатки: приходится повторно определять большее количество свойств.

Пример (фрагмент):

html, body, div, span, p, h1, h2, h3, h4, h5, h6, … { 
    margin: 0; 
    padding: 0; 
    border: 0 none; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
    text-decoration: none; 
}  

Что такое позиционирование элементов? Какие виды позиционирования Вы знаете?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

В блочной верстке страниц: каждый элемент это блок или иначе прямоугольник. Со своей высотой и шириной. И расставляя такие блоки по местам (как кирпичи) мы получаем готовый дизайн.

Позиционирование это инструмент для расставления этих блоков, так как это нужно вам. Вот собственно и все.

Существует пять видов позиционирования:
- absolute. Указывает, что элемент абсолютно позиционирован. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.
- fixed. Похож на absolute, но в отличие от него привязывается к указанной точке на экране и не меняет своего положения даже при пролистывании веб-страницы.
- relative. Положение элемента устанавливается относительно его начального места. Применение атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
- static. Элементы отображаются как обычно.
- inherit. Значение должно быть унаследовано от элемента родителя

Что такое позиционирование элементов? Какие виды позиционирования Вы знаете?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

В блочной верстке страниц: каждый элемент это блок или иначе прямоугольник. Со своей высотой и шириной. И расставляя такие блоки по местам (как кирпичи) мы получаем готовый дизайн.

Позиционирование это инструмент для расставления этих блоков, так как это нужно вам. Вот собственно и все.

Существует пять видов позиционирования:
- absolute. Указывает, что элемент абсолютно позиционирован. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.
- fixed. Похож на absolute, но в отличие от него привязывается к указанной точке на экране и не меняет своего положения даже при пролистывании веб-страницы.
- relative. Положение элемента устанавливается относительно его начального места. Применение атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
- static. Элементы отображаются как обычно.
- inherit. Значение должно быть унаследовано от элемента родителя

Создать трехколоночный макет с фиксироваными боковыми блоками и резиновым центральным.

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

<div class='left'> 
left content 
</div> 
<div class='right'> 
right content 
</div> 
<div class='center'> 
main content 
</div> 

    .left { float:left; width:200px; height:100px; background:#008b8b; } 
    .right { float:right; width:200px; height:100px; background:#008b8b; } 
    .center { margin:0 200px; height:100px; background:#bdb76b; } 

Обратите внимание, что правый блок в HTML стоит раньше центрального.

Не знаю в чем дело, но почему-то никто на этот вопрос мне не может ответить...

Создать трехколоночный макет с фиксироваными боковыми блоками и резиновым центральным.

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

<div class='left'> 
left content 
</div> 
<div class='right'> 
right content 
</div> 
<div class='center'> 
main content 
</div> 

    .left { float:left; width:200px; height:100px; background:#008b8b; } 
    .right { float:right; width:200px; height:100px; background:#008b8b; } 
    .center { margin:0 200px; height:100px; background:#bdb76b; } 

Обратите внимание, что правый блок в HTML стоит раньше центрального.

Не знаю в чем дело, но почему-то никто на этот вопрос мне не может ответить...

Поворот элемента, используя только CSS, поддерживают уже многие браузеры. Как Вы поворачиваете объекты?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

span.smile.right { 
-webkit-transform: rotate(-90deg); /* Chrome y Safari */ 
-moz-transform: rotate(-90deg); /* Firefox */ 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */ 
-o-transform: rotate(-90deg); /* Opera */ 
display: inline-block; padding-left: 8px; vertical-align: text-top; text-indent: 0px;} 

Поворот элемента, используя только CSS, поддерживают уже многие браузеры. Как Вы поворачиваете объекты?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

span.smile.right { 
-webkit-transform: rotate(-90deg); /* Chrome y Safari */ 
-moz-transform: rotate(-90deg); /* Firefox */ 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */ 
-o-transform: rotate(-90deg); /* Opera */ 
display: inline-block; padding-left: 8px; vertical-align: text-top; text-indent: 0px;} 

Что такое CSS font stack (последовательность шрифтов)?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

В свойстве CSS font-family возможно указание нескольких наименований шрифтов через запятую. Браузер последовательно перебирает указанные шрифты до нахождения первого поддерживаемого (т.е. того, который браузер сможет использовать). Термин "font stack" и означает список указанных шрифтов.

Хороший font stack подразумевает правильно подобранный список наименований шрифтов, имеющихся на большинстве платформ (Windows, Linux, MacOS), расположенных в порядке убывания похожести начертания. Слегка гипертрофированный пример:

font-family:  
     "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Helvetica,Verdana,sans-serif 


Дизайнер работает на MacOS, поэтому указывает "Lucida Grande". Ближайший аналог для Windows - "Lucida Sans Unicode", для Linux - "DejaVu Sans". Если таких шрифтов вдруг не окажется, то можно попробовать Helvetica или Verdana (но не Tahoma или Arial). В совсем критическом случае браузеру будет разрешено выбрать любой шрифт начертания sans-serif, но никак не Times New Roman или Courier New.

Что такое CSS font stack (последовательность шрифтов)?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

В свойстве CSS font-family возможно указание нескольких наименований шрифтов через запятую. Браузер последовательно перебирает указанные шрифты до нахождения первого поддерживаемого (т.е. того, который браузер сможет использовать). Термин "font stack" и означает список указанных шрифтов.

Хороший font stack подразумевает правильно подобранный список наименований шрифтов, имеющихся на большинстве платформ (Windows, Linux, MacOS), расположенных в порядке убывания похожести начертания. Слегка гипертрофированный пример:

font-family:  
     "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Helvetica,Verdana,sans-serif 


Дизайнер работает на MacOS, поэтому указывает "Lucida Grande". Ближайший аналог для Windows - "Lucida Sans Unicode", для Linux - "DejaVu Sans". Если таких шрифтов вдруг не окажется, то можно попробовать Helvetica или Verdana (но не Tahoma или Arial). В совсем критическом случае браузеру будет разрешено выбрать любой шрифт начертания sans-serif, но никак не Times New Roman или Courier New.

Что такое альтернативная таблица стилей?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Альтернативная таблица стилей - таблица, определяющая стили, которые будут использованы взамен стилей по-умолчанию или предпочтительных стилей. Например, таких:

<link rel='stylesheet' type='text/css' href="style.css" /> 


Альтернативные стили позволяют пользователю выбор любого из них - очень удобный способ определения стилей, зависимых от устройства отображения(монитор, принтер). Каждая группа альтернативных стилей должна иметь уникальный title:

<link rel="Alternate Stylesheet" href="style1.css" 
type="text/css" title="Style for screen" media="screen" /> 
<link rel="Alternate Stylesheet" href="style2.css" 
type="text/css" title="Style for printing" media="print" /> 

Что такое альтернативная таблица стилей?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Альтернативная таблица стилей - таблица, определяющая стили, которые будут использованы взамен стилей по-умолчанию или предпочтительных стилей. Например, таких:

<link rel='stylesheet' type='text/css' href="style.css" /> 


Альтернативные стили позволяют пользователю выбор любого из них - очень удобный способ определения стилей, зависимых от устройства отображения(монитор, принтер). Каждая группа альтернативных стилей должна иметь уникальный title:

<link rel="Alternate Stylesheet" href="style1.css" 
type="text/css" title="Style for screen" media="screen" /> 
<link rel="Alternate Stylesheet" href="style2.css" 
type="text/css" title="Style for printing" media="print" /> 

Каким образом с помощью CSS можно задать прозрачность для элементов HTML?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Согласно консорциуму W3C в рекомендации CSS3 для применения эффекта прозрачности к элементам страницы используется свойство opacity. Значением данного свойства является число в диапазоне от 0.0 до 1.0. При значении равном нулю элемент становится полностью прозрачным, а при значении равном единице, соответственно, совсем не прозрачным. Свойство можно применять к любым элементам страницы.

Пример:

div.content 
{ 
width: 600px; 
background-color: #051C49; 
opacity: 0.7; /*  можно записать и так opacity: .7; */ 
} 


К сожалению, данное свойство поддерживается не всеми браузерами.
Для IE используют

filter: alpha(opacity=50); 
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); 

Каким образом с помощью CSS можно задать прозрачность для элементов HTML?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Согласно консорциуму W3C в рекомендации CSS3 для применения эффекта прозрачности к элементам страницы используется свойство opacity. Значением данного свойства является число в диапазоне от 0.0 до 1.0. При значении равном нулю элемент становится полностью прозрачным, а при значении равном единице, соответственно, совсем не прозрачным. Свойство можно применять к любым элементам страницы.

Пример:

div.content 
{ 
width: 600px; 
background-color: #051C49; 
opacity: 0.7; /*  можно записать и так opacity: .7; */ 
} 


К сожалению, данное свойство поддерживается не всеми браузерами.
Для IE используют

filter: alpha(opacity=50); 
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); 

Назовите основные методы очистки потока в CSS. Опишите их достоинства и недостатки.

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

1. overflow: hidden или auto


.overflow {
        overflow: hidden;
}


overflow создает новый контекст форматирования, благодаря которому указанный элемент изолируется от внешнего контекста, что позволяет решать одну из задач очистки потока - позволять вложенным элементам с float растягивать своего родителя.
Плюсы: 
- простота кода и общая адекватность поведения.
Минусы: 
- вложенные абсолютно позиционированные элементы обрезаются или вовсе скрываются, если они расположены за границами элемента.

2. clearfix


.clearfix:after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
        height: 0;
}


Псевдоэлемент :after невиден, нулевой высоты т.е. его фактически нет в потоке, за счет display: block - он растягивается на всю ширину родителя, за счет clear: both достигается цель - очистка потока.
Плюсы: 
- нет необходимости создавать отдельный блочный элемент с clear: both,
- вложенные абсолютно позиционированные элементы не обрезаются обрезаются
Минусы:
- Элемент остается в общем потоке, т.е. его паддинги и марджины его вложенных элементов будут "проваливаться" под элемент в float, если таковой есть рядом с целевым элементом

3. display:table


.table  {
        display: table;
}


display: table, как и overflow: hidden создает свой контекст форматирования, но в отличае от него не обрезает выходящие за его границы абсолютно позиционированные элементы
Плюсы:
- не обрезает элементы
- более адекватное поведение, нежели у clearfix
Минусы:
- элемент ужимает свою ширину по контенту - т.е. ведет себя как таблица

Как возможное решение последнего минуса:


.table  {
        display: table;
}
.table:after {
        content: '. .';
        display: block;
        word-spacing: 9999px;
        height: 0;
        overflow: hidden;
}


За счет того, что в :after 2 точки и пробел между ними в 10к пикселей, этот элемент ни в одних реальных условиях не уберется в ширину экрана, браузер всегда будет растягивать таблицу во всю ширину. Ну а то, что высота элемента нулевая и все выходящее за его границы обрезается, не дает отображать точки.

Назовите основные методы очистки потока в CSS. Опишите их достоинства и недостатки.

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

1. overflow: hidden или auto


.overflow {
        overflow: hidden;
}


overflow создает новый контекст форматирования, благодаря которому указанный элемент изолируется от внешнего контекста, что позволяет решать одну из задач очистки потока - позволять вложенным элементам с float растягивать своего родителя.
Плюсы: 
- простота кода и общая адекватность поведения.
Минусы: 
- вложенные абсолютно позиционированные элементы обрезаются или вовсе скрываются, если они расположены за границами элемента.

2. clearfix


.clearfix:after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
        height: 0;
}


Псевдоэлемент :after невиден, нулевой высоты т.е. его фактически нет в потоке, за счет display: block - он растягивается на всю ширину родителя, за счет clear: both достигается цель - очистка потока.
Плюсы: 
- нет необходимости создавать отдельный блочный элемент с clear: both,
- вложенные абсолютно позиционированные элементы не обрезаются обрезаются
Минусы:
- Элемент остается в общем потоке, т.е. его паддинги и марджины его вложенных элементов будут "проваливаться" под элемент в float, если таковой есть рядом с целевым элементом

3. display:table


.table  {
        display: table;
}


display: table, как и overflow: hidden создает свой контекст форматирования, но в отличае от него не обрезает выходящие за его границы абсолютно позиционированные элементы
Плюсы:
- не обрезает элементы
- более адекватное поведение, нежели у clearfix
Минусы:
- элемент ужимает свою ширину по контенту - т.е. ведет себя как таблица

Как возможное решение последнего минуса:


.table  {
        display: table;
}
.table:after {
        content: '. .';
        display: block;
        word-spacing: 9999px;
        height: 0;
        overflow: hidden;
}


За счет того, что в :after 2 точки и пробел между ними в 10к пикселей, этот элемент ни в одних реальных условиях не уберется в ширину экрана, браузер всегда будет растягивать таблицу во всю ширину. Ну а то, что высота элемента нулевая и все выходящее за его границы обрезается, не дает отображать точки.

Как кроссбраузерно расположить текст поверх картинки?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Чтобы расположить текст поверх картинки нужно правильно использовать атрибут position. Приведенный пример работает в IE, начиная с версии 4.0, а также во всех остальных браузерах.

<div style="position: relative; width: 200px; height: 100px"> 
    <div style="position: absolute; top: 0; left: 0; width: 200px"> 
        <img src='http://www.google.com.ua/intl/en_com/images/srpr/logo1w.png' /> 
    </div> 
    <div style="position: absolute; top: 20%; left: 20%; width: 200px"> 
        Google wraps well 
    </div> 
</div> 

Как кроссбраузерно расположить текст поверх картинки?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Чтобы расположить текст поверх картинки нужно правильно использовать атрибут position. Приведенный пример работает в IE, начиная с версии 4.0, а также во всех остальных браузерах.

<div style="position: relative; width: 200px; height: 100px"> 
    <div style="position: absolute; top: 0; left: 0; width: 200px"> 
        <img src='http://www.google.com.ua/intl/en_com/images/srpr/logo1w.png' /> 
    </div> 
    <div style="position: absolute; top: 20%; left: 20%; width: 200px"> 
        Google wraps well 
    </div> 
</div> 

Сделать раскладку элементов на странице можно двумя способами : с помощью CSS и таблиц HTML. Почему не рекомендуется делать раскладку на основе таблицы?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

1. Сопровождение и обновление
Разметка, основана на таблице, находится внутри HTML документа. При необходимости изменения внешнего вида сайта, понадобится изменять каждый HTML документ, тогда как при разметке с помощью CSS все необходимые изменения можно сделать в одном файле каскадных стилей.

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

3. Смысловая нагрузка. 
Читая HTML код, попадая на тег <TABLE> ожидается что внутри будут именно табличные данные.

Предлагайте ваши аргументы и давайте обсудим.

Сделать раскладку элементов на странице можно двумя способами : с помощью CSS и таблиц HTML. Почему не рекомендуется делать раскладку на основе таблицы?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

1. Сопровождение и обновление
Разметка, основана на таблице, находится внутри HTML документа. При необходимости изменения внешнего вида сайта, понадобится изменять каждый HTML документ, тогда как при разметке с помощью CSS все необходимые изменения можно сделать в одном файле каскадных стилей.

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

3. Смысловая нагрузка. 
Читая HTML код, попадая на тег <TABLE> ожидается что внутри будут именно табличные данные.

Предлагайте ваши аргументы и давайте обсудим.

Как сделать трехколоночный макет с боковыми колонками шириной 200px и тянущейся средней колонкой, причем независимо от контента колонки должны быть одной высоты (с зеленым фоном, например)?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

<body> 
  <div class="column1"></div> 
  <div class="column2"></div> 
  <div class="column3"></div> 
</body> 

.column1 { 
  float: left; 
  width: 200px; 
} 
.column2 { 
  border-left: 200px solid green; 
  border-right: 200px solid green; 
} 
.column3 { 
  float: right; 
  width: 200px; 
} 

Как сделать трехколоночный макет с боковыми колонками шириной 200px и тянущейся средней колонкой, причем независимо от контента колонки должны быть одной высоты (с зеленым фоном, например)?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

<body> 
  <div class="column1"></div> 
  <div class="column2"></div> 
  <div class="column3"></div> 
</body> 

.column1 { 
  float: left; 
  width: 200px; 
} 
.column2 { 
  border-left: 200px solid green; 
  border-right: 200px solid green; 
} 
.column3 { 
  float: right; 
  width: 200px; 
}