Контрольная работа по "Программированию"

Задание.

1.  «Раскрасить» свой сайт из лабораторной работы №1 с помощью CSS. Стилевые правила должны размещаться в отдельных файлах папки css и внедряться на страницы с помощью или @import. Необходимые для оформления рисунки разместить в отдельной папке image.

«Работоспособность» всех вариантов оформления стилями должна быть проверена в разных браузерах и при различных размерах окна/фрейма родительского элемента.

Все варианты заданий должны содержать:

• определение стилей с использованием различных типов селекторов тегов (контекстные, дочерние, соседние);11111111
• определение стилей с использованием селекторов атрибутов элементов;
• определение составного цвета и сложного фона документа и/или отдельных элементов: background-image, background-repeat, background-attachment, background-position и другие background-* правила;
• градиенты: linear(radial)-gradient, repeating-linear(radial)-gradient.

Примеры градиентов для реализации: флаг РФ, звездное небо, капли дождя на воде, снежинки, кирпичная кладка, шахматная доска, тетрадный лист в клетку/линейку, геометрический рисунок ткани, тротуарная плитка и т.д. Реализация предполагает использование сложных градиентных рисунков совместно с изображениями (jpg, png, tiff) или без них.

• определение шрифтов: font-family, font-style, font-variant, font-weight, font-size, font-face, line-height. Понравившийся «не стандартный» шрифт на любом из бесплатно распространяемых ресурсов, представленный в форматах EOT, TTF, SVG, WOFF, внедрить на свои странички;1111111
• элементы иконочных шрифтов (например, Awesome);
• форматирование текста (отображение символов, слов и абзацев): letter-spacing, text-transform, text-shadow, text-decoration, text-align, text-indent, vertical-align, light-height, color;
• использование различных типов носителей (просмотр в мобильном браузере,  предварительный просмотр перед печатью страницы и т.д.).11111
• блоковые элементы. Добавление рамок, теней к блоковым элементам: border-image, border-*-radius, box-shadow;
• «авторское» отображение списков (list-style-type, list-style-image) и таблиц;1111
• динамические и визуальные эффекты с использованием псевдоклассов и псевдоэлементов;11111111
• CSS3-переходы;
• 2D-трансформации;
• анимацию.111111

1. Разработать дизайн страницы «Дополнительно» с использование «гибкой» модели отображение элементов
2. Решить следующие задачи с использованием только CSS:

• реализовать раскрывающийся список навигационной панели (левый фрейм из лабораторной работы №1).
• движущийся элемент. В качестве движущегося элемента можно выбрать любой блоковый элемент страницы, либо рисунок с прозрачным фоном.  

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

Стилевые правила разместил в папке css и внедрял на страницы с помощью .

Использовал селекторы:

P > I { /* Дочерний селектор */

    color: red;

   }

B + I {

    color: blue;

   }

Селектор атрибутов элементов:

hh[atr~=external] {

    background: yellow; /* Желтый цвет фона */

   }

Определил составной цвет и сложный фон отдельных элементов а также использовал линейный градиент:

div.gr{

background: #faf0e6;

background: linear-gradient(to right, #F6EFD2, #CEAD78);

background-repeat: repeat-y;  .

}

Использовал семейство шрифтов font-family:

 font-family: Arial, Verdana, sans-serif;

font-family: Times, 'Times New Roman', serif;

font-size: 90%;

Элементы иконочных шрифтов:

.my_icon:before {

        content: "\f003";

        font-family: FontAwesome;

        color:#393;

        padding-right:10px

}

.my_icon2:before {

        content: "\f219";

        font-family: FontAwesome;

        color:#393;