HTML Image Map b2s1 Ek4 Ek 6 Ek5 b8s1 b1s1  Ek7 Nitelikler b5s1.htm Ek2 b3s1 Ek3 b7s1 Ek7 Elementler Ek1 b4s1 b6s1  Ek7 Catalogue index previous next

Katlı Stil Sayfaları (Sürüm 3)

CSS3 Kutu Modeli

Sayfa 1 / 8


 

Genel Bilgiler

Katlı stil sayfaları (Cascade Style Sheets) , değişik ses ve görüntü alanları gibi farklı ortamlarda belgelerin çözümlenmesini belirtecek şekilde düzenlenmiştir. Metin nitelikli (text based) belgelerin bilgisayar ekranı veya kağıt gibi görsel medya üzerinde gösterimi için, belgedeki elementleri, dikdörtgen kutular halinde görüntüleyecek şekilde çözümler. Görüntü kutuları birbirlerini takip ederek veya birbirleri içinde gelişerek görüntülenirler. Bu gelişime " akış " (flow) adı verilir. Bu bölümde " normal " akış düzeni içinde ve " yüzen (floating)" kutular incelenecektir.

Belgelerin sayfa düzenine uygun ortamlarda görüntülenme mekanizmasının, bazı kurallara uyularak, oluşturulan kutuların birbirlerine bitişik (juxtaposed) veya birbirleri içinde yuvalanmış (nested) olarak görüntülenmesi temeline dayandığı açıklanmıştır. Belgenin çözümlenmesi ile " blok kutular ", " satıriçi kutular ", "tablo kutuları", " yüzen kutular " gibi çok sayıda görüntü kutusu türü oluşabilir. Elementlerin " marj " ve " float " (yüzen kutular) gibi özellikleri, onların normal görüntü akışı ile görüntülenecekleri yerlerden farklı yerlerde görüntülenmelerini belirli bir ölçüde sağlayabilir.

Aslında her element için ayrı bir kutu oluşturulur fakat, bir liste elementi ve önündeki simge kutusu kutusu gibi durumlarad birden fazla kutu oluşabilir. Bazen bir kutu iki satır arasında bölünebilir hatta bazen kurallarında ( display:none ) olarak belirtilerek görüntü oluşması engellenmişse, hiçbir kutu oluşmayabilir. Bu ifade gereğince her kutu ya bir elemente ait olur veya anonim bir kutu olarak oluşturulur. Anonim yani genele ait ve bir özele ait olmayan kutular, hiçbir elemente ait olmayan fakat belgenin kodları gereği oluşturulan kutulardır. Anonim kutular satıriçi veya blok-düzey kutular olabilirler. Satıriçi anonim bir kutu oluşmasına neden olacak bir kod örneği aşağıda görülmektedir.

Bu kodlamada : Plaj alanı ... içeriği satırıiçi anonim bir kutu içinde görüntülenir. Tüm bloğun görüntüsü aşağıdaki gibidir:

Sahil Bandı : Plaj alanı ve çay bahçeleri

Anonim kutular içerildikleri pencereye dolaylı olarak bağlıdırlar. Burada içeren pencere rolünü <p> ..</p> elementi penceresi oynamaktadır. Anonim bir kutunun ayırdedici bir özelliği olmadaığı için ne evrensel selektör *, ne de herhangibir özel selektör (latince selector = seçici) tarafından seçilemez dolayısı ile görüntüsü değiştirilemez. Bu nedenle görüntüsü içerildiği <p></p> elementine bağlı olacaktır. Dikkat edilirse, anonim kutunun içeriğinin rengi içerildiği paragraf blok kutusunun kendisini içeren <div></div> blok kutusundan kalıtım ile edindiği kırmızı renktir. Bu rengi paragraf kutusunun tümünden bağımsız olarak değiştirmek olanağı yoktur. Paragraf kutusunun içerdiği <em></em> kutusunun içeriği ise seçilebilir olduğundan anonim değildir. Bu kısmın rengi, paragraf kutusundan bağımsız olarak her türlü kuralı ile değiştirilebilir. Örnek :

