8.3.1 Örtüşen kenar dış boşlukları

Bu belirtimde örtüşen kenar dış boşlukları dendiği zaman, iki veya daha fazla sayıda (sonraki veya iç içe) çerçevenin bitişik (araya kenar çizgisi ve kenar iç boşluğu girmeksizin komşu) kenar dış boşluklarının tek bir kenar dış boşluğu oluşturacak şekilde birleştirilmesinden bahsediyor olacağız.

BB2'de yatay kenar dış boşlukları asla örtüşmez.

Çeşitli çerçeveler arasında düşey kenar dış boşlukları örtüşebilir:

• Normal akıştaki dış kenar boşlukları bitişik iki veya daha fazla sayıdaki blok çerçevesinin bitişik kenar dış boşlukları örtüşürler. Elde edilen kenar dış boşluğu genişliği örtüşen en geniş kenar dış boşluğunun genişliğidir. Bazı genişliklerin negatif olması durumunda bunların mutlak genişliklerinin azamisi, pozitif genişliklerin azamisinin değerinden çıkarılır. Eğer pozitif genişlik hiç yoksa, negatif genişliklerin mutlak değerce azamisi sıfırdan çıkarılır.

  Not:

  Bitişik çerçeveler, aralarında kardeşlik veya üstsellik ilişkisi bulunmayan elemanlar tarafından da üretilebilir.

• Bir çerçevenin bir yüzen çerçeveye bitişik düşey kenar dış boşlukları asla örtüşmez.

• Mutlak ve göreli konumlanmış çerçevelerin kenar dış boşlukları örtüşmez.

Örtüşen kenar dış boşluklarına görsel bir örnek için Çerçeve kenar çizgileri, iç ve dış boşlukları için örnek bölümüne bakınız.

8.5.1 Kenar çizgisi genişliği: border-top-width, border-right-width, border-bottom-width, border-left-width ve border-width nitelikleri

Kenar çizgisi genişlik nitelikleri kenar çizgisi alanının genişliğini belirtir. Bu bölümde tanımlanan niteliklere atanabilen kenar-çizgisi-genişliği değer türü şu değerlerden birini alabilir:

thin [ince]

İnce kenar çizgisi.

medium [orta]

Orta kalınlıkta kenar çizgisi.

thick [kalın]

Kalın kenar çizgisi.

uzunluk

Kenar çizgisi kalınlığı doğrudan belirtilen (göreli olmayan/hesaplanmayan) bir değerdir ve negatif olamaz.

Bu üç değerin yorumu kullanıcı arayüzüne bağlıdır ancak aralarında şöyle bir ilişki vardır:

thin <= medium <= thick

Bundan başka, bunların genişlikleri belge boyunca değişiklik göstermemelidir.

Bu nitelikler bir çerçevenin üst, sağ, alt ve sol kenar çizgilerinin genişliklerini ayarlar.

Bu nitelik biçembendin aynı noktası için border-top-width, border-right-width, border-bottom-width, ve border-left-width nitelikleri için bir kestirme niteliktir.

Eğer tek bir değer belirtilmişse, bu değer tüm kenarlara uygulanır. İki değer belirtilmişse, ilk değer alt ve üst kenarların, ikinci değer ise sol ve sağ kenarların çizgi genişlikleri olarak ele alınır. Üç değer belirtilmişse, birinci üst kenarın, ikinci sol ve sağ kenarın, üçüncü ise alt kenarın çizgi genişliği için belirtilmiş sayılır. Eğer dört değer belirtilmişse bunlar sırayla üst, sağ, alt ve sol kenar çizgi genişlikleri olarak ele alınır.

Örnek:

Aşağıdaki örnekte, elde edilen kenar çizgilerinin üst, sağ, alt ve sol kenar çizgi genişlikleri yanlarındaki açıklamalarda ayrı ayrı verilmiştir:

H1 { border-width: thin }                   /* ince ince  ince ince */
H1 { border-width: thin thick }             /* ince kalın ince kalın */
H1 { border-width: thin thick medium }      /* ince kalın orta kalın */

8.5.2 Kenar çizgisi rengi: border-top-color, border-right-color, border-bottom-color, border-left-color ve border-color nitelikleri

Kenar çizgisi rengi nitelikleri bir çerçevenin kenar çizgisinin rengini belirtir.

border-color niteliği dört kenar çizgisinin rengini ayarlar. Değerlerin anlamları şunlardır:

renk

Bir renk değeri belirtir.

transparent

Kenar çizgisi saydam olur (yine de bir genişliği olabilir).

border-color niteliğinde bir değerden dört değere kadar değer belirtilebilir ve bu değerler border-width niteliğindeki gibi farklı kenarlara uygulanır.

Eğer bir elemanın kenar çizgisi rengi belirtilmemişse kullanıcı arayüzleri kenar çizgisi rengi için hesaplanmış değer olarak elemanın color niteliğinin değerini kullanmalıdırlar.

Örnek:

Bu örnekte kenar çizgisi kesintisiz siyah bir çizgi olacaktır.

