Задача 11. Створіть веб сторінку (Столиця-Країна-Континент) з використанням класів
HTML
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="11.css">
</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>Андорра-ла-Велья</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 селектор»)).
Тіло документу має вигляд а сама веб сторінка
Вавилонская цивилизация была создана группой кочевых племен аммореев, семитского происхождения, которые завоевали Шумер, Аккад, Ассирию и создали крупнейшую цивилизацию древнего востока - Вавилонскую, с центром в городе Вавилоне.
|
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>
<meta charset="utf-8">
<link rel="stylesheet" href="13.css">
</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>
<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>
<meta charset="utf-8">
<link rel="stylesheet" href="13.css">
</head>
<body>
<a name="top"></a>
<a href="#bottom">В кінець сторінки</a><br>
Вавилонская цивилизация была создана группой кочевых племен аммореев, семитского происхождения, которые завоевали Шумер, Аккад, Ассирию и создали крупнейшую цивилизацию древнего востока - Вавилонскую, с центром в городе Вавилоне.<br>
<a href="#top">На початок сторінки</a> <a href="http://www.yandex.ua">yandex.ua</a> <a href="http://www.google.com">google.com</a>
<a name="bottom"></a>
</body>
</html>
CSS
A[href^="http://"] {
font-style: italic;
}
Задача 14. Створити веб сторінку, що містить таблицю з використанням псевдо класів, при позіціюванні миші на певній строці має змінювати колір (з білого на сірий), а також містить форму, що дозволяє вводити назву столиці та назву країни (використовуючи псевдоклас :focus), поле в якому встановлено курсор має змінювати колір на зелений.
HTML
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="14.css">
</head>
<body>
<table>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>
<form>
<input type="text" value="abcdefg">
</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>
<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>
CSS
p:first-letter{
font-size: 3em;
text-decoration: underline;
color: green;
font-family: Brush Script Std;
}