PHPbook

41

7. Какое свойство задает цвет фона?

background-color.

8. Как в CSS обозначаются комментарии?

/* вот так */

9. Как задать красный цвет для всех элементов, имеющих класс red?

.red { background-color:white; }

10. Как убрать подчеркивание для всех ссылок на странице?

a { text-decoration:none; }

11. Как сделать жирным текст во всех элементах <p>?

p { font-weight: bold; }

12. Что делает свойство clear?

Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для ука- занных сторон.

13. Есть ячейка таблицы, в ней 3 дива, в каждом диве по текстовому слову. На первый див применен стиль float: left; на третий: float: right; что нужно при- менить на второй див, чтобы все три надписи/дивы были в одной горизон- тальной строке, т.е. первый имел бы выравнивание по левому краю, третий

по правому, а второй по центру?

Можно сделать так:

<t:div style=”width:33%; float:left; text-align: left;”>AM </t:div> <t:div style=”width:34%; float:left;”>NOON </t:div>

<t:div style=”width:33%; float:left; text-align: right;”>PM </t:div>

14. Что такое псевдоклассы и псевдостили?

Псевдоклассы – это то, что обычно пишут после селектора через двоеточие чтобы определить реакцию или состояние для данного селектора. Самые известные псевдоклассы это :link, :hover, :visitedи:active. Псевдоклассыобладаютследующейструктурой:selector:pseudoclass{property: value; }, т.е. нужно всего лишь поместить двоеточие между селектором и псевдоклассом.

PHP. Собеседование в вопросах и ответах

Андрей Шевченко

42

a.snowman:link { color: blue;

}

a.snowman:visited { color: purple;

}

a.snowman:active { color: red;

}

a.snowman:hover { text-decoration: none; color: blue; background-color: yellow;

}

15. Название и назначение псевдоклассов.

Такой вопрос задавать, конечно же, никто не будет, но пусть список будет здесь, в качестве

шпаргалки.

:link – отвечает за стили непосещенной ссылки; :visited – состояние посещенной ссылки; :active – состояние активного объекта;

:hover – состояние объекта при наведении на него мышкой; :focus – фокус на объекте;

:first-child – первый дочерний элемент текущего элемента; :last-child – последний дочерний элемент;

:only-child – применяет стиль к элементу, если он единственный дочерний элемент; :nth-child(5) – в данном случае пятый по счету с начала дочерний элемент;

– аналогично, только отчет с конца. В этом, как и в предыдущих селекторах можно:nth-lastзадавать-child(3)не только конкретные цифры, но и писать, например, что-то типа такого: ul li: nth-last-child(2n+1);