p {
  color: black;
  background: white;
  border: solid;
}

8.5.3 Kenar çizgisi biçemi: border-top-style, border-right-style, border-bottom-style, border-left-style ve border-style niteliği

Kenar çizgisi biçemi nitelikleri bir çerçevenin kenar çizgisinin çizgi biçemini (düz, çift, kesikli, noktalı, vs.) belirtirler. Bu bölümde tanımlanan niteliklerde değer türü olarak kenar-çizgisi-biçemi gördüğünüz yerlerde değer olarak şunları belirtebilirsiniz:

none

Kenar çizgisi yoktur. Bu değer border-width niteliğinin hesaplanmış değerini '0' olmaya zorlar.

hidden

tablo elemanlarının kenar çizgisi tutarsızlıklarının çözümlenmesi kuralları hariç olmak üzere yukarıdaki none ile aynıdır.

dotted

Kenar çizgisi belirli aralıklarla dizilmiş noktalardan oluşur.

dashed

Kenar çizgisi belirli aralıklarla dizilmiş çizgi parçalarından oluşur.

solid

Kenar çizgisi tek parça olarak çizilir.

double

Kenar çizgisi çift çizgili çizilir. İki çizginin kalınlıkları ile aralarındaki boşluğun genişliğinin toplamı border-width değerine eşittir.

groove

Kenar çizgisi tuvale oyulmuş gibi görünür.

ridge

groove'un zıddı: Kenar çizgisi kabartma gibi görünür.

inset

Kenar çizgisi çerçevenin tamamının tuvale gömülü gibi görünmesine sebep olur.

outset

inset'in zıddı: Kenar çizgisi çerçevenin tamamının kabartma gibi görünmesine sebep olur.

Bütün kenar çizgileri çerçevenin artalanının üstüne çizilirler. groove, ridge, inset ve outset değerleri için kenar çizgisi rengi, elemanın border-color niteliğine bağlı olması gerekse de kullanıcı arayüzleri asıl renkleri hesaplamak için kendi algoritmalarını kullanabilirler. Örneğin, border-color niteliğinin değeri silver olsa bile kullanıcı arayüzü düşen kenar izlenimini verebilmek için beyazdan koyu griye kadar bir gri tayfı kullanabilir.

Uyumlu HTML kullanıcı arayüzleri dotted, dashed, double, groove, ridge, inset ve outset değerlerini solid olarak yorumlayabilirler.

border-style niteliği dört kenar çizgisinin biçemini ayarlar. Bir değerden dört değere kadar değer belirtilebilir ve bu değerler border-width niteliğindeki gibi farklı kenarlara uygulanır.

Örnek:

#xy34 { border-style: solid dotted }

Bu örnekte yatay kenar çizgileri solid (tek parça çizgi), düşey kenar çizgileri dotted (noktalı çizgi) olacaktır.

Kenar çizgisi biçemi için ilk değer none olduğundan biçem için bir değer belirtilmedikçe kenar çizgileri görünür olmayacaktır.

8.5.4 Kestirme kenar çizgisi nitelikleri: border-top, border-bottom, border-right, border-left ve border

Bu kestirme nitelikler bir çerçevenin üst, sağ, alt ve sol kenar çizgilerinin genişliğini, biçemini ve rengini belirtmek için kullanılırlar.

Örnek:

h1 { border-bottom: thick solid red }

Bu kural <h1> elemanının alt kenar çizgisinin genişliğini, biçemini ve rengini ayarlayacaktır. Belirtilmeyen değerler için ilk değerleri kullanılır. Aşağıdaki kural bir kenar çizgisi rengi belirtmediği için kenar çizgisi rengi olarak color niteliğinde belirtilen renk kullanılacaktır:

h1 { border-bottom: thick solid }

border niteliği bir çerçevenin dört kenarına da aynı genişlik, biçem ve rengi uygulamak için kullanılan bir kestirme niteliktir. margin ve padding kestirme niteliklerinin aksine, border niteliği dört kenara farklı değerler uygulamak için kullanılamaz. Bunu yapmak için diğer kenar çizgisi niteliklerinden bir veya daha fazlasının kullanılması gerekir.

Örnek:

Aşağıdaki ilk kural sonraki 4 kuralla eşdeğerdir:

p { border: solid red }
p {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red
}

Bazı bakımlardan niteliklerin işlevleri bir başkasını maskeleyebileceğinden kuralların belirtiliş sırası önem kazanabilir.

Örnek:

Şu örneği ele alalım:

blockquote {
  border-color: red;
  border-left: double;
  color: black
}

Bu örnek için sol kenar çizgisinin rengi siyah diğerleri kırmızı olacaktır. Böyle olmasının sebebi border-left niteliğinin sol kenar çizgisi için genişlik, biçem ve renk belirtmesidir. border-left niteliğinde renk değeri verilmediğinden, değer color niteliğinden alınacaktır. color niteliğinin border-left niteliğinden sonra belirtilmiş olması durumu değiştirmeyecektir.