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>
Попробуйте сами »
