Kenarlık(border), içerik alanı ve padding etrafındaki bir veya daha fazla çizgiye denir.
- boder-style
- border-top-style, border-right-style, border-bottom-style, border-left-style
- border-width
- border-top-width, border-right-width, border-bottom-width, border-left-width
- border-color
- border-top-color, border-right-color, border-bottom-color, border-left-color
- border
Sırasıyla incelersek:
border-style
Yapısı : border-style:
Aldığı Değerler : [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4} | inherit
Başlnagıç değeri:tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border-style özelliği kenarlık stilini belirlememizi sağlar.(Örn: dotted(noktalı), double(çift) vd.) 10 farklı değeri CSS desteklemektedir. Bu özellik kenarlığın görünmesi için tanımlanması gereklidir. Bir veya dört değer alabilir eğer dört değer alırsa sırasıyla üst, sağ, alt ve sol kenarlık stilini belirler. Eğer tek değeri varsa tüm kenarlık değeri ataması yapılmış demektir. Eğer iki veya üç değer ataması yapılmış ise margin’de gördüğümüz sıralama söz konusudur.
p.yeni {
border-style: solid;
}
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
border-top-style, border-right-style, border-bottom-style, border-left-style
Yapısı : border-[top,left,right,bottom]-style:
Aldığı Değerler : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
Başlangıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border-top-style, border-right-style, border-bottom-style, border-left-style border-style özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.
h1{
border-style: solid;
border-left-style: none;
}
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
border-width
Yapısı : border-width: <deger\>
**Aldığı Değerler :** [ thin | medium | thick | <uzunluk değeri> ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
İlk olarak stili belirledikten sonra kenarlık kalınlığını belirlemek için border-width değeri kullanılır.
border-width yüzde değeri alamaz.
p {
margin: 5px;
background-color: silver;
border-style: solid;
border-width: 1px;
}
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
border-top-width, border-right-width, border-bottom-width, border-left-width
Yapısı : border-[top,left,right,bottom]-width: <deger\>
**Aldığı Değerler :** thin | medium | thick | <uzunluk değeri > | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border-top-width, border-right-width, border-bottom-width, border-left-width border-width özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.
h2 {
border-left-width: medium;
border-style: solid;
}
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
border-color
Yapısı : border-color: <deger\>
**Aldığı Değerler :** [ <renk> | transparent ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border-color özelliği kenarlık rengini belirler. (X)html’deki bordercolor ile benzerdir.
p {
border-style: solid;
border-color: gray;
}
Tek değer tüm kenarlık renklerini belirler, her kenar için ayrı renk tanımlamasıda yapılabilir.
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
border-top-color, border-right-color, border-bottom-color, border-left-color
Yapısı : border-[top,left,right,bottom]-color: <deger\>
**Aldığı Değerler :** [ <renk> | transparent ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border-colorözelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.
Not: Bir kenarlığı yok etmek için kalınlık değeri veririz. Birde CSS2 ile birlikte gelen transparent özelliği vardır ki bu kenarlığı yok etmez sadece görünmez yapar.
p {
border-style: solid;
border-color: gray;
}
Tek değer tüm kenarlık renklerini belirler, her kenar için ayrı renk tanımlamasıda yapılabilir.
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
border
Yapısı : border: <deger>
Aldığı Değerler : <border-width\>| <border-style\>| <renk>
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
borderyukarıda sıraladığımız özellikleri tek sefer de tanımlamak için kullanılır. Bir kısaltmadır.
h1 {
border: thick silver solid;
}
Bu özellikleri tek tek atamak isteseydik şöyle bir kod yazmamız gerekecekti.
h1 {
border-top: thick silver solid;
border-bottom: thick silver solid;
border-right: thick silver solid;
border-left: thick silver solid;
}
Margin özelliği elementin etrafındaki boşluk olarak tanımlanır. Negatifdeğer alabilir. Tek tek özellikler(margin-top,margin-left vd.) atanabildiğigibi tek bir özellikle(margin) de tanımlama yapılabilir. Margin özelliklerinianlamak için lütfen Box modellerine bir göz atın.
- margin-top
- margin-right
- margin-bottom
- margin-left
- margin
margin-top
Yapısı : margin-top: <deger>
Aldığı Değerler : | <yüzde>| auto
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
margin-top özelliği elementin üst kenar boşluğunu bellibir değer kadar veya yüzde olarak belirler.Negatif değer alabilir.
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
margin-right
Yapısı : margin-right: <deger>
Aldığı Değerler : | <yüzde>| auto
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
margin-right özelliği elementin sağ kenar boşluğunu bellibir değer kadar veya yüzde olarak belirler.Negatif değer alabilir.
p.diger {
margin-right: 50%
}
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
margin-bottom
Yapısı : margin-bottom: <deger>
Aldığı Değerler : | <yüzde>| auto
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
margin-bottom özelliği elementin alt kenar boşluğunu bellibir değer kadar veya yüzde olarak belirler.Negatif değer alabilir.
p {
margin-bottom: 10px
}
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
margin-left
Yapısı : margin-left: <deger>
Aldığı Değerler : | <yüzde>| auto
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
margin-left özelliği elementin sol kenar boşluğunu bellibir değer kadar veya yüzde olarak belirler.Negatif değer alabilir.
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
margin
Yapısı : margin: <deger>
Aldığı Değerler : [ | |auto]{1,4}
Başlnagıç değeri: Tanımsız
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
margin özelliği yukardaki özelliklerin tek bir özellikle uygulanması içinkullanılır.
h1 {
margin: 0.25in;
background-color: silver;
}
h1 {
margin: 10px 20px 15px 5px;
}
yukarıda h1 için margin değerleri sıralaması şöyledir:
margin: üst sağ alt sol(saat yönünde)
ikili ve üçlü kullanımda mevcuttur
h1 {
margin: 0.25em 0 0.5em;
} /* esittir '0.25em 0 0.5em 0' */
h2 {
margin: 0.15em 0.2em;
} /* esittir '0.15em 0.2em 0.15em 0.2em' */
p {
margin: 0.5em 10px;
} /* esittir '0.5em 10px 0.5em 10px' */
p.close {
margin: 0.1em;
} /* esittir '0.1em 0.1em 0.1em 0.1em' */
Padding içerik alanı ile kenarlık arasındaki alandır.
padding-top
Yapısı : padding-top: <deger>
Aldığı Değerler : | <yüzde>| inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
padding-top özelliği içerik alanı ile üst kenarlık arasındakimesafeyi belirler.
h2 {
padding-left: 0.25in;
}
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
padding-right
Yapısı : padding-right: <deger>
Aldığı Değerler : | <yüzde>| inherit
Başlangıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
padding-right özelliği içerik alanı ile sağ kenarlık arasındakimesafeyi belirler.
h2 {
padding-right: 0.25in;
}
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
padding-bottom
Yapısı : padding-bottom: <deger>
Aldığı Değerler : | <yüzde>| inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
padding-bottom özelliği içerik alanı ile alt kenarlık arasındakimesafeyi belirler.
h2 {
padding-bottom: 0.25in;
}
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
padding-left
Yapısı : padding-left: <deger>
Aldığı Değerler : | <yüzde>| inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
padding-left özelliği içerik alanı ile sol kenarlık arasındakimesafeyi belirler.
h2 {
padding-left: 0.25in;
}
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
padding
Yapısı : padding: <deger>
Aldığı Değerler : | <yüzde>| inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: Block-level ve replaced elementler
Kalıtsallık: Yok
paddingözelliği padding-top, padding-right, padding-bottomve padding-left değerlerini kısayoldan atamak için kullanılır.
h1 {
padding: 10px;
background-color: silver;
}
margin’deki gibi farklı kullanım şekilleri mevcuttur.
Kutu modeli özelliklerine devam ediyoruz. Sırasıyla aşağıdaki özellikleri inceleyeceğiz:
width
Yapısı : width: <deger>
Aldığı Değerler : | <yüzde>| auto | inherit
Başlnagıç değeri: auto
Uygulanabilen elementler: Block-level ve replaced elementler
Kalıtsallık: Yok
Blok-level ve replaced elementlerin(örn: img, input, textarea vd.) tümü bir genişlik(width) değeri alır. Elementlerin başlangıçtaki genişlik değeri auto yani kendi asıl genişliğidir. (Örneğin bir resmin genişliği gibi) Yüzde değeri ebveyn elementi kıstas alarak uygulanır. Negatif değeri almaz.
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
height
Yapısı : height: <deger>
Aldığı Değerler : | auto | inherit
Başlangıç değeri: auto
Uygulanabilen elementler: Block-level ve replaced elementler
Kalıtsallık: Yok
Blok-level ve replaced elementlerin(örn: img, input, textarea vd.) tümü bir yükseklik(height) değeri alır. Elementlerin başlangıçtaki yükseklik değeri auto yani kendi asıl yüksekliğidir. (Örneğin bir resmin yüksekliği gibi) Negatif değeri almaz.
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
float
Yapısı : float: <deger>
Aldığı Değerler : left | right | none |inherit
Başlnagıç değeri: none
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
float özelliği bir elementi(img, table, div vd.) konumuNu belirlemek(sağa veya sola ) için kullanılır. Siz bir elementeflaot=left değeri verirseniz diğer elementler o elementin sağından akar. Bu HTML3,2 deki resime(img) uygulananalign=”left” ve align=”right” ile özdeş bir özelliktir. Ancak CSS 1 tüm elementlere float özelliği vermemizi sağlıyor. HTML 3,2 sadece img ve table için bu özelliği kullanmamıza izin veriyordu. float özelliği sonraki derslerde daha ayrıntılı gösterilecektir. float özelliği CSS ile tablosuz web sitesi oluşturma metodunun en önemli öğelerinden biridir.
p img {
float: left;
margin: 25px;
}
Bu aralar CSS kitabına(e-kitap) ağırlık verdim. Kitaptaki eksik bölümleri tamamlıyorum. İnşallah en yakın zamanda bitecek. Bu konuda onlardan biri.
Kutu elementlerin görünümüne çeşitli etkiler yapan özellikleri göreceğiz bu makalede çoğu CSS2 ile birlikte gelen bu özellikler aşağıda sıralanmıştır.
- overflow – taşma
- clip – kırpma
- visibility – görünürlük
Overflow
Yapısı: overflow: <deger>
Aldığı Değerler: visible | hidden | scroll | auto | inherit
Başlnagıç değeri: visible
Uygulanabilen elementler: blok-level elementler ve replacement elementlere
Kalıtsallık: Yok
Türkçeye taşmak(overflow) olarak çevirdiğimiz bu özellik sınırlarını belirlediğimiz kutu elementinin içeriğinin sınırları aşması durumunda nasıl davranacağını bildiren bir özelliktir. Özelliğe atanan değerleri tek tek incelersek.
- inherit – kalıtsallık üst elementin değerini alabilir
- visible – kutu sınırları dışına taşan alanları göster
- hidden – kutu sınırları dışına taşan alanları gizle.
- scroll – kutu sınırlarını taşan kısmı kaydırma çubuğu ile ulaşmamızı sağlar.
- auto – kutu sınırlarını aşması durumunda scroll ile aynı etkiyi yapar.
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
overflow:visible Overflow’ın başlangıç değeri visible’dır. Bu değer taşma olan kısımların gösterilmesini sağlar.
div#solMenu {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 120px;
background: #BBB;
overflow: visible;
}
Kodun yeni nesil tarayıcılardaki görünümü
overflow özelliğinin değeri visible olduğu için içerik taşmasına rağmen taşan bölümler gösterilmiştir.
overflow:scroll Eğer içeriğin taşmasını engellemek istiyorsak ama yinede taşan kısımlara ulaşılması için kaydırma çubuğu çıkması için scroll özelliği ekleriz.
div#solMenu {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 120px;
background: #BBB;
overflow: scroll;
}
overflow:scrool olma durumu
overflow:hidden Eğer overflow:hidden değeri atarsak. Sınırladığımız kutunun dışına taşan kısımlar gösterilmeyecektir.
div#solMenu {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 120px;
background: #BBB;
overflow: hidden;
}
kodu bu şekilde değiştirdiğimizde görüntü aşağıdaki gibi olacaktır.
overflow:auto Son olarakta otomatik değeri vardır. Bu değeri atayınca kutu içeriğine göre otomatik işlem yapacaktır. Eğer taşma olmuyorsa kaydırma çubuğu çıkmayacaktır. Ama eğer içerik taşıyorsa kaydırma çubuğu çıkacaktır.
div#solMenu {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 120px;
background: #BBB;
overflow: hidden;
}
Dikkat ederseniz scroll’dan farklı olarak sadece dikey kaydırma çubuğu çıkmıştır. Yatayda bir taşma olmadığı için yatay kaydırma çubuğu çıkmamıştır.
Örneği görüntülemek için tıklayınız.
Safari’nin eski sürümlerinde sorun çıkarıyor Javascript ile bir çözüm var. http://blog.deconcept.com/2005/03/25/safari-and-links-to-elements-in-overflow-auto-content
Operadaki sorun için ise sadece min-height ve min-width özelliklerini kullanmak yeterli.http://nontroppo.org/test/Op7/overflowbug.html
Bunların dışında Internet Explorer’ün tescillediği ve CSS3 standartlarında yer alan iki adet özellik daha vardır. overflow-x ve overflow-y
overflow-x ve overflow-y: Internet Explorer5x ve üzeri sürümlerden itibaren desteklediği bu özellikler aslında overflow gibi çalışır. Buradaki x ve y’dende anlaşıldığı gibi overflow özelliğini yatay ve dikey olarak ikiye ayıran özelliklerdir. overflow-x özelliği yatayda taşma olması durumunda taşan kısımlara uygulanacak özellikleri(visible, scroll, hidden ve auto) atmamızı sağlar. overflow-y’de dikeyde aynı şeyi yapar. Firefox’unda 1.1 versiyonundan itibaren bu özellikleri desteklemesi kullanılabilirliğini arttırmıştır. Tabi biraz daha beklemekte yarar var.
Örnekler için tıklayınız. (brunildo.org’dan)
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
clip
Yapısı : clip: rect(<üst>,<sağ>,<alt>,<sol>)
Aldığı Değerler : rect(top, right, bottom, left) | auto | inherit
Başlangıç değeri: auto
Uygulanabilen elementler: mutlak konumlandır uygulanmış elementler (CSS2’den itibaren blok-level elementler ve replacement elementlere )
Kalıtsallık: Yok
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
Not W3C standartları belirlerken konumlandırmalar arasında virgül konmasını öneriyor. Ancak garip bir şekilde IE virgül kullanılan örnekleri normal modda farklı yorumlamaktadır. Acayip modda ise doğru yorumlamaktadır. Ne yapalım bizde tüm tarayıcılara uygun olması için virgül kullanamayacağız
clip, elementin içeriğinin belli bir bölümünün gösterilmesi sağlar. Başlangıç değerinin auto atanmış olması herhangi bir kırpmanın olmayacağını gösterir.
Resim düzenleme araçlarında yaptığımız kırpma işini CSS yardımıyla yapmamızı sağlayan bu özelliği Javascript ile birlikte kullanarak çok güzel uygulamalar yapabiliriz.
Clip’e atanan değerler em cinsinden verilerek esnek sonuçlar elde edilebilir. Ayrıca negatif değerlerde alabilir. Negatif değer atandığında element kutusunun dışına doğru kırpma yapacaktır.
Bir örnek yapalım.
CSS kodu:
.kirpma{
position:absolute;
clip:rect(50px 130px 153px 40px);
}
HTML kodu:
<div class="kirpma">
<img src="recepemice.jpg" alt="ahmet emice" />
</div>
örneğin görüntüsü
Örneği görmek için tıklayınız.
visibility
Yapısı : visibility:
Aldığı Değerler : visible | hidden | collapse | inherit
Başlnagıç değeri: visible
Uygulanabilen elementler: tüm elementlere
Kalıtsallık: Yok
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
Görünürlük(visibility) özelliği nesnelerin görünümünü belirler. Değeri visible ise element görünür. Eğer değeri hidden ise element görünmezdir. Eğer bir elementin görünürlük değeri hidden olarak atanmış ise element sayfa yapısındaki yeri korur ancak gözle görülmez.
<html>
<head>
<title>visibility Örneği</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
<li class="alternatifard">body {font-family: sans-serif; font-weight: bold; font-size: 14px}</li>
</style>
<li class="alternatifard"></head>
<body>
<h1 style="visibility: visible">Görünür Başlık</h1>
<h1 style="visibility: hidden; background-color:#f00; border:1px solid #000; margin:20px 0; padding-top:10px;">Görünmez Başlık</h1>
<h1 style="visibility: visible">Görünür Başlık</h1>
<p style="font-size: large">Görünür metin parçası<b style="visibility: hidden">görünmez metin parçası</b> ve burası görünüyor.</p>
</body>
</html>
Örneği görmek için tıklayınız.
Örnekte gördüğümüz gibi element görünmediği halde sayfadaki yerini korumaktadır. Ayrıca gizli nesneye atanan kenarlık ve zemin rengide görünmemektedir. Ancak elementin konumu etkileyen kenar boşluğu(magrin) ve padding değeri görünmese de sayfayı etkilemektedir.
Ata elementi görünmez olan bir çocuk elemente eğer görünür özelliği atanmış ise ata element görünmez ancak çocuk element görünür. Bu ters bir durum olarak görünür ancak bu bize avantaj sağladığı durumlarda yok değildir. Örnek yaparsak
CSS kodu
p.gorunmez {
visibility: hidden;
}
p.gorunmez strong {
visibility: visible;
}
HTML kodu
<p class="gorunmez" <strong>Lorem ipsum dolor sit amet</strong>, consectetuer adipiscing elit. Cras sem. In sagittis mauris eu turpis. Mauris ut lorem nec pede consequat suscipit. </p>
Örneği görmek için tıklayınız.
visiblity:collapse özelliği vardır. collapse tablo elementler için hidden etkisi yapar. Ancak burada bir fark var gizlene elementler yerini korumaz. Ayrıca bu özelliği tüm tarayıcılar desteklemiyor, bunun yerine display:none özelliği kullanılır.
Emre VARLI 