Tüm bloğun yeni görüntüsü aşağıdaki gibi olacaktır:

Sahil Bandı : Plaj alanı ve çay bahçeleri

Seçilemez bir anonim kutu oluşmasına neden olacak kodlar iyi bir yazarlık stili sayılmaz. Anonim kutu oluşumunu aşmak zor bir şey olmayabilir. Aşağıdaki kodlar olayın anonim bir kutu oluşmasına gerek kalmadan, paragragraf blok kutusunu iki tane seçilebilir satıriçi kutu oluşturarak çözümlenmesini gösterir. Bu yöntemle, paragraf kutusunun kalıtımla edindiği zorunlu kırmızı renkten de kurtulma olanağı bulunabilir :

Bu kodların oluşturacağı görüntü aşağıda görülmektedir:

Sahil Bandı : Plaj alanı ve çay bahçeleri

Anonim blok-düzey kutular , soyut bir tartışma konusu olarak ortaya çıkmıştır. Akış modelinin kurulumunda böyle bir kavramın olması gerektiği öne sürülmektedir. Bunların oluşumuna neden olacak "display-role" özelliği de henüz hiçbir belge çözümleyici tarafından desteklenmemektedir.

Stil sayfası programlanmasında sorunlardan birisi, belge çözümleyiciler henüz ilk CSS1 spesifikasyonunu destekleyebilir durumuma gelebilmişken, CSS2(revision1) ve devasa CSS3 spesifikasyonunun geliştirilmiş olmasıdır. Şu an Windows ortamında pratikte sadece Internet Explorer sürüm 6.02 ve kısmen Firefox sürüm 1.0 yaygın olarak kullanılan belge çözümleyicilerdir ve spesifikasyonlarını desteklenmesi beklenen tek ortam pratik olarak IE 6.02 dir. IE ise kapalı kodlu ticari bir üründür ve bu nedenle hangi spesifikasyonu ne şekilde desteklediği belli değildir. Firefox ise açık kodlu bir üründür, fakat açık kod sadece anlayabilene açıktır. Bu konuda çok deneyimli olanların dışında, kullanıcıların açık kodu değerlendirilebilme olanakları bulunmamaktadır. Zaten Firefox 1.0 da kullanıcıların çok azı tarafından kullanılmaktadır ve henüz desteği IE 6.02 SP2 den kötüdür. Bu durumda belge çözümleyicilerin desteğinin belirlenebilmesi ancak yapılmış incelemelere dayanarak ve büyük ölçüde sınama-yanılma ile belirlenebilmektedir. Özel bir kuruluş tarafından, CSS 2.1 e ait desteklenen özellik cetvelleri yayınlanmıştır . Sınama-yanılma ise çok dikkatli yapılması gereken bir çalışmadır. Özellikle kutu modeli gibi karmaşık yöntemlerin denenmesi için yapılacak hatalı denemeler, hatalı sonuçlara neden olabilecektir. Yanlış kodlar, desteklenen özellikleri desteklenmez gösterebilir. Bu konuda yazarların kendi denemelerini yazmadan önce literatür incelemesini çok iyi yapmış olmaları gerekir.

 

Görsel Formatlama Modeli

 

Görsel medya üzerinde kodların çözümleneceği alan olan "tuval" (bu sözcük toile (fr), canvas (ing) sözcükleri karşılığıdır) üzerinde görüntü oluşturulacak alana, "görüş kapısı" (viewport) adı verilir. Görüş kapısı açılan pencereler olarak kabul edilebilir. Çok aşırı istisnalar dışında, tuval üzerinde sadece bir tek görüş kapısı ve belge başına tek bir pencere olduğundan bu sözcükler birbirinin yerine kullanılmaktadır. Pencerenin boyutu değiştiğinde, belge çözümleyiciler son derece karmaşık mekanizmalar ile belgenin görüntüsünü değiştirirler. Aslında CSS programlaması bu karmaşık mekanizmayı etkilemek amacı ile yapılır ve bir programcı etkileyeceği mekanizmayı ne kadar iyi bilirse, yapabileceği etki de o kadar kapsamlı ve başarılı olur.