<html>);:root – дает указание применить стиль к корневому элементу (в html документе это тег

– дает ограничение на применение стилей по селектору (то есть селектор .white-block: not(div):not() применит указанный стиль ко всем элементам с классом .white-block, только есть этот элемент не <div>);

:empty – выбирает пустые элементы;

:first-of-type – применяет стиль к первому элементу этого типа, то есть если у вас есть два div,

PHP. Собеседование в вопросах и ответах

Андрей Шевченко

стиль будет работать только для первого из них;

43

:last-of-type – аналогично предыдущему, только для последнего элемента;

дителя:only-of;-type – применяет стили к элементу, если он имеет уникальный тип внутри своего ро- :nth-of-type() – выбирает указанный по счету с начала элемент текущего типа;

:nth-last-of-type() – тоже самое, но с конца;

–например,еслиувасадресимеетвидindex.html#anchor,тоэтотпсевдоклассзадастпра- вило:targetдля элемента с id=”anchor”;

:enabled – выбирает активные инпуты; :disabled – выбирает неактивные инпуты;

:checked – отмеченные чекбоксы и выбранные радиокнопки; :default – элемент по умолчанию, например кнопка отправки формы;

:valid – стиль для правильного инпута (когда указана data type в HTML 5); :invalid – когда, соответственно, инпут невалиден;

– когда значение инпута находиться в заданных границах (type=”range”, задан min и max,:in-rangeно это все только в HTML 5);

:out-of-range – когда не попадает в границы; :required – все обязательные поля; :optional – все необязательные;

:read-only – те элементы, которые доступны только для чтения; :read-write – для чтения и записи.

PHP. Собеседование в вопросах и ответах

Андрей Шевченко

1. Как подключить JQuery к веб-странице?

<head>

<script type=’text/javascript’ src=’jquery.js’></script> </head>

2. В чем вообще смысл jQuery? Зачем оно надо?

Суть jQuery в том, чтобы отбирать элементы HTML-страниц и выполнять над ними определен- ные действия.

3. Выбрать все элементы с id = idname

$(‘#idname’);

4. Выбрать все элементы div с id = idname

$(‘div#idname’);

5. Выбрать все элементы с class = classname

$(‘.classname’);

6. Выбрать все элементы div с class = classname

$(‘div.classname’);

7. Выбраит все span элементы в элементах div

$(‘div span’);

или так:

$(‘div’).find(‘span’);

8. Выбрать все div и span элементы

$(‘div, span’);

PHP. Собеседование в вопросах и ответах

Андрей Шевченко

45

9. Выбрать предыдущий элемент от найденного

$(‘#banner’).prev();

10. Выбрать следующий элемент от найденного

$(‘#banner’).next();

11.Выбратьвсеspanэлементывэлементахdiv,гдеspanявляетсяпрямымпо- томком div’a

$(‘div > span’);

12. Выбрать все span после первого элемента div

$(‘div ~ span’);

13. Выбрать первый li в ul

$(‘ul li:first-child’);

14. Выбрать div`ы у которых нет класса cls

$(‘div:not(.cls)’);

15. Выбрать элементы с активной анимацией

$(‘div:animated’);

16. Выбрать div`ы которые содержат класс firstclass и класс secondclass

$(‘div.firstclass’).filter(‘.secondclass’);

17. Выбрать все div’ы с атрибутом title = test

$(“div[title=’test’]”);

18. Выбрать все отмеченные чекбоксы

$(‘input:checked’);

PHP. Собеседование в вопросах и ответах

Андрей Шевченко

46

19. Выбрать все input с type = radio

$(‘input:radio’);

20. Выбрать видимый div с именем red, который содержит тег span

$(“div[name=red]:visible:has(span)”);

21. Что выберет этот фильтр? $(“a[rel~=’external’]”);

Все <а> с атрибутом rel содержащим external в списке значений разделенных пробелом.

22. А этот? $(“div[name=apple]:visible:has(p)”);

Выберет видимый div с именем apple, который содержит тег p.

23. Найти все элементы div с классом one, а также все элементы p с классом two, затем добавить им всем класс three и визуально плавно спустить вниз.

$(“div.one”).add(“p.two”).addClass(“three”).slideDown(“slow”);

24. Сделать так, чтобы при нажатии на элемент <а> алертом выводилось

“Hello world!”.

jQuery(function($) { $(“a”).click(function() {

alert(“Hello world!”);

});

});

PHP. Собеседование в вопросах и ответах

Андрей Шевченко

47

8.HTML

1.HTML5 знаешь? Нарисуй что-нибудь.

<rect

x=”100” y=”100”

width = “300” height = “300” fill = “blue” stroke = “red” stroke-width = “50px”

rx = “8” ry = “8”

id = “myRect” class = “chart” />

Нарисует синий квадрат с красной рамкой с закругленными краями.

2. Чем HTML отличается от XHTML?

XHTML представляет собой словарь XML, в то время как HTML – это лишь предшествующий XHTML язык разметки.

Основное различие между ними заключается в обработке документа. Документы XHTML обра- батываются своим модулем (парсером) аналогично документам XML. В процессе этой обработ- ки ошибки, допущенные разработчиками, не исправляются.

Более подробно о различиях:

– Все элементы должны быть закрыты. Теги, которые не имеют закрывающего тега (например, <img> или <br>) должны иметь на конце / (например, <br />).

– Булевы атрибуты записываются в развёрнутой форме. Например, следует писать <option selected=”selected”> или <td nowrap=”nowrap”>.

– Имена тегов и атрибутов должны быть записаны строчными буквами (например, <img alt=”” /> вместо <IMG ALT=”” />).

–XHTMLгораздострожеотноситсякошибкамвкоде;<и&везде,дажевURL,должнызамещать- ся < и & соответственно. По рекомендации W3C браузеры, встретив ошибку в XHTML, должны сообщить о ней и не обрабатывать документ. Для HTML браузеры должны были попы- таться понять, что хотел сказать автор.

– Кодировкой по умолчанию является UTF-8 (в отличие от HTML, где кодировкой по умолчанию является ISO 8859-1).

3. Что такое DOCTYPE и зачем он нужен?

DOCTYPE – это определение типа документа (Document Type Definition (DTD)), правила, в соот-

ветствии с которыми осуществляется проверка конкретного документа (веб-страницы) XML или (X)HTML. Благодаря этой записи, браузер определяет, какая в данном документе использу- ется версия DTD.

А нужен он для того, чтобы браузеры правильно отображали разметку документа. Если не ука-

PHP. Собеседование в вопросах и ответах

Андрей Шевченко

48зать DOCTYPE, то браузер будет добавлять “отсебятину”, причём каждые браузеры будут добав- лять свою “отсебятину”. В результате, ни о какой кроссбраузерности не может и речи идти.

4. Чем отличается div от span?

div – это блочный контейнер, а span - линейный.

Контейнеры – это то, во что может быть вложено что-нибудь еще. div используется для разметки блоков, а span – для текста.

div формирует блок из того, что в нем с новой строки и после него элемент идет с новой строки (если не поменять поведение с помощью CSS), а span не переносит и “обтягивает”

5. Как обозначаются комментарии в HTML?

<!-- вот так-->

6. Ссылки. Как задать адрес документа, на который следует перейти?

<a href=”http://vottak.com/example/example.html”>Абсолютная ссылка</a> <a href=”../../example/example.html”>Относительная ссылка</a>

7. Как сделать сылку на имейл?

<a href=”mailto:jeffjoellennox@mail.ru”>E-mail me</a>

8. Что делают теги <em>?

Выводят заключенный в них текст курсивом.

9. Что такое <ol>, <ul> и <li>

Тег<ol>устанавливаетнумерованныйсписок.Каждыйэлементспискадолженначинатьсястега <li>. Если к тегу <ol> применяется таблица стилей, то элементы <li> наследуют эти свойства. Тег <ul> устанавливает ненумированный (маркированный) список.

10. Зачем нужны теги <dl>, <dt>, <dd> ?

Теги <dl>, <dt>, <dd>, предназначенны для создания списка определений. Каждый такой список начинается с контейнера <dl>, куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина. Закрывающий тег </dd> не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.

PHP. Собеседование в вопросах и ответах

Андрей Шевченко

49

11. Зачем нужны теги <tr>, <th>, <td> ?

Тег <tr> служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега <th> или <td>.

<th>предназначендлясозданияоднойячейкитаблицы,котораяобозначаетсякакзаголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег <th> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.

<td> предназначен для создания одной ячейки таблицы. Тег <td> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.

12. В каком регистре лучше писать HTML-код?

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

13. Как убрать синюю рамку вокруг картинки-ссылки?

Вот так:

<img border=”0” ... />

14. Обязательно ли писать alt в <img>?

Да.Этоготребуетстандарт,даиздравыйсмысл,т.к.некоторыепользователивсеещеотключают картинки, а некоторые используют текстовые или даже голосовые браузеры. Если картинка не несет никакой смысловой нагрузки (элемент дизайна, “распорка” и т.п.), то можног поставить в тег <img> значение alt=””.

15. Что такое entities?

Entities–этокомбинациизнака&ибуквенногоилицифровогокодапосленее,предназначенные для замещения символов, которые не могут встречаться в “чистом” виде в HTML-тексте, например, символа “<”.

16. Как сделать чтобы все гиперссылки сайта открывались в новом окне, т.е

чтобы по умолчанию использовался target=”_blank”?

Нужно в области head прописать тег base с атрибутом target=”_blank”:

<head>

<base target=”_blank”> </head>

PHP. Собеседование в вопросах и ответах

Андрей Шевченко