Задача 16. Створити веб сторінку застосовуючи групування всі заголовки мають шрифт Times New Roman , абзац - Arial. При цьому кожен заголовок свого розміру та кольору

<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="16.css"> </head> <body> <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1> <h2>Donec a diam lectus.</h2><h3> Sed sit amet ipsum mauris.</h3><h4>Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.</h4> <h5>Donec et mollis dolor.</h5> <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> h1, h2, h3, h4, h5{ font-family:Times New Roman; } p {font-family:arial} h1 {color: black} h2 {color: green} h3 {color: red} h4 {color: blue} h5 {color: yellow}

HTML

<html>

<head>

<meta charset="utf-8">

<link rel="stylesheet" href="16.css">

</head>

<body>

<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1> <h2>Donec a diam lectus.</h2><h3> Sed sit amet ipsum mauris.</h3><h4>Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.</h4> <h5>Donec et mollis dolor.</h5>

<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


h1, h2, h3, h4, h5{

font-family:Times New Roman;

}

p {font-family:arial}

h1 {color: black}

h2 {color: green}

h3 {color: red}

h4 {color: blue}

h5 {color: yellow}

Задача 17. Поясніть як будо відтворено нданий документ в браузері та поясніть чому?

Ідентифікатор має віщий приорітет ніж клас, тому у першому рядку немає рамки, а колір тексту зелений.

Клас b має вищий приорітет ніж клас a, тому що він знаходиться нижче у стилі, тому у другому рядку текст червоний і є рамка.

Задача 18. Від коректуйте вебсторінку, що було розроблено в 1-ій ЛБ (Задача 3) з застосуванням стилів, псевдо класів, псевдо елементів, ідентифікаторів.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Lt;title>Идентификаторы</title

<style type="text/css">

#A, .a {

border: none;

background: #808080;

color: green;

padding: 15px; }

.b {

border: 10px solid red;

color: red;

padding: 0; }

</style>

</head>

<body>

<p id="A" class="b">Первая строка</p>

<p class="a b">Вторая строка</p>

<p class="b">Третья строка </p>

</body>

</html>

HTML

<html>

<head>

<meta charset="utf-8">

<link rel="stylesheet" href="includes/base.css">

<link rel="stylesheet" href="includes/amazium.css">

<link rel="stylesheet" href="includes/layout.css">

<script src="includes/smoothscroll.js"type="text/6-14921.php"> ⇐ Назад

  • 1
  • 2
  • 3
  • 45
    •