Контейнеры W3.CSS
Это мой заголовок
Это моя статья
Эта статья светло-серая, а текст коричневый. Эта статья светло-серая, а текст коричневый. Эта статья светло-серая, а текст коричневый. Эта статья светло-серая, а текст коричневый. Эта статья светло-серая, а текст коричневый.
Это мой нижний колонтитул
Класс контейнера
Класс w3-container добавляет 16 пикселей слева и справа к любому элементу HTML.
Класс w3-container идеально подходит для всех элементов контейнера HTML, таких как:
<div>, <article>, <section>, <header>, <footer>, <form> и другие.
Контейнеры обеспечивают равенство
Контейнер w3 обеспечивает равенство для всех элементов контейнера HTML:
- Общие поля
- Общие прокладки
- Общие выравнивания
- Общие шрифты
- Общие цвета
Чтобы использовать контейнер, просто добавьте к любому элементу класс w3-container :
Пример
<div class="w3-container">
<p>The w3-container class is an important
w3.CSS class.</p>
</div>
Чтобы добавить цвет, просто добавьте класс w3- color :
Пример
<div class="w3-container w3-red">
<p>London is the capital city of England.</p>
</div>
Заголовки и колонтитулы
Класс w3-container можно использовать для оформления заголовков:
Заголовок
Пример
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
Пример
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
Нет никакой разницы в том, как W3.CSS обрабатывает элементы <div> и <header>.
Класс w3-container можно использовать для оформления нижних колонтитулов:
Пример
<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
Пример
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Многие веб-страницы используют элементы <div> вместо элементов <header> и <footer>.
Статьи и разделы
Класс 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>.
Пример веб-страницы
Заголовок
Автомобиль – это колесное самоходное транспортное средство, используемое для передвижения. В большинстве определений этого термина указывается, что автомобили предназначены в первую очередь для движения по дорогам. (Википедия)
Пример использования элементов HTML <div>
<div class="w3-container w3-red">
<h1>Header</h1>
</div>
<img src="img_car.jpg" alt="Car" style="width:100%">
<div
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</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="img_car.jpg" alt="Car" style="width:100%">
<article
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>
<footer class="w3-container
w3-teal">
<h5>Footer</h5>
</footer>
Заполнение контейнера
The w3-container class has a default 16px left and right padding, and no top or bottom padding:
Example
<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>
Normally you will not have to change the default padding of a container, because paragraphs and heading provide margins that will simulate padding.
I am a Heading
I am a paragraph.
Example
<div class="w3-container w3-blue">
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>