Блокові та рядкові елементи Html


Елементи HTML поділяються на
  • Блокові елементи (block)
  • Рядкові (вбудовані) елементи (inline)
  • Рядково- (вбудований) блокові (inline-block)
Приклад  блокових та рядкових елементів

Блокові елементи:

  • <Html> - документ html,
  • <Body> - тіло документа,
  • <Div> - блок,
  • <P> - параграф,
  • <H1-h6> - заголовки від найбільшого, до самого малого,
  • <Ul, ol, dl> - маркований, нумерований список і список визначень,
  • <Dt, dd> - дочірні елементи dl,
  • <Address> - курсивне форматування тексту, використовується для вказівки автора тексту,
  • <Blockquote> - використовується для виділення довгих цитат,
  • <Form> - форма html призначена для обміну інформацією між користувачем і сервером.
Блокові елементи мають такі особливості:
  1. Блокові елементи браузер виводить на екран в прямокутні області, що йдуть один за одним зверху вниз
  2. Займають весь доступний простір по горизонталі.
  3. Блокові елементи починаються з нового рядка;
  4. Блоковим елементам можна задавати ширину, висоту, внутрішні і зовнішні відступи.
  5. Ширина для блокових елементів є: width + margin + padding + border (аналогічно з висотою);
Результат пошуку зображень за запитом "структура блочного элемента html"
Пов’язане зображення

  1. Висота блоку розраховується виходячи з вмісту блоку;
  2.  Блокові елементи можуть містити блокові і рядкові елементи. Однак блоковий елемент P є винятком: всередині нього можуть знаходитись тільки рядкові елементи.
  3.  Блокові елементи можуть міститися тільки в межах блокових елементів.
  4. В блокові елементи можна вкласти як блокові, так і рядкові елементи;
  5. Блокові едементи мають по замовчуванню властивість display:block, яка може не вказуватись в css

Рядкові елементи:

  • <a> - гіперпосилання,
  • <Abbr> - абревіатура,
  • <B> - жирний шрифт,
  • <br> - новий рядок,
  • <Cite> - назва, використовується для художніх творів,
  • <Code> - код програми,
  • <I> - курсивний шрифт,
  • <Input> - елемент форми, може бути кнопкою, текстовим полем,
  • <Label> - створює зв'язок з елементом форми, елемент форми,
  • <Select> - створює групу тегів option, з списком, що випадає,
  • <Small> - зменшує розмір шрифту тексту на одну одиницю,
  • <Span> - рядковий елемент,
  • <Textarea> - елемент форми, багаторядкове поле введення.
 Особливості рядкових елементів:
    Строчные элементы
  1. Рядкові елементи розташовуються один за одним в одному рядку, при необхідності рядок переноситься. Щоб заборонити перенесення тексту всередині елемента, потрібно додати властивість white-space:nowrap;
  2. До і після рядкового елемента відсутні переноси рядків.
  3. Ширина і висота рядкового елемента залежить тільки від його змісту
  4. Властивості, пов'язані з розмірами (width, height) не застосовуються.
  5. Розмір елемента дорівнює його вмісту +  значення margin, border і padding.
  6. Для рядкових елементів margin працює тільки по горизонталі, але ніяк не вертикалі. Таким чином, властивості margin-top і margin-bottom не діють.
  7. Рядкові елементи містяться всередині блочних і займають місце в рядку, переходячи на наступні рядки, якщо в поточному не вистачило місця
  8.  В основному вони використовуються для зміни вигляду тексту або його смислового виділення.

ЗАВДАННЯ 1

  1. Додайте в CSS-правило для класу p-first властивість  лівий зовнішній відступ margin-left: 50px;
  2. В CSS-правило для класу p-second властивість  внутрішні відступи padding: 20px;
  3. В 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 встановити такі властивості
  1.  Для тегів p, div, h1, h2  зовнішні відступи  20px; внутрішні відступи 10px;
  2. для рядкових елементів задати  колір фону - жовтий
  3.  на сторінку 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 встановити такі властивості

  1. Для тега  div зовнішній відступ 20рх, внутрішній 10рх
  2. Задайте елементам з класом example ширину 100px і висоту 100px, колір фону голубий
  3. для тега  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

  1. Додайте в зазначені CSS-правила властивісті для тега div: ширину 280px; висоту 20px; зовнішній відступ 20px; розмір шрифта 12px
  2.  Додайте в зазначені CSS-правила властивість padding (внутрішні відступи):
  • для класу p1 - padding: 10px;,
  • для класу p2 - padding: 10px 20px;,
  • для класу p3 - padding: 10px 20px 30px;
3. Для блокових елементів задати колір фону  голубий, для рядкових - жовтий


<!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>







Немає коментарів:

Дописати коментар