Cascading Style Sheets (каскадные таблицы стилей), сокращенно CSS, — наиболее распространенный инструмент для придания Web-страницам аккуратного и стильного вида. Принцип использования CSS прост: сначала какой-либо стиль, например стиль одной из ячеек таблицы, описывается в отдельном файле, имеющем расширение .css ; в этом стиле устанавливаются отступы слева, справа, сверху и снизу, цвет фона, размер, начертание и цвет текста, межстрочный интервал и т. п. Затем css -файл ставится в соответствие html -документу, и к рассматриваемой ячейке таблицы применяется только что созданный стиль. Такая схема удобна еще и тем, что описанный единожды стиль сразу распространяется на все html -файлы, будь их 5, 10 или 100. Поэтому, если вдруг возникнет необходимость использовать синий цвет текста вместо черного на всех 100 Web-страницах проекта, достаточно будет просто изменить одну строку в css -файле.
В CSS принято несколько видов единиц, среди которых наиболее употребляемы следующие:
Цвета в CSS, как и во всех Web-документах, задаются в формате шестнадцатеричного кода, перед которым стоит символ #, например:
#ee1515 — красный,
#a3d007 — кислотно-зеленый,
#ffffff — белый,
#000000 — черный.
Удобнее всего подбирать цвета в редакторе Adobe Photoshop, а затем переносить соответствующий шестнадцатеричный код в css -файл.
В таблице 3.1 приведены основные характеристики, которые могут понадобиться при создании стилей для Web-проекта.
(рис 3.1) Характеристики margin и padding| Характеристика | Примеры использования |
|---|---|
| I. Оформление текста | |
| Гарнитура шрифта, font-family | font-family: Georgia, Times New RomanГарнитуры указываются через запятую; если на компьютере посетителя Web-страницы не установлена первая (предпочтительная) гарнитура, то браузер использует вместо нее вторую, а не какую-либо произвольную |
| Размер шрифта, font-size | font-size: 0.8em font-size: 120% |
| Наклон шрифта, font-style |
|
| Начертание шрифта, font-weight |
|
| Подчеркивание текста, text-decoration |
|
| Цвет текста, color | color: #276dc5 |
| Междустрочный интервал, line-height | line-height: 150% |
| II. Отступы и границы | |
| Отступ изнутри (рис 3.1), padding | padding: 30px (отступ со всех сторон по 30 пикселей)
|
| Отступ снаружи (рис 3.1), margin | margin: 20px margin-left: 10px |
| Граница, border | border: solid 1px #ac9d7fПервый параметр — характер линии: solid — сплошная, dotted — пунктир; второй параметр — толщина линии; третий параметр — ее цвет border-right: solid 4px #000000Можно устанавливать границы с каждой из сторон по отдельности |
| III. Заливка фона | |
| Цвет фона, background-color | |
| Фоновый рисунок, background-image | background-image: url(graphics/drops.jpg)В скобках после префикса url указывается место расположения рисунка в системе папок Web-проекта |
| Позиция фонового рисунка, background-position | |
| Повторяемость фонового рисунка, background-repeat | background-repeat: repeat-xВозможные варианты: repeat-x — повторение по горизонтали, repeat-y — повторение по вертикали, repeat — повторение в обоих направлениях, no-repeat — без повторения |
Итак, создадим css -файл для нашего проекта. В Macromedia Dreamweaver воспользуемся меню ), затем сразу сохраним файл в корневой каталог под именем oil.css.
(рис 3.2) Создание нового css-файлаВернемся к html -файлу главной страницы и поставим ему в соответствие только что созданный css -файл. Для этого перед </head> добавим следующий тег:
<link rel="stylesheet" type="text/css" href="oil.css">
Теперь все созданные в файле oil.css стили можно применять к любым фрагментам главной страницы.
В css-файлах часто используют комментарии: /* Комментарий */. С их помощью удобно отделять друг от друга стили, описывающие разные фрагменты Web-страницы. Для начала опишем три базовых элемента Web-страницы — теги <body>, <p> и <a>. Стиль body будет отвечать за оформление страницы в целом; в него мы включим установку нулевых отступов, белый цвет фона, гарнитуру "Georgia" для основного текста, как того требует эскиз, черный цвет текста, его размер и междустрочный интервал. В комментариях напишем слово Basic (базовые параметры), затем введем название стиля — body, далее откроем фигурную скобку и перечислим через точку с запятой все необходимые характеристики стиля; по окончании закроем фигурную скобку:
/* Basic */
body {
padding: 0;
margin: 0;
background-color: #ffffff;
font-family: Georgia, Times New Roman, Times, serif;
color: #000000;
font-size: 0.95em;
line-height: 140%;
}
Сохраним файл ). Изменения налицо: в предыдущем варианте (рис 2.20) не было ни нулевых отступов, ни нужных гарнитуры и междустрочного интервала.
(рис 3.3) Главная страница после создания стиля bodyСоздадим стиль для тега абзацев <p>, указав в нем
p {
margin-bottom: 1em;
margin-top: 0;
}
Можно заметить, что ).
(рис 3.4) Выпадающий список с css-характеристикамиТеперь настала очередь стиля, описывающего ссылки, т. е. тег <a>. Этот стиль состоит из трех частей: в первой рассматривается ссылка, которую еще не посещали (link), во второй — уже посещенная (visited), в третьей — ссылка в тот момент, когда посетитель навел на нее указатель мыши (hover). Посещенной и непосещенной ссылкам рекомендуется присваивать разные цвета, чтобы пользователю было понятно, на каких страницах он уже побывал; чаще всего непосещенная ссылка имеет синий цвет, а посещенная — фиолетовый. Кроме того, все ссылки стоит подчеркивать — это лучший способ показать, что слово является ссылкой, а не просто частью текста.
Вернемся к эскизу страницы, открытому в редакторе Adobe Photoshop, зайдем в меню выбора основного цвета и возьмем пробу цвета на одной из ссылок, например на
a:link {
color: #147fdb;
text-decoration: underline;
}
Цвета посещенной ссылки и ссылки, на которую наведен указатель мыши, подберем в Adobe Photoshop на наше усмотрение, например:
a:visited {
color: #147fdb;
text-decoration: underline;
}
a:hover {
color: #ff0000;
text-decoration: underline;
}
Теперь перейдем к созданию стилей для каждого из фрагментов Web-страницы по отдельности.
В файле oil.css создадим новый комментарий, показывающий, что стили базовых элементов описаны и мы переходим к созданию стилей для отдельных фрагментов Web-страницы: ячеек, абзацев, пунктов меню и пр. Начнем с так называемой "шапки" сайта, т. е. первой строки основной таблицы. Ячейке, где находится изображение с названием и эмблемой, присвоим стиль .top1. Этот стиль не описывает какой-либо стандартный html -тег, как, например, <body> или <p>, поэтому синтаксис CSS требует поставить перед его названием точку.
/* Top */
.top1 {
padding-bottom: 45px;
padding-left: 65px;
}
Очевидно, точные значения отступов в пикселях мы получили, измерив соответствующие расстояния на эскизе в ).
Ячейке с надписью "— что мы знаем о ней?" присвоим стиль .top2:
.top2 {
padding-bottom: 53px;
font-size: 150%;
color: #7f888c;
font-style: italic;
}
а ячейке с пиктограммами — стиль .top3:
.top3 {
padding-left: 26px;
}
(рис 3.5) Измерение отступовТеперь необходимо сопоставить эти три стиля ячейкам непосредственно в ).
Стоит отметить, что после сопоставления ячейке, например, стиля .top1, в теге ).
Теперь создадим еще два стиля, необходимых для завершения оформления "шапки". Один из них будет отвечать за наличие на фоне изображения с каплями; его применим к первой таблице (рис 2.7а):
.top4 {
background-image: url(graphics/drops.jpg);
background-position: right top;
background-repeat: no-repeat;
}
(рис 3.6) Применение стиля к ячейке таблицыДругой будет отвечать за
.top5 {
background-image: url(graphics/drops.jpg);
background-position: right top;
background-repeat: no-repeat;
}
В результате страница будет выглядеть так, как показано на рис 3.8.
Можно заметить, что на Web-странице (рис 3.8) пиктограммы расположены несколько выше, чем на эскизе (рис 2.3). Чтобы опустить их, следует, вероятно, уточнить высоту верхней строки таблицы, в которой расположены эти пиктограммы и надпись "— что мы знаем о ней?", т. е. второй таблицы на рис 2.7б. Помещаем курсор рядом с пиктограммами, выделяем соответствующую ячейку в меню структуры Web-страницы (т. е. <td.top3> ) и на панели свойств в поле H вводим необходимое значение, например 45. Подобная ситуация, когда какие-либо элементы Web-страницы оказываются оформленными не совсем в соответствии с эскизом, будет возникать достаточно часто. Выбор направления дальнейших действий зависит от верстальщика: либо внести исправления, как только что поступили мы, либо оставить все как есть, если внешний вид страницы при этом не пострадает.
(рис 3.7) Индикация наличия стиля у ячейки таблицыПереходим к оформлению главного меню. Сначала создадим стиль для всей второй строки основной таблицы, где укажем гарнитуру и размер шрифта и отступы:
/* Menu */
.menu1 {
padding-top: 35px;
padding-left: 55px;
padding-bottom: 90px;
font-family: Tahoma, Verdana, Arial;
font-size: 120%;
}
(рис 3.8) "Шапка", оформленная c помощью стилей CSS Цветные полоски слева от каждого пункта меню реализуем посредством использования границ ячеек, поэтому для каждой из них необходимо создать собственный стиль:
.menu2a {
padding-left: 10px;
padding-right: 55px;
border-left: solid 3px #2cc709;
}
.menu2b {
padding-left: 10px;
padding-right: 55px;
border-left: solid 3px #ffc31f;
}
.menu2c {
padding-left: 10px;
padding-right: 55px;
border-left: solid 3px #1173f4;
}
.menu2d {
padding-left: 10px;
padding-right: 55px;
border-left: solid 3px #ff1312;
}
.menu2e {
padding-left: 10px;
padding-right: 55px;
border-left: solid 3px #555f86;
}
Наконец, еще один стиль необходим для описания ссылок, присвоенных пунктам главного меню, поскольку они отличаются от ссылок в обычном тексте. В случае пунктов главного меню обычно устанавливают одинаковые цвета для посещенной и непосещенной ссылок:
.menu3:link {
color: #576267;
text-decoration: underline;
}
.menu3:visited {
color: #576267;
text-decoration: underline;
}
.menu3:hover {
color: #000000;
text-decoration: underline;
}
Стиль .menu3 применяется непосредственно к тегу <a>, например:
<a class="menu3" href="composition/index.html">Состав и свойства</a>
Завершая работу над главным меню, можно намеренно перенести на другую строку окончания "и свойства", "топливо" и "аспекты" соответственно в первом, третьем и пятом пунктах, между словами "и" и "свойства" поставить неразрывный пробел, а также задать ширину таблицы с меню равной не 100, а 90%, чтобы она не слишком растягивалась, когда окно браузера развернуто на всю страницу. На данном этапе верстки Web-страница выглядит следующим образом (рис 3.9):
(рис 3.9) "Шапка" и главное меню, оформленные c помощью стилей CSSТочно так же средствами CSS оформляются остальные блоки главной страницы: устанавливаются отступы, изменяются размер, гарнитура и цвет шрифта.
Нередко возникает необходимость применить один стиль к нескольким расположенным подряд абзацам текста. В этом случае непосредственно в html -коде перед первым из таких абзацев открывается, а после последнего — закрывается тег <div> ; соответствующий стиль применяется именно к нему. Например, два абзаца текста под фотографией нефтяной вышки в пятой строке основной таблицы могут быть оформлены следующим образом:
<div class="homepage6"> <p>Вопрос истощения запасов нефти...</p> <p>По данным ОПЕК, до 2030 года...</p> </div>
Кроме того, если требуется выделить в тексте всего лишь одно слово или словосочетание, можно и вовсе обойтись без и
на панели свойств.
Окончательный результат (рис 3.10) должен быть практически идентичен эскизу, тогда верстку можно считать выполненной хорошо.
(рис 3.10) Полностью сверстанная главная страница Cascading Style Sheets (каскадные таблицы стилей), сокращенно CSS, — наиболее распространенный инструмент для придания Web-страницам аккуратного и стильного вида. Принцип использования CSS прост: сначала какой-либо стиль, например стиль одной из ячеек таблицы, описывается в отдельном файле, имеющем расширение .css ; в этом стиле устанавливаются отступы слева, справа, сверху и снизу, цвет фона, размер, начертание и цвет текста, межстрочный интервал и т. п. Затем css -файл ставится в соответствие html -документу, и к рассматриваемой ячейке таблицы применяется только что созданный стиль. Такая схема удобна еще и тем, что описанный единожды стиль сразу распространяется на все html -файлы, будь их 5, 10 или 100. Поэтому, если вдруг возникнет необходимость использовать синий цвет текста вместо черного на всех 100 Web-страницах проекта, достаточно будет просто изменить одну строку в css -файле.
В CSS принято несколько видов единиц, среди которых наиболее употребляемы следующие:
Цвета в CSS, как и во всех Web-документах, задаются в формате шестнадцатеричного кода, перед которым стоит символ #, например:
#ee1515 — красный,
#a3d007 — кислотно-зеленый,
#ffffff — белый,
#000000 — черный.
Удобнее всего подбирать цвета в редакторе Adobe Photoshop, а затем переносить соответствующий шестнадцатеричный код в css -файл.
В таблице 3.1 приведены основные характеристики, которые могут понадобиться при создании стилей для Web-проекта.
(рис 3.1) Характеристики margin и padding| Характеристика | Примеры использования |
|---|---|
| I. Оформление текста | |
| Гарнитура шрифта, font-family | font-family: Georgia, Times New RomanГарнитуры указываются через запятую; если на компьютере посетителя Web-страницы не установлена первая (предпочтительная) гарнитура, то браузер использует вместо нее вторую, а не какую-либо произвольную |
| Размер шрифта, font-size | font-size: 0.8em font-size: 120% |
| Наклон шрифта, font-style |
|
| Начертание шрифта, font-weight |
|
| Подчеркивание текста, text-decoration |
|
| Цвет текста, color | color: #276dc5 |
| Междустрочный интервал, line-height | line-height: 150% |
| II. Отступы и границы | |
| Отступ изнутри (рис 3.1), padding | padding: 30px (отступ со всех сторон по 30 пикселей)
|
| Отступ снаружи (рис 3.1), margin | margin: 20px margin-left: 10px |
| Граница, border | border: solid 1px #ac9d7fПервый параметр — характер линии: solid — сплошная, dotted — пунктир; второй параметр — толщина линии; третий параметр — ее цвет border-right: solid 4px #000000Можно устанавливать границы с каждой из сторон по отдельности |
| III. Заливка фона | |
| Цвет фона, background-color | |
| Фоновый рисунок, background-image | background-image: url(graphics/drops.jpg)В скобках после префикса url указывается место расположения рисунка в системе папок Web-проекта |
| Позиция фонового рисунка, background-position | |
| Повторяемость фонового рисунка, background-repeat | background-repeat: repeat-xВозможные варианты: repeat-x — повторение по горизонтали, repeat-y — повторение по вертикали, repeat — повторение в обоих направлениях, no-repeat — без повторения |
Итак, создадим css -файл для нашего проекта. В Macromedia Dreamweaver воспользуемся меню ), затем сразу сохраним файл в корневой каталог под именем oil.css.
(рис 3.2) Создание нового css-файлаВернемся к html -файлу главной страницы и поставим ему в соответствие только что созданный css -файл. Для этого перед </head> добавим следующий тег:
<link rel="stylesheet" type="text/css" href="oil.css">
Теперь все созданные в файле oil.css стили можно применять к любым фрагментам главной страницы.
В css-файлах часто используют комментарии: /* Комментарий */. С их помощью удобно отделять друг от друга стили, описывающие разные фрагменты Web-страницы. Для начала опишем три базовых элемента Web-страницы — теги <body>, <p> и <a>. Стиль body будет отвечать за оформление страницы в целом; в него мы включим установку нулевых отступов, белый цвет фона, гарнитуру "Georgia" для основного текста, как того требует эскиз, черный цвет текста, его размер и междустрочный интервал. В комментариях напишем слово Basic (базовые параметры), затем введем название стиля — body, далее откроем фигурную скобку и перечислим через точку с запятой все необходимые характеристики стиля; по окончании закроем фигурную скобку:
/* Basic */
body {
padding: 0;
margin: 0;
background-color: #ffffff;
font-family: Georgia, Times New Roman, Times, serif;
color: #000000;
font-size: 0.95em;
line-height: 140%;
}
Сохраним файл ). Изменения налицо: в предыдущем варианте (рис 2.20) не было ни нулевых отступов, ни нужных гарнитуры и междустрочного интервала.
(рис 3.3) Главная страница после создания стиля bodyСоздадим стиль для тега абзацев <p>, указав в нем
p {
margin-bottom: 1em;
margin-top: 0;
}
Можно заметить, что ).
(рис 3.4) Выпадающий список с css-характеристикамиТеперь настала очередь стиля, описывающего ссылки, т. е. тег <a>. Этот стиль состоит из трех частей: в первой рассматривается ссылка, которую еще не посещали (link), во второй — уже посещенная (visited), в третьей — ссылка в тот момент, когда посетитель навел на нее указатель мыши (hover). Посещенной и непосещенной ссылкам рекомендуется присваивать разные цвета, чтобы пользователю было понятно, на каких страницах он уже побывал; чаще всего непосещенная ссылка имеет синий цвет, а посещенная — фиолетовый. Кроме того, все ссылки стоит подчеркивать — это лучший способ показать, что слово является ссылкой, а не просто частью текста.
Вернемся к эскизу страницы, открытому в редакторе Adobe Photoshop, зайдем в меню выбора основного цвета и возьмем пробу цвета на одной из ссылок, например на
a:link {
color: #147fdb;
text-decoration: underline;
}
Цвета посещенной ссылки и ссылки, на которую наведен указатель мыши, подберем в Adobe Photoshop на наше усмотрение, например:
a:visited {
color: #147fdb;
text-decoration: underline;
}
a:hover {
color: #ff0000;
text-decoration: underline;
}
Теперь перейдем к созданию стилей для каждого из фрагментов Web-страницы по отдельности.
В файле oil.css создадим новый комментарий, показывающий, что стили базовых элементов описаны и мы переходим к созданию стилей для отдельных фрагментов Web-страницы: ячеек, абзацев, пунктов меню и пр. Начнем с так называемой "шапки" сайта, т. е. первой строки основной таблицы. Ячейке, где находится изображение с названием и эмблемой, присвоим стиль .top1. Этот стиль не описывает какой-либо стандартный html -тег, как, например, <body> или <p>, поэтому синтаксис CSS требует поставить перед его названием точку.
/* Top */
.top1 {
padding-bottom: 45px;
padding-left: 65px;
}
Очевидно, точные значения отступов в пикселях мы получили, измерив соответствующие расстояния на эскизе в ).
Ячейке с надписью "— что мы знаем о ней?" присвоим стиль .top2:
.top2 {
padding-bottom: 53px;
font-size: 150%;
color: #7f888c;
font-style: italic;
}
а ячейке с пиктограммами — стиль .top3:
.top3 {
padding-left: 26px;
}
(рис 3.5) Измерение отступовТеперь необходимо сопоставить эти три стиля ячейкам непосредственно в ).
Стоит отметить, что после сопоставления ячейке, например, стиля .top1, в теге ).
Теперь создадим еще два стиля, необходимых для завершения оформления "шапки". Один из них будет отвечать за наличие на фоне изображения с каплями; его применим к первой таблице (рис 2.7а):
.top4 {
background-image: url(graphics/drops.jpg);
background-position: right top;
background-repeat: no-repeat;
}
(рис 3.6) Применение стиля к ячейке таблицыДругой будет отвечать за
.top5 {
background-image: url(graphics/drops.jpg);
background-position: right top;
background-repeat: no-repeat;
}
В результате страница будет выглядеть так, как показано на рис 3.8.
Можно заметить, что на Web-странице (рис 3.8) пиктограммы расположены несколько выше, чем на эскизе (рис 2.3). Чтобы опустить их, следует, вероятно, уточнить высоту верхней строки таблицы, в которой расположены эти пиктограммы и надпись "— что мы знаем о ней?", т. е. второй таблицы на рис 2.7б. Помещаем курсор рядом с пиктограммами, выделяем соответствующую ячейку в меню структуры Web-страницы (т. е. <td.top3> ) и на панели свойств в поле H вводим необходимое значение, например 45. Подобная ситуация, когда какие-либо элементы Web-страницы оказываются оформленными не совсем в соответствии с эскизом, будет возникать достаточно часто. Выбор направления дальнейших действий зависит от верстальщика: либо внести исправления, как только что поступили мы, либо оставить все как есть, если внешний вид страницы при этом не пострадает.
(рис 3.7) Индикация наличия стиля у ячейки таблицыПереходим к оформлению главного меню. Сначала создадим стиль для всей второй строки основной таблицы, где укажем гарнитуру и размер шрифта и отступы:
/* Menu */
.menu1 {
padding-top: 35px;
padding-left: 55px;
padding-bottom: 90px;
font-family: Tahoma, Verdana, Arial;
font-size: 120%;
}
(рис 3.8) "Шапка", оформленная c помощью стилей CSSЦветные полоски слева от каждого пункта меню реализуем посредством использования границ ячеек, поэтому для каждой из них необходимо создать собственный стиль:
.menu2a {
padding-left: 10px;
padding-right: 55px;
border-left: solid 3px #2cc709;
}
.menu2b {
padding-left: 10px;
padding-right: 55px;
border-left: solid 3px #ffc31f;
}
.menu2c {
padding-left: 10px;
padding-right: 55px;
border-left: solid 3px #1173f4;
}
.menu2d {
padding-left: 10px;
padding-right: 55px;
border-left: solid 3px #ff1312;
}
.menu2e {
padding-left: 10px;
padding-right: 55px;
border-left: solid 3px #555f86;
}
Наконец, еще один стиль необходим для описания ссылок, присвоенных пунктам главного меню, поскольку они отличаются от ссылок в обычном тексте. В случае пунктов главного меню обычно устанавливают одинаковые цвета для посещенной и непосещенной ссылок:
.menu3:link {
color: #576267;
text-decoration: underline;
}
.menu3:visited {
color: #576267;
text-decoration: underline;
}
.menu3:hover {
color: #000000;
text-decoration: underline;
}
Стиль .menu3 применяется непосредственно к тегу <a>, например:
<a class="menu3" href="composition/index.html">Состав и свойства</a>
Завершая работу над главным меню, можно намеренно перенести на другую строку окончания "и свойства", "топливо" и "аспекты" соответственно в первом, третьем и пятом пунктах, между словами "и" и "свойства" поставить неразрывный пробел, а также задать ширину таблицы с меню равной не 100, а 90%, чтобы она не слишком растягивалась, когда окно браузера развернуто на всю страницу. На данном этапе верстки Web-страница выглядит следующим образом (рис 3.9):
(рис 3.9) "Шапка" и главное меню, оформленные c помощью стилей CSSТочно так же средствами CSS оформляются остальные блоки главной страницы: устанавливаются отступы, изменяются размер, гарнитура и цвет шрифта.
Нередко возникает необходимость применить один стиль к нескольким расположенным подряд абзацам текста. В этом случае непосредственно в html -коде перед первым из таких абзацев открывается, а после последнего — закрывается тег <div> ; соответствующий стиль применяется именно к нему. Например, два абзаца текста под фотографией нефтяной вышки в пятой строке основной таблицы могут быть оформлены следующим образом:
<div class="homepage6"> <p>Вопрос истощения запасов нефти...</p> <p>По данным ОПЕК, до 2030 года...</p> </div>
Кроме того, если требуется выделить в тексте всего лишь одно слово или словосочетание, можно и вовсе обойтись без ина панели свойств.
Окончательный результат (рис 3.10) должен быть практически идентичен эскизу, тогда верстку можно считать выполненной хорошо.
(рис 3.10) Полностью сверстанная главная страница 
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.