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