Genel olarak, görsel medya üzerinde belgenin görüntülenmesi kutu modelinin uygulanması ile gerçekleşir. Görüntüyü etkileyecek etkenler,

sayılabilir. Basılacak kağıt üzerine formatlama ile monitör görüntüleri biraz farklı olarak çözümlenirler ve bunlarla ilgili kuralları da birbirinden biraz farklıdır.

Görsel formatlama için belge çözümleyiciler kendi özel kurallarını uygularlar ve bunlar kuralları ile tam olarak uyuşmayabilir. Bazı durumlarda belge çözümleyiciler kurallarını gözardı edebilirler. Bu konularda fazla açıklayıcı bilgiler yoktur.

çözümlenmiş belgelerde üç tür görüntü akışını ( gelişim yönü ) desteklemektedir. Bunlar klasik uzakdoğu ideogramlarında olduğu gibi yukarıdan aşağıya ve sağdan sola doğru, Mogol dilinin kullanılan alfabelerinden biri olan Uygur yazısında olduğu gibi yukarıdan aşağıya ve soldan sağa doğru ve en son olarak Latin, İbrani ve Arap alfabeleri gibi yatay ve yukarıdan aşağıya doğru olan gelişim yönü desteklenir.

 

CSS3 Kutu Düzeni

 

Her kutunun bir içerik (content) alanı vardır. Kutuların içerik alanlarının genişlik ve yükseklikleri, 'width' ve 'height' özelliklerinin yardımı ile belirlenebilir. İçerik alanının dışında isteğe bağlı bir "Gezinti Alanı" (Padding) denilen alan bulunur. Gezinti alanının genişliği "padding" özelliği ile kontrol edilebilir. "padding:0px" hiç gezinti alanı olmayacak anlamına gelir. Gezinti alanını, kutunun "kenar" alanı (border) çevreler. "border" Özelliği ile, kutunun kenarlarının görüntüsü üzerinde geniş ölçüde kontrol sağlanmıştır. Kutu kenarının etrafında kutunun "marj" alanı bulunur. Kutunun marj alanının özellikleri de "margin" özelliği ile kontrol edilir. Kutunun içerik alanı sınırı, gezinti alanı sınırı, kenar alanı sınırı ve marj alanı sınırı belirlidir. Başka bir tanım yapılmadıkça, kutunun eni ve boyu (genişlik ve yüksekliği) ('width' ve 'height' özellikleri) içerik alanının boyutlarını belirtir.

Tipik bir element kutusu aşağıda görülmektedir:

kutu modeli

 

Birbirlerini İçeren Kutular

 

görüntüleme modelinde, belge kodlarını oluşturan elementlerin görüntülendiği sanal kutular, atalarının kutuları içinde oluşturulurlar. Buna "İçeren Blok" adı verilir. İçeren bloklar içinde oluşturulan her yeni kutu, kendi mirasçıları için içeren blok olarak hareket eder. Oluşturulan her kutunun görüntüsü, içerildiği kutunun konumuna göre düzenlenir. Her elementin içeriği, içerildiği blok boyutlarına uymak zorunda değildir, gereğinde taşabilir ( overflow ).

Belgenin kök elementi, tüm belge için içeren blok oluşturur. Kök elementinin oluşturduğu bloğun boyutları ' height' ve 'width' değerleri belirtilerek düzenlenebilir.

 

 

 

 

validate in W3C !

Thursday, October 6, 2005 21:12