LARAVEL
SASS
KUTU MODELİ
HTML elementlerinin satır düzeyinde ve blok düzeyde oluştururken dikdörtgen bir yer işgal ettikleri ve belli bir konumları bulunmaktadır. Bu duruma kutu modeli denir.
width:Kutunun genişliğini belirler.PX,%,em gibi değerler verilir.
height:Kutu modelinin yüksekliğini belirler.
border:Kutu modelinin kenar çizgilerini ve özeliklerini belirler.
margin:Kutunun dış boşluğunu belirler.
padding:Kutunun iç boşluğunu belirler.
background:Kutunun arkaplanını belirler.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS KUTU MODELİ</title> <!--ÇAĞLARBOSTANCI--> <style> #kutu{ width:50%;/*Kutunun genişliğini verir.*/ height:15em;/*Kutunun yüksekliğini belirler.*/ background:rgba(0,51,51,0.5);/*Arka plan rengini belirler.*/ border:1px solid #000;/*Kenarlıkları belirler.*/ margin:20px;/*Kutunun dış boşluğunu belirler.*/ padding:20px;/*Kutunun iç boşluğunu belirler.*/ } </style> </head> <body> <div id="kutu">MERHABA DÜNYA</div> </body> </html> |
Margin Kullanımı
Margin kutunun dış boşluğunu belirlemede kullanılır. Margin ve paddin değeri ayrı ayrıda verilebiler. margin: üst sağ alt sol; bu şekilde kullanıldığı gibi sadece iki değer de alabilir. margin: 30px 40px; bu kullanımda alt ve üst margin değeri 30px sağ ve sol değeri 40px olacaktır. Margin kullanımın da ek olarak bir de kutuyu ortalamak için bir yöntem bulunmaktadır. margin:20px auto; Bu şekilde yapılan bir margin tanımı; üsten 20px bir boşluk ve auto ise bu kutunun sağ ve soldan ortalanmasını sağlayacaktır.
margin-top:üst poşluk verir.
margin-left: soldan boşluk verir.
margin-right: sağdan boşluk verir.
margin-bottom: alttan boşluk verir
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS KUTU MODELİ</title> <style> .kutu1{ width:20%; height:15em; background:rgba(0,51,51,0.5); margin:10px 40px 30px 50px; } .kutu2{ width:20%; height:15em; background:rgba(0,51,51,0.5); margin:100px 400px; } .kutu3{ width:50%; height:15em; background:rgba(0,51,51,0.5); margin:10px auto; } </style> </head> <body> <div class="kutu1">üsten 10px sağdan 40px alttan 30px ve soldan 50px bir boşluk verdir.</div> <div class="kutu2">üseten ve alttan 10px sağdan ve soldan 40px dış boşluk verildi</div> <div class="kutu3">üsten 10 px sağdan ve soldan ortalı</div> </body> </html> |
Paddin (iç boşluk) Kullanımı.
Paddin kutunun iç boşluğunu belirlemede kullanılır. Padding değeri ayrı ayrıda verilebiler. padding: üst sağ alt sol; bu şekilde kullanıldığı gibi sadece iki değer de alabilir. padding: 30px 40px; bu kullanımda alt ve üst margin değeri 30px sağ ve sol değeri 40px olacaktır.
padding-top:üst poşluk verir.
padding-left: soldan boşluk verir.
padding-right: sağdan boşluk verir.
padding-bottom: alttan boşluk verir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS KUTU MODELİ</title> <style> .kutu1{ width:20%; height:15em; background:rgba(0,51,51,0.5); padding:10px 40px 30px 50px; margin:2px; } .kutu2{ width:20%; height:15em; background:rgba(0,51,51,0.5); padding:100px 400px; margin:2px; } </style> </head> <body> <div class="kutu1">üsten 10px sağdan 40px alttan 30px ve soldan 50px bir boşluk verdir.</div> <div class="kutu2">üseten ve alttan 10px sağdan ve soldan 40px dış boşluk verildi</div> </body> </html> |
Overflow (Taşma) Kullanımı
Kutuların içeriğinin dışına taşması durumuna overflow denir. Overflow aldığı değerler aşağıda verilmiştir.
visible: Varsayılan değerdir. Taşan içerik gösterilir.
hidden: Taşan içerik gizlenir.
scroll: Taşan içerik bir çerçeve içine alınır ve taşan kısım kaydırma çubuğu ile gösterilir.
auto: İçerik taşma sınırlarına ulaştığında kaydırma çubukları devreye girer.
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS KUTU MODELİ</title> <style> .kutu1{ width:20%; height:10em; overflow:hidden;/*Taşan içeriği göstermez*/ padding:100px; background:rgba(0,102,0,0.2); } .kutu2{ width:20%; height:10em; overflow:scroll;/*Taşan içeriği kaydırma çubukları ile gösterir.*/ padding:100px; background:rgba(0,102,0,0.2); } .kutu3{ width:20%; height:10em; overflow: auto;/*İçerik taşma aşamasına geldiğinde kaydırma çubukları çıkar.*/ padding:100px; background:rgba(0,102,0,0.2); } .kutu4{/*Overflow verilmeyen taşan içerik.*/ width:10%; height:10em; background:rgba(0,102,0,0.2); } </style> </head> <body> <div class="kutu1">Taşan içeriği göstermezTaşan içeriği göstermezTaşan içeriği göstermezTaşan içeriği göstermezTaşan içeriği göstermezTaşan içeriği göstermezTaşan içeriği göstermezTaşan içeriği göstermezTaşan içeriği göstermezTaşan içeriği göstermezTaşan içeriği göstermezTaşan içeriği göstermezTaşan içeriği göstermezTaşan içeriği göstermezTaşan içeriği göstermezTaşan içeriği göstermezTaşan içeriği göstermezTaşan içeriği göstermezTaşan içeriği göstermezTaşan içeriği göstermezTaşan içeriği göstermez</div> <div class="kutu2">Taşan içeriği kaydırma çubukları ile gösterir.Taşan içeriği kaydırma çubukları ile gösterir.Taşan içeriği kaydırma çubukları ile gösterir.Taşan içeriği kaydırma çubukları ile gösterir.Taşan içeriği kaydırma çubukları ile gösterir.Taşan içeriği kaydırma çubukları ile gösterir.Taşan içeriği kaydırma çubukları ile gösterir.Taşan içeriği kaydırma çubukları ile gösterir.Taşan içeriği kaydırma çubukları ile gösterir.Taşan içeriği kaydırma çubukları ile gösterir.Taşan içeriği kaydırma çubukları ile gösterir.Taşan içeriği kaydırma çubukları ile gösterir.Taşan içeriği kaydırma çubukları ile gösterir.Taşan içeriği kaydırma çubukları ile gösterir.</div> <div class="kutu3">İçerik taşma aşamasına geldiğinde kaydırma çubukları çıkar.İçerik taşma aşamasına geldiğinde kaydırma çubukları çıkar.İçerik taşma aşamasına geldiğinde kaydırma çubukları çıkar.İçerik taşma aşamasına geldiğinde kaydırma çubukları çıkar.İçerik taşma aşamasına geldiğinde kaydırma çubukları çıkar.İçerik taşma aşamasına geldiğinde kaydırma çubukları çıkar.İçerik taşma aşamasına geldiğinde kaydırma çubukları çıkar.İçerik taşma aşamasına geldiğinde kaydırma çubukları çıkar.İçerik taşma aşamasına geldiğinde kaydırma çubukları çıkar.İçerik taşma aşamasına geldiğinde kaydırma çubukları çıkar.İçerik taşma aşamasına geldiğinde kaydırma çubukları çıkar.</div> <div class="kutu4">Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.Overflow verilmeyen taşan içerik.</div> </body></html> |
KUTU MODELİ KAYDIRMA
Float Kullanımı
Kutuyu bulunduğu konumdan kaydırır.Css de sayfa sunumlarından çok kullanılan bir özelliktir.
left:Kutuyu sola hizalar.
right:Kutuları sağ tarafa doğru hizalar.
top:Kutuları üste doğru hizalar.
bottom: Kutuları alta doğru hizalar.
inside:Kutunun bağlı olduğu yere bağlı olarak right veya left değeri alır. Varsayılan değeri left tir.
outside:Bu değer sadece sayfalı medya için geçerliğdir. Kutunun bulunduğu yere bağlı olarak sağa veya sola değer alır. Varsayılan değeri right tır.
start:atandığı kutu modelini soldan kaydırır. leftt veya top değeri alır.
end:Atandığı kutunun soldan sağa kaydırır. right veya bottom özelliği gösterir.
none:Kaydırma özelliğini iptal eder.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS KUTU MODELİ</title> <style> .kutu1{ width:20%; height: auto; float:left; border:2px solid #000; } .kutu2{ width:10%; height:auto; float:left; border:2px solid #000; } .kutu3{ width:10%; height:auto; float:left; border:2px solid #000; } .kutu4{ width:10%; height:auto; float:left; border:2px solid #000; } .kutu5{ overflow:hidden; width:70%; height:15em; background:#060; border:2px solid #000; } .paragraf{ width:50%; height:10em; float:right; background:#9F0; } </style> </head> <body> <div class="kutu1">SOLA YASLI KUTU 1SOLA YASLI KUTU 1SOLA YASLI KUTU 1SOLA YASLI KUTU 1SOLA YASLI KUTU 1SOLA YASLI KUTU 1SOLA YASLI KUTU 1SOLA YASLI KUTU 1SOLA YASLI KUTU 1SOLA YASLI KUTU 1SOLA YASLI KUTU 1SOLA YASLI KUTU 1</div> <div class="kutu2">SOLA YASLI KUTU 2SOLA YASLI KUTU 2SOLA YASLI KUTU 2SOLA YASLI KUTU 2SOLA YASLI KUTU 2SOLA YASLI KUTU 2SOLA YASLI KUTU 2SOLA YASLI KUTU 2SOLA YASLI KUTU 2SOLA YASLI KUTU 2SOLA YASLI KUTU 2SOLA YASLI KUTU 2SOLA YASLI KUTU 2SOLA YASLI KUTU 2SOLA YASLI KUTU 2SOLA YASLI KUTU 2SOLA YASLI KUTU 2</div> <div class="kutu3">SOLA YASLI KUTU 3SOLA YASLI KUTU 3SOLA YASLI KUTU 3SOLA YASLI KUTU 3SOLA YASLI KUTU 3SOLA YASLI KUTU 3SOLA YASLI KUTU 3SOLA YASLI KUTU 3SOLA YASLI KUTU 3SOLA YASLI KUTU 3SOLA YASLI KUTU 3SOLA YASLI KUTU 3SOLA YASLI KUTU 3SOLA YASLI KUTU 3SOLA YASLI KUTU 3SOLA YASLI KUTU 3</div> <div class="kutu4">SOLA YASLI KUTU 4SOLA YASLI KUTU 4SOLA YASLI KUTU 4SOLA YASLI KUTU 4SOLA YASLI KUTU 4SOLA YASLI KUTU 4SOLA YASLI KUTU 4SOLA YASLI KUTU 4</div> <div class="kutu5"><p class="paragraf"> SAĞA YASLI KUTU SAĞA YASLI KUTUSAĞA YASLI KUTUSAĞA YASLI KUTUSAĞA YASLI KUTUSAĞA YASLI KUTUSAĞA YASLI KUTUSAĞA YASLI KUTU</p><p>KUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENELKUTU GENEL</p></div> </body> </html> |
Clear Kullanımı
Float ile kaydırlımış bir blok başka bir blok ile yanyana geldiklerinde her iki blogun kenarları bir birine değer.Her iki blok aynı konuma hizalanır. Blokları farklı yönlere hizalama gerektiğinde clear kullanılır.
Aldığı değerler.
left:Atandığı blok elementin üst sınırını daha önce left ile kaydırılan kutunun alt sınırında olmasını sağlar.
right: Atandığı blok elementi daha önce right ile kaydırılan kutunun uzaklaştırılmasını sağlar.
top:Atandığı blok elementin üst sınırını daha önce top ile kaydırılan kutunun alt sınırında olmasını sağlar.
bottom: Atandığı elementin daha önce bottom ile kaydırılan kutunun kaydırılmasını sağlar.
both:Atandığı blok elementin daha önce left top veya right, bottom ile kaydırılan kutudan uzak tutulur.
none: Oluşan kutunun daha önce left, top, veya right, bottom kaydırılan kutularla bir ilgisi olmaz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS KUTU MODELİ</title> <style> .geneldiv{ height:auto; width:90%; margin:0 auto; } .geneldiv div{ overflow: hidden;} .kutuust{ width:auto; height:5em; background:#F90;} .kutusol{ float:left; width:30%; background:#0C0; height:15em;} .kutuicerik{ width:40%; background:#369; height:15em;} .kutusag{ float:right; width:30%; background:#96C; height:15em;} .kutualt{ clear:both; width:auto; height:2em; background:#0CF;} </style> </head> <body> <div class="geneldiv"> <div class="kutuust">KUTU ÜST</div> <div class="kutusol">KUTU SOL</div> <div class="kutusag">KUTU SAĞ</div> <div class="kutuicerik">KUTU İÇERİK</div> <div class="kutualt">KUTU ALT</div> </div> </body> </html> |
Float kullanımında kutu modelini gösterme
Display kullanımı
Elementlerin görünürlik özelliğini tanımlar. Elementlerin normal davranışlarını değiştirip yeniden tanımlanmamızı sağlar.
Display’ın aldığı değerler:
none:Elementi gizler.
block: Elementi blok düzeyinde görüntüler.
inline: Satır düzeyinde görüntüler.
inline-blok: Hem blok düzeyinde hem satır düzeyinde gösterir.
list-item:Liste olarak görüntüler.
run-in: Blok düzeyinde ya da inline düzeyinde bir dikdörtgen şeklinde gösterir. Firefox desteği yoktur.
compact: Blok ya da inline düzeyine bağlı olarak, içerik blok düzeyinde ya da satır düzeyinde işlenir ve gösterilir.
table: Tablo biçiminde gösterilir.
inline-table: Tablo içi satır düzeyinde gösterilir.
table-row-group:Tablo satır gurubu olarak gösterir.
table-header-group: Tablo başlık grubu olarak görüntüler.
table-footer-group:Tablo alt bilgi satırı olarak görüntüler.
table-row: tablo satırı olarak görüntüler.
table-column-group: Tablo sutun gurubu olarak görüntüler.
table-column: Tablo sutunu olarak görüntüler.
table-cell:Tablo hücresi olarak görüntüler.
table-caption:Tablo başlığı açıklaması olarak görüntüler.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--ÇAĞLARBOSTANCI--> <title>CSS KUTU MODELİ</title> <style> .geneldiv{ height:auto; width:90%; margin:0 auto; } .geneldiv div{ overflow: hidden;} .kutu1,.kutu2,.kutu3{ width:33%; height:10em; background:#F90; border-left:1px solid white; display:inline-block;} .kutu4{ width:100%; background:#96C; height:10em;} </style> </head> <body> <div class="geneldiv"> <div class="kutu4">KUTU 4</div> <div class="kutu1">KUTU 1</div> <div class="kutu2">KUTU 2</div> <div class="kutu3">KUTU 3</div> <div class="kutu4">KUTU 4</div> </div> </body> </html> |
display:table,table-row,table-cell Kullanımı
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>pseudo-sınıfları</title> <style> i,em,b{border:1px solid #000; padding:5px; margin:2px;} em{ display:table;} b{ display:table-row;} i{ display:table-cell;} </style> </head> <body> <em> <b><i>HÜCRE</i><i>HÜCRE</i><i>HÜCRE</i></b> <b><i>HÜCRE</i><i>HÜCRE</i><i>HÜCRE</i></b> <b><i>HÜCRE</i><i>HÜCRE</i><i>HÜCRE</i></b> <b><i>HÜCRE</i><i>HÜCRE</i><i>HÜCRE</i></b> </em> </body> </html> |
display:list-item kullanımı
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>pseudo-sınıfları</title> <style> .list{ display:list-item; list-style:inside square;} </style> </head> <body> <em> <b class="list"><i>HÜCRE</i><i class="list">HÜCRE</i><i class="list">HÜCRE</i></b> <b><i class="list">HÜCRE</i><i class="list">HÜCRE</i><i class="list">HÜCRE</i></b> <b><i class="list">HÜCRE</i><i>HÜCRE</i><i class="list">HÜCRE</i></b> <b><i>HÜCRE</i><i>HÜCRE</i><i>HÜCRE</i></b> </em> </body> </html> |
display:blok; display:none; kullanımı
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>pseudo-sınıfları</title> <style> ul li ul{ display:none;} ul li:hover > ul{ display:block;} </style> </head> <body> <ul> <li>A SINIF ELEMENT 1 <ul> <li>B SINIF ELEMENT 1</li> <li>B SINIF ELEMENT 2</li> <li>B SINIF ELEMENT 3</li> </ul> </li> <li>A SINIF ELEMENT 2</li> <li>A SINIF ELEMENT 3</li> </ul> </body> </html> |
Visibility Kullanımı
Belgede elementlerin gizelenmesi ve gösterilmesi ile ilgili bir özelliktir. Aldığı değerler aşağıda listelenmiştir.
none:Element gösterilmez. Bu özelliği sadec IE desteklemiyor.
visible:Element gösterilir.
hidden:Element gizlenir ve yerine boş bir dikdörtgen oluşur.
collapse:Hidden ile aynı özelliktedir.Bu özelliği IE desteklemiyor.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>pseudo-sınıfları</title> <style> img{ visibility: visible; float:left; margin:5px;} p{ width:30%;height:auto; overflow:hidden;} span{ visibility:hidden;} img:hover+span{ visibility: visible;} </style> </head> <body> <p> <img src="1.jpg" width="240"> <span><strong>GÖRSELİN BAŞLIĞI</strong></span><br> İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. </p><p>İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. İçerik alanı. </p> </body> </html> |
Box-sizing Kullanımı
Kutu oluşturmada margin,padding ve border genişlikleri kutunun var olan genişliğini üzerine eklenir. Margin,paddin ve border gibi özelliklerin genişliğini kutunun genişliğine etki etmemesi için kullanılır. box-sizing iki adet değer alır.
Content-box:Kutu genişliği ve yüksekliğinde border ve padding değerleri dikkate alınmaz. Kutunun genişlik veyükseklik değeri içerik+border+padding toplamı kadar olur.
border-box:Kutu genişliği ve yüksekliği border ve padding değerleri kadar olur. Kutunun genişliği ya da yüksekliğine border ve padding değerleri dahil edilir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>pseudo-sınıfları</title> <style> .kutu1{ width:20%; height:15em; border:5px solid #060; padding:15px; margin:10px;} .kutu2{ width:20%; height:15em; border:5px solid #060; padding:15px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; margin:10px;} </style> </head> <body> <div class="kutu1">width:20%; height:15em; border:5px solid #060; padding:15px; margin:10px;</div> <div class="kutu2">width:20%; height:15em; border:5px solid #060; padding:15px; box-sizing: border-box; margin:10px;;</div> </body> </html> |
Columns Sütunlara Ayırma
Word de alışık olduğumuz metni iki veya daha fazla sütuna bölme özelliğinin aynısını css ile web sayfalarında yapabilmemizi sağlar. IE10 firefox, crome,opera web tarayıcıları tarafından desteklenir. Mozillah için -moz- crome için -webkit- öntakıları kullanılır. Ek özellikleri aşağıda belirtilmiştir.
column-count:Sutun sayısını belirler. Sütün sayısını auto belirlediğimizde kolon sayıs column-width değerine göre kendinden hesaplanır.
column-width: Sunun genişliğini ayarlar. Sütun genişliği element içeriğini genişlik değerine göre kolonlara böler.
column-gap:sutun arasındaki boşluğu ayarlar.
column-rule: Sutunlar arasına dikey çizgi eklemek için kullanılır. çizgi biçimleri için border sitillerini solid,dashed gibi kullanabiliyoruz.
column-fill: Sutun yüksekliğini ayarlamada kullanılır. Firefox desteklemiyor.
column-span:Sutunlar arasına yatay başlık koymakyı sağlar. Firefox desteklemiyor.
columns:column-count ve column-width özelliklerini tek başına yerine getirir.
column-span:Sutunlar arasına yatay bir başlık eklemesini sağlar. Firefox desteklemiyor.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>pseudo-sınıfları</title> <style> div{ text-align:justify; column-gap:50px; column-width:200px; column-count:4; column-rule:2px solid #030; -webkit-column-gap:50px; -webkit-column-width:200px; -webkit-column-count:4; -webkit-column-rule:2px solid #030; -moz-column-gap:50px; -moz-column-width:200px; -moz-column-count:4; -moz-column-rule:2px solid #030; } h2{ column-span:all; -moz-column-span:all; -webkit-column-span:all; font-size:24px; background:#CCC; } </style> </head> <body> <div><h2>Zünnun’u Mısri’nin Tımarhaneye Düşmesi</h2><br/> dostdediginZunnun’u Mısri’nin başına bir hal geldi. Bu hal onda yeni yeni coşkunluklar, yeni yeni cezbeler meydana getirmekteydi. Bunu anlamayan gafiller ondan rahatsız oldular. Nihayet Zünnun’u tımarhaneye attılar.Bunu duyan dostları onu ziyarete gittiler. Zünnun onlara bağırdı: – “Siz kimsiniz, neden geldiniz?” dedi. Onlar sükunetle cevap verdiler: – “Biz senin dostlarınız, buraya halini, hatırını sormak için geldik.” dediler. Zünnun bunun üzerine, onlara saldırdı, üzerlerine taş, toprak atmaya onlara sopa sallamaya başladı. Her biri korkusundan bir yana kaçtı. Bunun üzerine Zünnun bir kenarda durup gülmeye başladı. – “Neden böyle kaçıp her biriniz bir köşeye sığındınız. Hani dostlarımdınız. Dostun eziyeti dosta ağır gelir mi, dostluğun alameti dosttan gelen zorluğa katlanmak değil midir?” dedi. * Kalpte her an başka başka şeyler baş gösterir insan bazen şeytanlaşır, bazen melekleşir, bazen tuzak kesilir, bazen de yırtıcı hayvan. * İnci nedir ki? Bir katrede gizlenmiş bir deniz, bir zerreye sığınmış güneş. * Madem bir hırsızlık ediyorsun bari latif bir inciyi çal, madem ki hamallık ediyorsun bari değerli bir yük taşı. Mesnevi’den Hikayeler<h2>Zünnun’u Mısri’nin Tımarhaneye Düşmesi</h2><br/> dostdediginZunnun’u Mısri’nin başına bir hal geldi. Bu hal onda yeni yeni coşkunluklar, yeni yeni cezbeler meydana getirmekteydi. Bunu anlamayan gafiller ondan rahatsız oldular. Nihayet Zünnun’u tımarhaneye attılar.Bunu duyan dostları onu ziyarete gittiler. Zünnun onlara bağırdı: – “Siz kimsiniz, neden geldiniz?” dedi. Onlar sükunetle cevap verdiler: – “Biz senin dostlarınız, buraya halini, hatırını sormak için geldik.” dediler. Zünnun bunun üzerine, onlara saldırdı, üzerlerine taş, toprak atmaya onlara sopa sallamaya başladı. Her biri korkusundan bir yana kaçtı. Bunun üzerine Zünnun bir kenarda durup gülmeye başladı. – “Neden böyle kaçıp her biriniz bir köşeye sığındınız. Hani dostlarımdınız. Dostun eziyeti dosta ağır gelir mi, dostluğun alameti dosttan gelen zorluğa katlanmak değil midir?” dedi. * Kalpte her an başka başka şeyler baş gösterir insan bazen şeytanlaşır, bazen melekleşir, bazen tuzak kesilir, bazen de yırtıcı hayvan. * İnci nedir ki? Bir katrede gizlenmiş bir deniz, bir zerreye sığınmış güneş. * Madem bir hırsızlık ediyorsun bari latif bir inciyi çal, madem ki hamallık ediyorsun bari değerli bir yük taşı. Mesnevi’den Hikayeler<h2>Zünnun’u Mısri’nin Tımarhaneye Düşmesi</h2><br/> dostdediginZunnun’u Mısri’nin başına bir hal geldi. Bu hal onda yeni yeni coşkunluklar, yeni yeni cezbeler meydana getirmekteydi. Bunu anlamayan gafiller ondan rahatsız oldular. Nihayet Zünnun’u tımarhaneye attılar.Bunu duyan dostları onu ziyarete gittiler. Zünnun onlara bağırdı: – “Siz kimsiniz, neden geldiniz?” dedi. Onlar sükunetle cevap verdiler: – “Biz senin dostlarınız, buraya halini, hatırını sormak için geldik.” dediler. Zünnun bunun üzerine, onlara saldırdı, üzerlerine taş, toprak atmaya onlara sopa sallamaya başladı. Her biri korkusundan bir yana kaçtı. Bunun üzerine Zünnun bir kenarda durup gülmeye başladı. – “Neden böyle kaçıp her biriniz bir köşeye sığındınız. Hani dostlarımdınız. Dostun eziyeti dosta ağır gelir mi, dostluğun alameti dosttan gelen zorluğa katlanmak değil midir?” dedi. * Kalpte her an başka başka şeyler baş gösterir insan bazen şeytanlaşır, bazen melekleşir, bazen tuzak kesilir, bazen de yırtıcı hayvan. * İnci nedir ki? Bir katrede gizlenmiş bir deniz, bir zerreye sığınmış güneş. * Madem bir hırsızlık ediyorsun bari latif bir inciyi çal, madem ki hamallık ediyorsun bari değerli bir yük taşı. Mesnevi’den Hikayeler</div> </body> </html> |
Flex-Box Esnek Kutu Modeli
Ana kutu display:box; ile bir kutu gibi görünmesini sağlar. Güncel bütün web tarayıcıları desteklemektedir. -moz- mozilla için -webkit- crome için -ms- internet explorer için ön tanımlar kullanılmaktadır.
Aldığı Özellikleri:
box-flex: Verilen rakama göre ana kutunun boyutuna göre kutuların esnek davranmasını ve yeniden boyutlandırılmasını sağlar.
box-orient: kutuların yatay veya dikeyde hizalanmasını sağlar. Varsayılan değer yataydır. Parantez içindeki değerleri alır.(horizontal/vertical/inline-axis/block-axis)
box-ordinal-group:Kutuların sırasını belirler. Kutu sıralarını 0,1,2,3 gibi rakamlarla değiştirebiliriz. Bu özelliği Opera web tarayıcısı order özelliği ile IE10 web tarayıcısı box-ordinal ile desteklenmektedir.
box-pack: Kutuları ana kutunun iine göre hizalar ve başa (start), sona(end), ortaya(center), ikiyana yaslama (justify) değerlerinden bir tanesini alır.
box-aling: box-orient değerine göre örneğin yatay(horizontal) ya da dikey (vertical) konuma göre soldan ya da üstten hizalama yapar. stretch|start|end|center|baseline değerlerinden birisini alır. Varsayılan stretch değeridir.
box-direction:Kutuların sıralanma yönünü değiştirir. reverse değeri verildiğinde kutular tersten sıralanır. Varsayılan değerr normal dir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>pseudo-sınıfları</title> <style> .anadiv{ width:50%; height:15em; background:#999; display:box; display:-ms-flexbox; display:-webkit-box; display:-moz-box; box-orient:vertical; -ms-box-orient:vertical; -webkit-box-orient:vertical; -moz-box-orient:vertical; box-pack:justfiy; -ms-box-pack:justfiy; -moz-box-pack:justfiy; -webkit-box-pack:justfiy; } .kut1{ box-flex:1; -ms-box-flex:1; -moz-box-flex:1; -webkit-box-flex:1; box-ordinal-group:1; -ms-box-ordinal-group:1; -webkit-box-ordinal-group:1; -moz-box-ordinal-group:1; order:1;/*Opera*/ } .kut2{ box-flex:1; -ms-box-flex:1; -moz-box-flex:1; -webkit-box-flex:1; box-ordinal-group:2; -ms-box-ordinal-group:2; -webkit-box-ordinal-group:2; -moz-box-ordinal-group:2; order:2;/*Opera*/ } .kut3{ box-flex:1; -ms-box-flex:1; -moz-box-flex:1; -webkit-box-flex:1; box-ordinal-group:3; -ms-box-ordinal-group:3; -webkit-box-ordinal-group:3; -moz-box-ordinal-group:3; order:3;/*Opera*/ } .kut1,.kut2,.kut3{ border:1px solid white; width:5em; background-color:rgba(0,153,0,0.5); } </style> </head> <body> <div class="anadiv"> <div class="kut1">KUTU 1</div> <div class="kut2">KUTU 2</div> <div class="kut3">KUTU 3</div> </div> </body> </html> |