Kurs programı

CSS ileri düzey eğitim

• CSS Ders Kitabı
• CSS Tanıtımı
• CSS Temel Gramerci
• CSS İleri Gramerci
• CSS Çekirdek Seçiciler
• CSS id Seçicisi
• CSS Sınıf Seçicisi
• CSS Oluşturma
• CSS Arka Plan
• CSS Metin
• CSS Yazı Tipi
• CSS Listeler

CSS kutu modeli

• CSS Çerçeve Modeli Özeti
• CSS İç Kenar Boşluğu
• CSS Kenar
• CSS Kenar Boşluğu
• CSS Kenar Boşluğu Birleşimi

CSS konumlandırma

• CSS Konum Özeti
• CSS İlgili Konum
• CSS Mutlak Konum
• CSS Yüzen

CSS seçici

• CSS Element Seçicisi
• CSS Seçici Gruplama
• CSS Sınıf Seçicisi Ayrıntısı
• CSS ID Seçicisi Ayrıntısı
• CSS Özellik Seçicisi Ayrıntısı
• CSS Çocuk Seçicisi
• CSS Çocuk Element Seçicisi
• CSS Komşu Kardeş Seçicisi

İhtiyari dersler

Kurs tavsiyesi:

• CodeW3C.com Çantası

Elementin çerçevesi (border), element içeriği ve iç kenar boşluğunu çevreleyen bir veya daha fazla çizgidir.

CSS border özelliği, element çerçevesinin tarzını, genişliğini ve rengini belirlemenize olanak tanır.

CSS Kenar

HTML'de, metin etrafında çerçeve oluşturmak için tablolar kullanırız, ancak CSS çerçeve özelliklerini kullanarak herhangi bir elemente etkileyici bir çerçeve oluşturabilir ve uygulamak için kullanabiliriz.

Elementin dış kenar boşluğu içindeki çerçeve, elementin çerçevesidir (border). Elementin çerçevesi, element içeriği ve iç kenar boşluğunu çevreleyen bir veya daha fazla çizgidir.

Her çerçeve 3 yönü vardır: genişlik, tarz ve renk. Aşağıdaki bölümlerde, bu üç yönü ayrıntılı olarak açıklayacağız.

Çerçeve ile arka plan

CSS normları, çerçevelerin 'elementin arka planının üzerinde' çizildiğini belirtir. Bu çok önemlidir, çünkü bazı çerçeveler 'aralı' (örneğin, noktalı çizgili veya ince çizgili) olabilir, elementin arka planı çerçevenin görünür kısımları arasında görünmelidir.

CSS2, arka planın yalnızca iç kenar boşluğuna kadar uzandığını belirtir, çerçeve değil. CSS2.1 daha sonra düzeltti: elementin arka planı, içerik, iç kenar boşluğu ve çerçeve alanının arka planıdır. Çoğu tarayıcı CSS2.1'i takip eder, ancak bazı eski tarayıcılar farklı bir performans gösterebilir.

Çerçeve tarzı

Tarz, çerçevenin en önemli yönlerinden biridir, bu çerçeve tarzı çerçevelerin görünürlüğünü kontrol ediyor değil (tabii ki, çerçeve tarzı çerçevelerin görünürlüğünü kontrol ediyor), çünkü tarz olmadan çerçeve olmayacak.

CSS'nin border-style özelliği10 adet farklı non-inherit tarz tanımladı, bunlar arasında none da var.

Örneğin, bir resmin çerçevesini outset olarak ayarlayabilir ve bu şekilde 'çıkıntılı düğme' gibi görünmesini sağlayabilirsiniz:

a:link img {border-style: outset;}

Çoklu tarz tanımlama

Bir çerçeveye birden fazla tarz tanımlayabilirsiniz, örneğin:

p.aside {border-style: solid dotted dashed double;}

Yukarıdaki bu kural, sınıfı aside olan paragraflar için dört tür çerçeve tarzı tanımlar: kalın çizgili üst çerçeve, noktalı çizgili sağ çerçeve, ince çizgili alt çerçeve ve çift çizgili sol çerçeve.

Burada değeri top-right-bottom-left sırası ile kullanıyor gördük, birden fazla değerle farklı iç kenar boşluklarını ayarlamak için de bu sırayı gördük.

Tek kenar tarzı tanımlama

Bir eleman çerçevesinin belirli bir kenarının çerçeve tarzını ayarlamak istiyorsanız, tüm 4 kenarın çerçeve tarzını ayarlamak yerine aşağıdaki tek kenar çerçeve tarzı özelliklerini kullanabilirsiniz:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

Bu nedenle bu iki yöntem eşdeğerdir:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

Dikkat:İkinci yöntemi kullanmak için, tek kenar özelliklerini kısa yazım özelliği ardından koymak zorundasınız. Çünkü border-style öncesinde tek kenar özelliği yerleştirilirse, kısa yazım özelliğinin değeri tek kenar değerini none ile geçersiz kılar.

çerçeve genişliği

Çerçeve genişliğini border-width özelliğiÇerçeve genişliğini belirleme

Çerçeve genişliğini belirlemek için iki yöntem vardır: uzunluk değerleri belirtebilirsiniz, örneğin 2px veya 0.1em; veya thin, medium (varsayılan değer) ve thick gibi 3 anahtar kelimenin birini kullanabilirsiniz.

