Professional Documents
Culture Documents
Лабораторна робота №11
Лабораторна робота №11
Лабораторна робота №11
Хід роботи:
2. Для цього створіть та відкрийте файл index.html, додайте у нього усі необхідні HTML
теги (HTML, HEAD, TITLE, BODY), що повинні міститися у кожному HTML документі, а
після цього розмістіть між тегом <BODY> </BODY> наступний блочний елемент:
Даний елемент буде виступати у якості обгортки для форматування нашого тексту.
<div class="definition"> Стилем або CSS (Cascading Style Sheets, каскадні таблиці стилів)
називається набір параметрів форматування, що застосовується до елементів
документа, щоб змінити їх зовнішній вигляд.</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="wrapper">
<div class="definition"> Стилем або CSS (Cascading Style Sheets, каскадні таблиці стилів)
називається набір параметрів форматування, що застосовується до елементів
документа, щоб змінити їх зовнішній вигляд.</div>
</div>
</body>
</html>
3. Тепер настав час створити файл стилів CSS. Для цього у своїй робочій папці створіть
текстовий документ та перейменуйте його на style.css, а потім відкрийте його на
редагування у звичайному текстовому редакторі.
Для того, щоб відформатувати наш HTML документ першим рядком у файлі style.css
додайте:
body {
Background-color: #e1e1e1;
.wrapper {
width: 940px;
margin: 0 auto;
Цей код буде відповідати за форматування нашого блоку <div class="wrapper"> </div>, а
саме за його центрування відповідатиме CSS властивість (Margin: 0 auto;), а за фізичний
розмір (Width: 940px;). Як ви могли помітити, в якості селектора ми використали назву
Класу (class="wrapper"), такий спосіб дозволить нам швидко обрати необхідний елемент в
DOM.
.title {
Text-align: center;
Text-decoration: underline;
Font-weight: 600;
Font-size: 18px;
Color: #333333;
padding-bottom: 50px;
Таким чином (Text-align: center;) ми вирівняли текст в середині блоку <div class="title"> та
задали йому наступні параметри: підкреслення тексту (Text-decoration: underline;),
товщину (Font-weight: 600;), розмір (Font-size: 18px;), колір (Color: #333333;) та відступ
після тексту (padding-bottom: 50px;).
Тепер нам необхідно відформатувати усі наступні блоки таким чином, щоб вони
розміщувалися один за одним, для цього нам необхідно до файлу style.css додати
наступний код:
Float: left;
padding: 20px;
margin: 5px;
height: 200px;
.autor {
Width: 250px;
Background-color: #4583e6;
Color: #ffffff;
.topic {
Width: 250px;
Background-color: #336e20;
Color: #ffffff;
.definition {
Width: 250px;
Background-color: #793aa5;
Color: #ffffff;
Тепер, якщо все було зроблено коректно, оновивши вікно браузеру F5 ви повинні
побачити відформатований HTML документ з використанням CSS, як на рис. 1.
Індивідуальне завдання:
Примітка: Для того, щоб відформатувати блоки таким чином, щоб один блок
розміщувався над іншим вам необхідно використати CSS властивості
(position: absolute; top: 20px; left: 50px;), або інші значення (top,left)
відповідно до того, де саме повинні розміщуватися ваші блоки. А щоб один
блок розмістити поверх іншого використовуйте властивість (z-index: 1;) і
чим більша цифра (1, 2, 3), тим вище розміщуватиметься блок.
Варіант Завдання
4
Текст всередині
блоку
Текст всередині
блоку
Текст всередині
блоку
5
Текст всередині
блоку
Текст всередині
блоку
Текст всередині
блоку
6
Текст Текст Текст всередині блоку
всередині всередині
блоку блоку
7
Текст всередині блоку
8
Текст всередині Текст всередині
блоку блоку
6
Текст всередині
блоку
Текст всередині Текст всередині
блоку блоку
10
Текст всередині Текст всередині
блоку блоку
11
Текст всередині
блоку
Текст
всередині
блоку
12
Текст всередині
блоку
Текст всередині
Текст всередині
блоку
блоку
13
Текст всередині Текст всередині
блоку блоку
14
Текст
всередині
блоку Текст
всередині
Текст
блоку
всередині
15
Текст всередині блоку
16
Текст всередині
блоку
17
18
Текст всередині Текст всередині
блоку блоку
Текст всередині
блоку
19
Текст всередині
блоку
Текст всередині
блоку
20
Текст всередині блоку