Елементи HTML поділяються на
- Блокові елементи (block)
- Рядкові (вбудовані) елементи (inline)
- Рядково- (вбудований) блокові (inline-block)
Блокові елементи:
- <Html> - документ html,
- <Body> - тіло документа,
- <Div> - блок,
- <P> - параграф,
- <H1-h6> - заголовки від найбільшого, до самого малого,
- <Ul, ol, dl> - маркований, нумерований список і список визначень,
- <Dt, dd> - дочірні елементи dl,
- <Address> - курсивне форматування тексту, використовується для вказівки автора тексту,
- <Blockquote> - використовується для виділення довгих цитат,
- <Form> - форма html призначена для обміну інформацією між користувачем і сервером.
Блокові елементи мають такі особливості:
- Блокові елементи браузер виводить на екран в прямокутні області, що йдуть один за одним зверху вниз
- Займають весь доступний простір по горизонталі.
- Блокові елементи починаються з нового рядка;
- Блоковим елементам можна задавати ширину, висоту, внутрішні і зовнішні відступи.
- Ширина для блокових елементів є: width + margin + padding + border (аналогічно з висотою);
- Висота блоку розраховується виходячи з вмісту блоку;
- Блокові елементи можуть містити блокові і рядкові елементи. Однак блоковий елемент P є винятком: всередині нього можуть знаходитись тільки рядкові елементи.
- Блокові елементи можуть міститися тільки в межах блокових елементів.
- В блокові елементи можна вкласти як блокові, так і рядкові елементи;
- Блокові едементи мають по замовчуванню властивість display:block, яка може не вказуватись в css
Рядкові елементи:
- <a> - гіперпосилання,
- <Abbr> - абревіатура,
- <B> - жирний шрифт,
- <br> - новий рядок,
- <Cite> - назва, використовується для художніх творів,
- <Code> - код програми,
- <I> - курсивний шрифт,
- <Input> - елемент форми, може бути кнопкою, текстовим полем,
- <Label> - створює зв'язок з елементом форми, елемент форми,
- <Select> - створює групу тегів option, з списком, що випадає,
- <Small> - зменшує розмір шрифту тексту на одну одиницю,
- <Span> - рядковий елемент,
- <Textarea> - елемент форми, багаторядкове поле введення.
- Рядкові елементи розташовуються один за одним в одному рядку, при необхідності рядок переноситься. Щоб заборонити перенесення тексту всередині елемента, потрібно додати властивість white-space:nowrap;
- До і після рядкового елемента відсутні переноси рядків.
- Ширина і висота рядкового елемента залежить тільки від його змісту
- Властивості, пов'язані з розмірами (width, height) не застосовуються.
- Розмір елемента дорівнює його вмісту + значення margin, border і padding.
- Для рядкових елементів margin працює тільки по горизонталі, але ніяк не вертикалі. Таким чином, властивості margin-top і margin-bottom не діють.
- Рядкові елементи містяться всередині блочних і займають місце в рядку, переходячи на наступні рядки, якщо в поточному не вистачило місця
- В основному вони використовуються для зміни вигляду тексту або його смислового виділення.
ЗАВДАННЯ 1
- Додайте в CSS-правило для класу p-first властивість лівий зовнішній відступ margin-left: 50px;
- В CSS-правило для класу p-second властивість внутрішні відступи padding: 20px;
- В CSS-правило для класу p-third властивість ширини width: 50%;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Властивості розміру блоку</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Блочні елементи і CSS</h1>
<p class="p-first">Розміри і відступи за допомогою CSS можна задавати блоковим елементам. Абзац, тег & lt; p & gt;, є одним з них.</p>
<p class="p-second">Блоковим елементам можна задавати внутрішні і зовнішні відступи.</p>
<p class="p-third">Також їм можна задавати ширину і висоту.</p>
</body>
</html>
ЗАВДАННЯ 2
У CSS встановити такі властивості- Для тегів p, div, h1, h2 зовнішні відступи 20px; внутрішні відступи 10px;
- для рядкових елементів задати колір фону - жовтий
- на сторінку html в абазацах тексту додати елемент em та div (на власний розсуд)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Рядкові елементи</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Рядкові елементи</h1>
<p><em>Рядкові елементи</em> <strong>не створюють переносів</strong> <span>рядка</span> до і після себе. Такі елементи розташовуються в рядку зліва направо. Якщо <em>рядковий елемент</em> <span>не поміщається в батьківський контейнер</span>, то він переноситься на наступний рядок.</p>
</body>
</html>
ЗАВДАННЯ 3
У CSS встановити такі властивості- Для тега div зовнішній відступ 20рх, внутрішній 10рх
- Задайте елементам з класом example ширину 100px і висоту 100px, колір фону голубий
- для тега span колір фону - жовтий
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ширина і висота</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="example">Блокові елементи за замовчуванням займають всю доступну ширину. Їх висота залежить від змісту.</div>
<div><span class="example">Розміри рядкових елементів повністю залежать від їх змісту і за допомогою CSS не змінюються. Розміри рядкових елементів повністю залежать від їх змісту і за допомогою CSS не змінюються. Розміри рядкових елементів повністю залежать від їх змісту і за допомогою CSS не змінюються</span></div>
</body>
</html>
ЗАВДАННЯ 4
- Додайте в зазначені CSS-правила властивісті для тега div: ширину 280px; висоту 20px; зовнішній відступ 20px; розмір шрифта 12px
- Додайте в зазначені CSS-правила властивість padding (внутрішні відступи):
- для класу p1 - padding: 10px;,
- для класу p2 - padding: 10px 20px;,
- для класу p3 - padding: 10px 20px 30px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Внутрішні відступи, властивість padding</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="p1">Блок 1</div>
<div class="p2">Блок 2</div>
<div class="p3">Блок 3</div>
<div>
<span class="p1">Текст 1</span>
<span class="p2">Текст 2</span>
<span class="p3">Текст 3</span>
</div>
</body>
</html>
Немає коментарів:
Дописати коментар