W3.CSS Контейнери
Це заголовок
Це стаття
Ця стаття світло-сіра, а текст коричневий. Ця стаття світло-сіра, а текст коричневий. Ця стаття світло-сіра, а текст коричневий. Ця стаття світло-сіра, а текст коричневий. Ця стаття світло-сіра, а текст коричневий.
Мені вже набридло повторювати, що ця стаття світло-сіра, а текст коричневий. Ця стаття світло-сіра, а текст коричневий. Ця стаття світло-сіра, а текст коричневий. Ця стаття світло-сіра, а текст коричневий. Ця стаття світло-сіра, а текст коричневий. Зрозуміло?!👿
Це нижній колонтитул
Клас контейнера
Клас w3-container додає 16px лівий і правий відступ (padding) до будь-якого елементу HTML.
Клас w3-container є ідеальним класом для використання на всіх елементах контейнера HTML, таких як:
<div>, <article>, <section>, <header>, <footer>, <form> та ін.
Контейнери забезпечують рівність
Клас w3-container забезпечує рівність для всіх елементів контейнера HTML:
- Спільні поля (margin)
- Спільні відступи (padding)
- Спільні вирівнювання (align)
- Спільні шрифти (font)
- Спільні кольори (color)
Щоб використовувати контейнер, просто додайте клас w3-container до будь-якого елементу:
Приклад
<div class="w3-container">
<p>Класс w3-container є важливим класом W3.CSS.</p>
</div>
Спробуйте самі »
Щоб додати колір, просто додайте клас w3-color:
Приклад
<div class="w3-container w3-red">
<p>Лондон является столицей Англии.</p>
</div>
Спробуйте самі »
Заголовки (header) та нижні колонтитули (footer)
Клас w3-container може використовуватись для стилізації заголовків:
Header
Немає різниці в тому, як W3.CSS обробляє елементи <div> та <header>.
Клас w3-container може бути використано для оформлення нижніх колонтитулів:
Приклад
<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Інформація нижнього колонтитула знаходиться тут</p>
</div>
Спробуйте самі »
Приклад
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Інформація нижнього колонтитула знаходиться тут</p>
</footer>
Спробуйте самі »
Багато веб-сторінок використовують елементи <div> замість елементів <header> та <footer>.
Статті (article) та розділи (section)
Клас w3-container може використовуватись для стилізації елементів <article> та <section>:
Приклад
<div class="w3-container">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<article class="w3-container">
<h2>Paris</h2>
<p>The Paris area is one of the largest population centers in Europe,
with more than 2 million inhabitants.</p>
</article>
<section class="w3-container">
<h2>Tokyo</h2>
<p>Tokyo is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</section>
Спробуйте самі »
Багато веб-сторінок використовують елементи <div> замість елементів <article> та <section>.
Приклад веб-сторінки
Header
Автомобіль - це самохідний транспортний засіб на колесах, що використовується для перевезення. В більшості визначень цього терміну вказано, що автомобілі призначені для руху в основному по дорогах. (Вікіпедія)
Приклад використання HTML елементів <div>
<div class="w3-container w3-red">
<h1>Header</h1>
</div>
<img src="img_car.jpg" alt="Автомобиль" style="width:100%">
<div class="w3-container">
<p>Автомобіль - це самохідний транспортний засіб на колесах, що використовується для перевезення. В більшості визначень цього терміну вказано, що автомобілі призначені для руху в основному по дорогах. (Вікіпедія)</p>
</div>
<div class="w3-container w3-red">
<h5>Footer</h5>
</div>
Спробуйте самі »
Приклад використання семантичних HTML елементів
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
<img src="../images/img_car.jpg" alt="Car" style="width:100%">
<article class="w3-container">
<p>Автомобіль - це самохідний транспортний засіб на колесах, що використовується для перевезення. В більшості визначень цього терміну вказано, що автомобілі призначені для руху в основному по дорогах. (Вікіпедія)</p>
</article>
<footer class="w3-container w3-teal">
<h5>Footer</h5>
</footer>
Спробуйте самі »
Відступи (padding) контейнера
Клас w3-container має за умовчанням 16px лівий і правий відступи (padding), і не має відступів вгорі та знизу:
Приклад
<div class="w3-container w3-blue">
У мене немає верхнього або нижнього відступу.
</div>
Спробуйте самі »
Як правило, вам не потрібно змінювати padding контейнера за замовчуванням, оскільки параграфи і заголовок забезпечують поля, які будуть імітувати padding.
Я заголовок
Я параграф.
Приклад
<div class="w3-container w3-blue">
<h1>А заголовок</h1>
<p>Я параграф.</p>
</div>
Спробуйте самі »
