Задание по HTML к восьмому уроку

Автор: | 18.09.2015
Нет комментариев 
<html>
  <head>
    <meta charset="utf-8">
    <title>Трансформация и плавность перехода</title>
    <link rel="stylesheet" href="test.css">
  </head>
  <body>
    <div class="block">Трансформация</div>
  </body>
</html>

test.css

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.block{
  width:200px;
  height:200px;
  background:#ff0;
  border-top:5px red solid;
  border-left:5px green solid;
  border-right:5px blue solid;
  border-bottom:5px orange solid;
  text-align:center;
  line-height:200px;
}

 

Добавьте анимацию к своей странице как на примере урок8

Задание для восьмого урока

  1. Создать страницу istoriya.html задать для нее фон
  2. Оформить текст «история города» используя стили приведенные в уроке 8.

— Первые четыре абзаца с выравниванием по левому краю, по правому краю, по центру и по обоим краям.
— Добавить три заголовка используя свойста text-decoration, а также применить его в тексте.
— Сделать чтобы все абзацы начинались с красной строки.
— Применить в тексте свойства text-transform.
— использовать свойсто вертикальное выравнивание.
— изменить растояние между символами и словами для первого абзаца.
— изменить расстояние между строками второго абзаца и третьего.
— изменить стили шрифта и font-family для заголовков.

1. Код страницы со стилями для фона, заголовка и ссылок:

<html>
<head>

<title>Город мой</title>
<meta name="keywords" content="Ключевые слова, HTML и его элементы" >
<meta charset="utf-8">
<meta name="description" content="Основы HTML от GoldStudio" >
<meta name="author" content="Джон Дое" >
<meta name="robots" content="index,follow">

<style type="text/css">
h1 {
color:#009BF9;
}
html,body {

background-image: url(gerb.jpg);
background-repeat: repeat-y;
}
}
a:link {
color: #00E5FF;
text-decoration:none;
}
a:visited {
color: #009BF9;
text-decoration:none;
}
a:active {
font-style: italic;
text-decoration:none;
}
a:hover {
color:#00FBDB;
font-style: italic;
letter-spacing: 10px;
font-weight:bold;
text-decoration:none;
}
.divstyle
{
background-color: #F7FFFF;
margin-left: 400px;
margin-right: 400px;
padding: 20px;
margin-top: 10px;
}
.spanstyle
{
Color:#FFDEAD;
}

</style>

</head>

<body>

<div class="divstyle">
….
</div>

</body>

</html>

2. Создадим стиль для выравнивания текста первого абзаца

.pleft {text-align: left}

И

<p class="pleft">ваш текст</p>

3. Стиль для выравнивания по правому краю

.pright {text-align: right}

И

<p class="pright">ваш текст</p>

4. Выравнивание по центру:

.pcenter {text-align: center}

И

<p class="pcenter">ваш текст</p>

5. Остальным абцам выравнивание по обоим краям

p {text-align: justify}

Смотрим результат:

Untitled-49

6. Пропишем стили и классы для заголовков:

h1 {
color:#009BF9;
text-decoration:underline;
}
.textа {text-decoration:overline;}
.textb {text-decoration:line-through;}

И применим класы для заголовка второго уровня и текста:

<h2 class="texta">Самый большой город Карагандинской области</h2>
<p class="textb">здесь ваш текст</p>

Смотрим результат:

Untitled-57

7. Делаем красную строку: text-indent: 20px
Стиль:

p {
text-align: justify; 
text-indent: 20px;
}

Результат:

Untitled-51

8.  Сделаем чтоб в заголовке каждое слово начиналось с заглавного символа: text-transform: capitalize
Стиль:

h1 {
color:#009BF9;
text-decoration:underline;
text-transform: capitalize;
}

Добавим стили для преобразования символов в верхний и нижний регистр:

.textc {text-transform: lowercase;}
.textd {text-transform: uppercase;}

И применим их:

<span class="textc">Страна</span>
<span class="textd">Статус</span>

Результат:

Untitled-58

9. Напишем название города например ввиде волны:

<h2>
<span>К</span>
<span style="vertical-align: -10px">а</span>
<span>р</span>
<span style="vertical-align: 10px">а</span>
<span>г</span>
<span style="vertical-align: -10px">а</span>
<span>н</span>
<span style="vertical-align: 10px">д</span>
<span>а</span>
</h2>

Результат:

Untitled-53

10. Изменим межсимвольное расстояние для первого абзаца. Добавим в класс pleft строки:

word-spacing: 10px;
letter-spacing: 5px;

результат:

Untitled-54

11. Добавим в классы pright строку line-height: 25px; и pcenter строку line-height: 10px;

Untitled-55

12. Добавим в стиль заголовка строки font-style: italic; font-family: Comic Sans MS; и в класс texta строку font-style: oblique; font-family: Monotype Corsiva, Verdana;
Смотрим результат:

Untitled-56