Not:CSS, 3 adet anahtar kelimenin belirli genişliklerini tanımlamamıştır, bu yüzden bir kullanıcı aracı thin, medium (varsayılan değer) ve thick olarak 5px, 3px ve 2px olarak ayarlayabilirken, başka bir kullanıcı aracı ise 3px, 2px ve 1px olarak ayarlayabilir.

Bu nedenle, çerçeve genişliğini böyle ayarlayabiliriz:

p {border-style: solid; border-width: 5px;}

veya:

p {border-style: solid; border-width: thick;}

Tek kenar genişliği tanımlama

Top-right-bottom-left sırasına göre elementin her kenar çerçevesini ayarlayabilirsiniz:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

Yukarıdaki örnekte de öyle, bu yazım tarzınaDeğer kopyalama）：

p {border-style: solid; border-width: 15px 5px;}

Ayrıca, çerçevenin her kenarının genişliğini aşağıdaki özelliklerle ayrı ayrı ayarlayabilirsiniz:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

Bu nedenle, aşağıdaki kurallar yukarıdaki örnekle eşdeğerdir:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

Çerçeve yok

Önceki örnekte gördüğünüz gibi, bir tür çerçeve göstermek istiyorsanız, çerçeve stili ayarlamak zorundasınız, örneğin solid veya outset.

Eğer border-style none olarak ayarlanırsa ne olacaktır:

p {border-style: none; border-width: 50px;}

Çerçeve genişliği 50px olmasına rağmen, çerçeve tarzı none olarak ayarlanmıştır. Bu durumda, sadece çerçeve tarzı kaybolmaz, genişliği de 0 olur. Çerçeve gitti, neden?

Bu, çerçeve tarzı none olduğunda, yani çerçeve tamamen yoksa, çerçeve genişliği olmayacağı için, çerçeve genişliği otomatik olarak 0 olarak ayarlanır, ne kadar tanımlarsanız tanımlayın.

Bu noktayı unutmamak çok önemlidir. Aslında, çerçeve tarzını unutmak sıkça yapılan bir hatadır. Aşağıdaki kurallara göre, tüm h1 öğeleri hiçbir çerçeve olmayacak, 20 piksel genişliği bile olmayacaktır:

h1 {border-width: 20px;}

border-style'nin varsayılan değeri none olduğundan, tarzı tanımlamadıysanız, border-style: none demektir.Bu yüzden, çerçeve görünmesini istiyorsanız, bir çerçeve tarzı tanımlamanız gerekir.

çerçeve rengi

Çerçeve rengi ayarlamak çok basittir. CSS, basit bir border-color özelliğiher seferinde en fazla 4 renk değeri alabilir.

Her türlü renk değeri kullanılabilir, örneğin adlandırılmış renkler, onaltılık ve RGB değerleri olabilir:

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

Renk değeri 4'ten azsa, değer kopyalama işlemi geçerlidir. Örneğin aşağıdaki kurallar, paragrafın üst ve alt çerçevelerinin mavi, sol ve sağ çerçevelerinin kırmızı olacağını belirtir:

p {
  border-style: solid;
  border-color: blue red;
  }

Not:Varsayılan çerçeve rengi, öğenin ön rengidir. Çerçeve rengi için renk tanımlanmadıysa, çerçeve rengi metin rengi ile aynı olacaktır. Diğer yandan, öğe hiç metin içermiyorsa, örneğin sadece resimler içeren bir tablo ise, bu tablonun çerçeve rengi, ebeveyn öğenin metin rengidir (çünkü color miras alabilir). Bu ebeveyn öğe, büyük olasılıkla body, div veya başka bir table olabilir.

Tek kenar renk tanımlama

Ayrıca bazı tek kenar çerçeve renk özellikleri vardır. Onların prensibi, tek kenar tarzı ve genişlik özellikleri ile aynıdır:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

h1 öğesine kalın siyah çerçeve belirlemek ve sağ çerçeveyi kalın kırmızı olarak belirlemek için şöyle belirtebilirsiniz:

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

Şeffaf çerçeve

Daha önce bahsettiğimiz gibi, çerçeve tarzı yoksa, genişliği yok demektir. Ancak bazı durumlarda görünmez bir çerçeve oluşturmak isteyebilirsiniz.

CSS2 ekranın renk değerini şeffaf olarak tanıttı. Bu değer, genişliği olan görünmez bir çerçeve oluşturmak için kullanılır. Aşağıdaki örneği inceleyin:

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

Üstteki bağlantılar için aşağıdaki stilleri tanımladık:

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

Kendi kendinize deneyin

Bir anlamda, transparent kullanarak, kenarları ek iç boşluk gibi kullanabilirsiniz; ayrıca, ihtiyacınız olduğunda görünür hale getirebilirsiniz. Bu şeffaf kenar, iç boşluğa benzer, çünkü elemanın arka planı, kenar alanına uzanır (görünür bir arka plan varsa).

Önemli Not:IE7'den önce, IE/WIN, transparent'e destek sağlamamıştır. Daha önceki sürümlerde, IE, kenar rengini elemanın color değeri temelinde ayarlamıştır.

CSS Kenar Özellikleri

Araç Kutusu

CSS Referans Kılavuzu

CSS Örneği

CSS Testi

CSS Eğitimi

Sponsor Bağlantıları