3. Висота рядків:
p.small {
line-height: 0.8;
}
Допускаються: <множник> | <розмір>
| <відсотки> | normal.
Абзацний відступ:
p {
text-indent: 50px;
}
Допускаються: розміри і відсотки.
4. Задача 78
Відтворіть оформлення тексту:
Lorem ipsum dolor sit amet, dicit percipit
scripserit ei nam.
Est eu nisl debet cetero, sumo petentium
dissentiunt eum ut.
Mel Erat Mucius Tibique In, Nam Altera
Postea Vituperata Id, Ad Feugait Ocurreret
Scriptorem Vel.
Iuvaret reprimique cu sed, no mel hinc
omnesque.
5. Font Family:
p {
font-family: "Times New
Roman", Times, serif;
}
Font Style:
p.italic {
font-style: italic;
}
Допускаються: normal | italic |
oblique.
9. relative – позиціонування відносно вихідного місця. left,
top, right, bottom дозволяють змістити відносно нього.
Приклад:
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>Текст перед DIV з position: relative; </p>
<div class="relative">
Елемент зі стилем position: relative;
</div>
10. fixed – елемент фіксується в точці, заданій параметрами
left, top, right, bottom. При прокрутці сторінки не міняє
положення. Місця під елемент на сторінці не лишається.
Приклад:
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: fixed;</h2>
<div class="fixed">
Елемент з position: fixed;
</div>
11. absolute – схоже на fixed, але положення відраховується
відносно батьківського елемента, якщо для нього встановлено
position: relative. Якщо ні – відносно сторінки.
Приклад:
<style>
div.relative {
position: relative;
width: 400px; height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px; right: 0;
width: 200px; height: 100px;
border: 3px solid #73AD21;
}
</style></head>
<body>
<h2>position: absolute;</h2>
<div class="relative">Елемент з position: relative;
<div class="absolute"> Елемент з position:
absolute;</div>
</div>
12. sticky – елемент позиціонується відносно, поки не досягає
певного порогу, після чого поводиться як fixed. Можна
використовувати для фіксації заголовка.
Приклад:
<style>
#one {
background-color: #f3f5f6;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<h1 id="one">Заголовок</h1>
Багато тексту... <br>
Багато тексту... <br>
13. z-index. Для елементів з absolute, fixed або relative
z-index дозволяє задавати положення шару, як для прозорих
плівок, складених одна на одну. Значення z-index – ціле
число (можна і <0). Чим більше число, тим вище шар.
Приклад:
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>z-index</h1>
<img src="images/grass_bg.jpg">
<p>z-index картинки = -1, тому вона розташована за
текстом.</p>
</body>
14. Задача 80.0
Створіть документ з заголовком H1 і двома
абзацами.
Розмістіть H1 відносно вікна браузера, за
50px від верху і 100px від правого краю.
21. Розв’язок
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<img src="image.gif" width="100" height="140">
22. overflow
Ця властивість визначає параметри відображення
вмісту блочного елемента, якщо він не поміщається
в задані розміри.
overflow: auto | hidden | scroll | visible
visible відображається весь вміст, навіть
якщо він перевищує розміри.
hidden тільки область всередині елемента,
решта ховається.
scroll завжди додаються смуги прокрутки.
auto смуги прокрутки з’являються тільки при
необхідності.
23. Приклад:
<style>
div {
width: 80px; height: 80px;
}
.auto {
overflow: auto;
}
.hidden {
overflow: hidden;
}
.scroll {
overflow: scroll;
}
.visible {
overflow: visible;
}
</style></head>
<body>
<div class="auto">Lorem ipsum dolor sit amet, ne mei diam democritum
voluptatibus.</div>
<div class="hidden">Lorem ipsum dolor sit amet, ne mei diam democritum
voluptatibus.</div>
<div class="scroll">Lorem ipsum dolor sit amet, ne mei diam democritum
voluptatibus.</div>
<div class="visible">Lorem ipsum dolor sit amet, ne mei diam
democritum voluptatibus.</div>
24. overflow-x і overflow-y –
аналогічно, але стосовно горизонтального
і вертикального розмірів відповідно.
Задача 81
Розмістіть картинку розміром 800х600px у
DIV розміром 400х300px. Нехай
відображається тільки горизонтальна
лінійка прокрутки, а вертикальна – ні.
26. display
Ця властивість визначає чи буде елемент
відображатись і як саме.
Основні значення:
display: none; - елемент ховається і місце під
нього не резервується.
(visibility: hidden; - елемент ховається,
але під нього резервується місце)
display: inline; - елемент відображається як
рядковий.
display: block; - відображається як блочний.
27. Задача 82
Створіть сторінку з лінками на сторінки
Facebook, Twitter, Youtube і зі списком
• Аудиторія
• Рік заснування
• Особливості
Зробіть лінки блочними елементами
(block), а пункти списку – рядковими
(inline).
