W3.CSS Kapsayıcıları
bu benim başlığım
Bu benim makalem
Bu makale açık gri ve metin kahverengidir. Bu makale açık gri ve metin kahverengidir. Bu makale açık gri ve metin kahverengidir. Bu makale açık gri ve metin kahverengidir. Bu makale açık gri ve metin kahverengidir.
Bu benim Altbilgim
Konteyner Sınıfı
w3-container sınıfı , herhangi bir HTML öğesine 16 piksellik sol ve sağ dolgu ekler.
w3-container sınıfı , aşağıdakiler gibi tüm HTML kapsayıcı öğeleri için kullanılacak mükemmel bir sınıftır:
<div>, <makale>, <bölüm>, <başlık>, <altbilgi>, <form> ve daha fazlası.
Konteynerler Eşitlik Sağlar
w3 kapsayıcı , tüm HTML kapsayıcı öğeleri için eşitlik sağlar:
- Ortak kenar boşlukları
- Ortak dolgular
- Ortak hizalamalar
- Ortak yazı tipleri
- Ortak renkler
Bir kapsayıcı kullanmak için herhangi bir öğeye bir w3 kapsayıcı sınıfı eklemeniz yeterlidir:
Örnek
<div class="w3-container">
<p>The w3-container class is an important
w3.CSS class.</p>
</div>
Bir renk eklemek için bir w3- renk sınıfı eklemeniz yeterlidir:
Örnek
<div class="w3-container w3-red">
<p>London is the capital city of England.</p>
</div>
Üstbilgiler ve Altbilgiler
w3-container sınıfı , başlıklara stil vermek için kullanılabilir:
başlık
Örnek
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
Örnek
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
W3.CSS'nin <div> ve <header> öğelerini işleme biçiminde hiçbir fark yoktur.
w3-container sınıfı , altbilgileri biçimlendirmek için kullanılabilir:
Örnek
<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
Örnek
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Birçok web sayfası, <header> ve <footer> öğeleri yerine <div> öğelerini kullanır.
Makaleler ve Bölümler
w3-container sınıfı , <article> ve <section> öğelerine stil vermek için kullanılabilir:
Örnek
<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>
Birçok web sayfası, <article> ve <section> öğeleri yerine <div> öğelerini kullanır.
Web Sayfası Örneği
başlık
Araba, ulaşım için kullanılan tekerlekli, kendi kendine çalışan bir motorlu araçtır. Terimin çoğu tanımı, arabaların öncelikle yollarda çalışacak şekilde tasarlandığını belirtir. (Vikipedi)
HTML <div> öğelerini kullanan örnek
<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 anlamsal öğelerini kullanan örnek
<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>
Konteyner Dolgusu
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>