Тема: Web-сервер Денвер. Html. 3

Тема: Каскадные таблицы стилей – CSS.

Задание 11

1. 
   Создайте в html файле Lab11.html пять абзацев длиной в три строки.
   
2. 
   В css файле напиши стиль для селектора тега body, в котором укажите цвет текста (#009933), размер букв (14px) и название шрифта (Arial):
   
3. 
   В css файле создайте шрифт абзаца, в котором установите разраженный интервал текста между буквами на 10px
   
4. 
   Один из абзацев сделать курсивом и подчеркнутым.
   
5. 
   Создать класс для форматирования третьего абзаца со следующими свойствами:
   

• 
  шрифт абзаца Comic Sans; (font-family)
  
• 
  размер шрифта 25 пт; (font-size)
  
• 
  отступ красной строки в 50 пикселей (text-indent).
  
• 
  подключите стиль к третьему абзацу (используя атрибут class).
  

6. 
   Создайте класс .rich для отображения пятого абзаца, содержащий следующие свойства текста:
   

• 
  Шрифт Arial, 15 пт;
  
• 
  Начертание жирное + курсив (font-weight; font-style);
  
• 
  Цвет букв оранжевый (color);
  
• 
  Высота строки 25 пунктов (line-height).
  

7. 
   Создайте класс perenos и запретите в нем перенос слов в пределах одного абзаца. Назначте это свойство второму и четвертому абзацу.
   
8. 
   Создать класс, содержащий заглавные красные буквы. Применить данный класс к тегу

   .
   

9. 
   Создайте класс следующими свойствами:
   

• 
  Шрифт Courier 12 пт;
  
• 
  все буквы заглавные;
  
• 
  межбуквенный интервал разряженный на 200%;
  
• 
  текст подчеркнутый;
  
• 
  красная строка 2 см;
  
• 
  междустрочный интервал двойной.
  

10. 
    Добавьте еще пару абзацев и назначьте им свойства этого класса.
    

Задание 12

1. 
   Создайте html-файл Lab12.html, содержащий блочный элемент DIV.
   
2. 
   Создайте css-файл и подключите его к html-документу.
   
3. 
   Создайте класс k1, в котором определите размер блока 200х200 пикселей, фон (светло-зеленый) и рамку (сплошную, темно-зеленую, шириной в 3 пикселя).
   
4. 
   Добавьте еще пять таких же блоков размером 200х200 пикселей.
   
5. 
   Расположить блоки друг за другом и добавить расстояние между ними (поэксперементируйте со свойствами: padding, margin, border и offset).
   
6. 
   Создайте горизонтальный светофор из трех блоков. Ширину блоков сделайте динамичной, что бы они изменялась в зависимости от ширины окна, но все блоки должны иметь одну ширину. Задайте каждому блоку свой цвет. Отступы для body уберите с помощью css.
   

7. 
   Создайте три блока. В первом блоке сделайте рамку, шириной с разным типом линии с разных сторон блока. Во втором блоке задайте фоновое изображение (background-image). В третьем блоке, задайте фон в виде точек. Добавляйте строчки по одной и смотрите изменения в браузере после каждой строки.
   

8. 
   Расположите блоки один над одним как показано на рисунке 12.
   
9. 
   Создать блок со скругленными углами.
   
10. 
    Описать стиль для изменения прозрачности любого изображения при наведении на него курсора мыши.
    
11. 
    Используя блоки, их вложенность, фон, выравнивание, свойство float, шрифт Georgia создайте шапку (см. рисунок 13).