
- •Задача 4. Створити веб сторінку, що містить глобальний стиль заголовку та абзаців для задачі3.
- •Задача 5. Створити веб сторінку, що містить внутрішній стиль заголовку та абзаців для задачі3.
- •Задача 10. Створити веб сторінкуз використанням таблиці стилів. До завдання 10
- •Задача 11. Створіть веб сторінку (Столиця-Країна-Континент) з використанням класів. Html
- •Задача 12. Створити веб сторінку з використанням ідентифікаторів сумісно з тегом («id селектор»)).
- •Задача 13. Створити веб сторінку (що містить меню) з застосуванням дочірніх селекторів.
- •Задача 14. Створити веб сторінку, що розподілює стилі звичайних та зовнішніх посилань, що ведуть на інші сайти застосовуючи селектори атрибутів (зовнішні посилання мають бути курсивом).
- •Задача 16. Створити веб сторінку застосовуючи групування всі заголовки мають шрифт Times New Roman , абзац - Arial. При цьому кожен заголовок свого розміру та кольору.
Задача 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 селектор»)).
Тіло документу має вигляд а сама веб сторінка
Вавилонская цивилизация была создана группой кочевых племен аммореев, семитского происхождения, которые завоевали Шумер, Аккад, Ассирию и создали крупнейшую цивилизацию древнего востока - Вавилонскую, с центром в городе Вавилоне.
Она вошла в
мировую историю, как первая
цивилизация, в которой была разработана
и создана законодательная система.
Свод законов был составлен и записан
на огромной каменной плите во время
правления царя Хаммурапи (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>
<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;
}