Задача 11. Створіть веб сторінку (Столиця-Країна-Континент) з використанням класів

HTML

<html>

<head>

</head>

<body>

<table>

<tr>

<th>Столица</th><th>Страна</th><th>Часть света</th>

</tr>

<tr><td>Абуджа</td><td>Нигерия</td><td>Африка</td></tr>

<tr><td>Аддис-Абеба</td><td>Эфиопия</td><td>Африка</td></tr>

<tr><td>Аккра</td><td>Гана</td><td>Африка</td></tr>

<tr><td>Алжир</td><td>Алжир</td><td>Африка</td></tr>

<tr><td>Алжир</td><td>Иордания</td><td>Азия</td></tr>

<tr><td>Амстердам</td><td>Нидерланды</td><td>Европа</td></tr>

<tr><td>Андорра-ла-Велья</td><td>Андорра</td><td>Европа</td></tr>

<tr><td>Анкаpа</td><td>Турция</td><td>Азия</td></tr>

<tr><td>Антананариву</td><td>Мадагаскар</td><td>Африка</td></tr>

<tr><td>Апиа</td><td>Самоа</td><td>Австралия и Океания</td></tr>

<tr><td>Асмэра</td><td>Эритрея</td><td>Африка</td></tr>

<tr><td>Астана</td><td>Казахстан</td><td>Азия</td></tr>

<tr><td>Асунсьон</td><td>Парагвай</td><td>Южная Америка</td></tr>

<tr><td>Афины</td><td>Греция</td><td>Европа</td></tr>

<tr><td>Ашхабад</td><td>Туркмения</td><td>Азия</td></tr>

</table>

</body>

</html>

CSS

table {

border: dotted gray;

border-collapse: collapse;

}

tr th{

background-color: #66FFFF;

}

td, th{

border-left: dotted gray;

}

td:nth-child(1) {

font-width: bold;

}

td:nth-child(2) {

color: blue;

text-decoration: underline;

}

td:nth-child(3) {

color: red;

text-align: center;

}

tr:nth-child(odd) {

background-color: #ddd;

}

Задача 12. Створити веб сторінку з використанням ідентифікаторів сумісно з тегом («ID селектор»)).

Тіло документу має вигляд а сама веб сторінка

Вавилонская цивилизация была создана группой кочевых племен аммореев, семитского происхождения, которые завоевали Шумер, Аккад, Ассирию и создали крупнейшую цивилизацию древнего востока - Вавилонскую, с центром в городе Вавилоне.

Она вошла в мировую историю, как первая цивилизация, в которой была разработана и создана законодательная система. Свод законов был составлен и записан на огромной каменной плите во время правления царя Хаммурапи (1792-1750 г. до н.э.).

p {

color: #0e0;

margin-left: 15%;

margin-right: 15%;

text-indent: 2.5em;

text-align: justify;

}

#opa {

border: 1px solid #000;

background-color: #afa;

color: #a00;

margin: 0;

padding-left: 7.5%;

padding-right: 0.5em;

text-align: right;

font-style: italic;

}

Задача 13. Створити веб сторінку (що містить меню) з застосуванням дочірніх селекторів.

Формат

Шрифт

Абзац

Список

Границі

Сервис

Правопис

Мова

Таблица

Вставити

Видалити

Сортування

HTML

<html>

<head>

</head>

<body>

<table>

<tr>

<td>Формат<br>

<table>

<tr><td>Шрифт</td></tr>

<tr><td>Абзац</td></tr>

<tr><td>Список</td></tr>

<tr><td>Границі</td></tr>

</table>

</td>

<td>Сервис<br>

<table>

<tr><td>Правопис</td></tr>

</table>

</td>

<td>Таблица<br>

<table>

<tr><td>Вставити</td></tr>

<tr><td>Видалити</td></tr>

<tr><td>Сортування</td></tr>

</table>

</td>

</tr>

</table>

</body>

</html>

CSS

body table tr {

background-color: yellow;

}

td{

vertical-align: top;

}

td table tr td{

border: 1px solid #fff;

background-color: white;

color: blue;

text-decoration: underline;

padding: 0;

border-color: black;

}

table {

border-collapse: collapse;

border-width: 1px;

}

Задача 14. Створити веб сторінку, що розподілює стилі звичайних та зовнішніх посилань, що ведуть на інші сайти застосовуючи селектори атрибутів (зовнішні посилання мають бути курсивом).

В кінець сторінки Вавилонская цивилизация была создана группой кочевых племен аммореев, семитского происхождения, которые завоевали Шумер, Аккад, Ассирию и создали крупнейшую цивилизацию древнего востока - Вавилонскую, с центром в городе Вавилоне. На початок сторінки yandex.ua google.com

Столица	Страна	Часть света
Абу-Даби	ОАЭ	Азия
Абуджа	Нигерия	Африка
Аддис-Абеба	Эфиопия	Африка
Аккра	Гана	Африка
Алжир	Алжир	Африка
Амман	Иордания	Азия
Амстердам	Нидерланды	Европа

HTML

<html>

<head>

</head>

<body>

<a href="#bottom">В кінець сторінки</a><br>

<a href="#top">На початок сторінки</a> <a href="http://www.yandex.ua">yandex.ua</a> <a href="http://www.google.com">google.com</a>

</body>

</html>

CSS

A[href^="http://"] {

font-style: italic;

}

Задача 14. Створити веб сторінку, що містить таблицю з використанням псевдо класів, при позіціюванні миші на певній строці має змінювати колір (з білого на сірий), а також містить форму, що дозволяє вводити назву столиці та назву країни (використовуючи псевдоклас:focus), поле в якому встановлено курсор має змінювати колір на зелений.

HTML

<html>

<head>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

<form>

</form>

</body>

</html>

CSS

table, td{

border: 1px solid;

border-collapse: collapse;

}

input:focus{

color: green;

}

tr:hover {

background-color: gray;

}

Задача 15. Створити веб сторінку застосовуючи псевдо елементи таким чином, щоб перша літера кожного абзацу була в тричі більша за основний текст, підкреслена шрифт - Brush Script Std, зеленого кольору.

<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="15.css"> </head> <body> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p><p>Donec a diam lectus. </p><p>Sed sit amet ipsum mauris. </p> </body> </html>

p:first-letter{ font-size: 3em; text-decoration: underline; color: green; font-family: Brush Script Std; }

HTML

<html>

<head>

</head>

<body>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p><p>Donec a diam lectus. </p><p>Sed sit amet ipsum mauris. </p>

</body>

</html>

CSS

p:first-letter{

font-size: 3em;

text-decoration: underline;

color: green;

font-family: Brush Script Std;

}