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)

Kutu Modeli

Sayfa 2 / 8


 

Görüntü Kutusunun Niteliğinin Belirtilmesi

 

'display-role' Özelliği (IE 6.02 SP2 desteği yok, sadece display kısayol özelliği kısmen destekleniyor)

Bir elementin 'display-role' özelliği, bu elementin atalarının görüntü algoritmasında, oynayacağı rolü belirtir. Özelliğin uygulama bilgileri aşağıda görülmektedir.

 

İsim: 'display-role'

Değer: none | block | inline | list-item | run-in | compact | table-row | table-cell | table-row-group | table-header-group | table-footer-group | table-column | table-column-group | table-caption | ruby-text | ruby-base | ruby-base-group | ruby-text-group

Başlangıç Değeri: inline

Uygulanabilecek Elementler: tüm elementler

Kalıtım:hayır

Yüzde: belirtilmemiştir.

Media: görsel (visual)

Hesaplanan Değer: belirtilen değer

 

Değerier,

none

Element görüntülenmez. Aynı zamanda :before ve :after pseudo elementleri de görüntülenmeyecektir.

block

Element bir dikdörtgen blok olarak görüntülenecektir. Blok kutusunun yeri içerildiği bloğun özellikleri ile belirlenecektir. Pratik olarak böyle bir blok oluşturan bir element yeni bir satır başında görüntülenecektir. Blok-düzey elementleri başka bir 'display-role' özelliği verilmezse daima blok kutular oluştururlar.

Blok-düzey elementlerinin oluşturduğu blok kutular, sadece blok kutuları içerebilen bir temel blok kutular oluştururlar. Temel bloklar, kendi soylarından gelen blok-düzey elementlerin oluşturdukları blok kutuların içerildiği kutular olarak hareket ederler ve oluşturulan içerik için her türlü yer tutma işlemini düzenlenmesinde rol oynarlar.

inline

Satıriçi elementler, görüntü rolleri değiştirilmemişşe daima satıriçi kutular oluştururlar. Satıriçi kutular daima geçerli satır kutusu tarafından içerilirler. Yüzen ve yer tutma özellikleri belirtilmiş olanlar dışında görüntü rolü satıriçi olan her element geçerli satırda görüntülenir.

run-in

Görüntülenme özelliği sonraki elemente bağlıdır. Aynı soydan gelmesi gerekli olmayan sonraki elementin görüntülenme modeli 'block-inside' ise, element sanki satıriçi görüntü rolü varmış gibi görüntülenir ve bu blok elementin ilk soydan mirasçısı olur. Aksi halde element sanki bir blok görüntülenme rolü varmış gibi görüntülenir.

compact

Görüntülenme özelliği hem elementin içsel boyutlarına hem de bir sonra görüntülecek elemente bağlıdır. Eğer bir sonraki elementinin görüntelenme rolü blok ise ve elementin içsel genişliği , bir sonraki elementin marjından daha küçükse, element bir sonraki elementin sol marj alanı içinde ve gerçek genişliği gözetilerek ve temel hizalanma çizgisi görüntülendiği blok içinde ilk çizgi kutusuna hizalanacak şekilde görüntülenir. Aksi halde element bir blok-düzey element olacak şekilde görüntülenir.

list-item

Görüntülenecek element bir blok-düzey element olarak görüntülenir, fakat liste elmenti işaretçisi için ayrı bir blok kutusu oluşturulur.

table ve ruby tanımları

Görüntülenme yöntemleri table ve ruby kısımlarında belirtilmiştir.

Görüntülenme rolü özelliğinin hesaplanmış değeri, elementin yüzme ve yer tutma özelliklerinin belirtilmiş olması ile etkilenir.

Burdadki ana fikrin bir liste elementinin hem yüzer karakterde olabilmesi hem de işaretçisine sahip olabilmesi olarak belirtilmiştir.

(IE 6 SP2 'display-role' özelliğini kısmen ve sadece kısayol 'display' özelliği ile dolaylı olarak desteklemektedir.)

 

'display-model' Özelliği(IE 6.02 SP2 bu özelliği henüz desteklememektedir, sadece display kısayol özelliği kısmen desteklenmektedir)

 

'display-model' özelliği, bir elementin çocuklarının ne şekilde görüntüleneceği algoritmasını belirleyen özelliktir.

İsim: 'display-model'

Değer: inline-inside | block-inside | table | ruby

Başlangıç Değeri: text

Uygulanabilecek Elementler: tüm elementler

Kalıtım: hayır

Yüzde: belirtilmemiştir.

Medya: görsel (visual)

Hesaplanan Değer: belirtilen değer

 

Değerier,

inline-inside

Element bir satıriçi element değilse etkisi 'block-inside' gibi olur. Aksi halde elementin ilk blok-düzey çocuğundan önce gelen satıriçi çocukları ve metin sekansları, içeren bloğun satır kutuları için ek satıriçi satır kutuları olarak görüntülenirler. Son blok-düzey çocuğundan önce gelen satıriçi çocukları ve metin sekansları için de aynı yöntem uygulanır. Diğer çocuklar ve metin sekansları 'block-inside' olarak görüntülenir.

Bu tanımın çok teknik ve sadece çok az sayıda aşırı bilgili insanlara hitap ettiği açıktır. Henüz hiçbir belge çözümleyicisi tarafından desteklenmeyen bu özelliğin genel kullanımının henüz erken olacağı belli olmaktadır.

block-inside

Elementin soyundan gelen elementler (çocuklar) kendi 'display-role' özelliklerine göre görüntülenirler. 'display-role:none' Özelliğinde olanlar dışında satıriçi ve anonim satıriçi elementler bir veya birdençok satır kutusu olarak görüntülenirler. Satır kutularının satır kesme kurallarına bağlılığı için, 'Metin' modülü incelenmelidir.

Bu tanım da son derece karmaşık kurallar içermekte olduğundan, genel kullanımı için desteğinin netleşmesini beklemekte yarar olacaktır.

table

'table' Modülü incelenmelidir.

ruby

'ruby' Modülü incelenmelidir.

(IE 6 SP2 'display-model' özelliğini kısmen ve sadece kısayol 'display' özelliği ile dolaylı olarak desteklemektedir)

 

'display' Kısayol Özelliği(IE 6.02 SP2 'display' kısayol özelliğini kısmen desteklemektedir)

 

'display' Kısayol özelliği, 'display-model' ve 'display-role' özelliklerinin toplu olarak ifade edildiği bir kısayol özelliğidir. Bu özellik CSS1 spesifikasyonundan beri kullanılmaktadır fakat CSS3 de yenilerek geliştirilmiştir. Tanımı aşağıda görülmektedir:

 

İsim: 'display'

Değer: inline | block | inline-block | list-item | run-in | compact | | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | none

Başlangıç Değeri: inline

Uygulanabilecek Elementler: tüm elementler

Kalıtım: hayır

Yüzde: belirtilmemiştir.

Medya: görsel (visual) ('none' değeri, tüm medyalara uygulanır)

Hesaplanan Değer: özelliklerin kendi değerlerine bakınız.

 

'display' 'display-model' ve 'display-role' Özellikleri arasındaki ilişkiler, aşağıda olduğu gibidir.

resim1

inline-inside

block-inside

table

ruby

none**

none

none

none

none

inline

inline

inline-block

inline-table

ruby

block

***

block

table

??

list-item

***

list-item

*

??

run-in

run-in

*

*

*

compact

compact

*

*

*

table-cell

***

table-cell

*

??

table-caption

***

table-caption

*

??

table-row-group**

table-row-group

table-header-group**

table-header-group

table-footer-group**

table-footer-group

table-column**

table-column

table-column-group**

table-column-group

table-row**

table-row

ruby-base**

ruby-base

ruby-text**

ruby-text

ruby-base-group**

ruby-base-group

ruby-text-group**

ruby-text-group

*) bu kombinasyon sadece 'display-role' and 'display-model'; kullanılarak yapılır 'display' için kısayol tanımı yoktur

**) 'display-role' 'ün bu tanımı için 'display-model' gözardı edilir

***) bu kombinasyon, 'display' ile yapılamaz, fakat etkisi 'display' ile yapılabilecek 'display-model' özelliğinin 'block-inside' değerine getirilmesi ile aynıdır.

 

'display' Özelliği aslında son kullanıcı için çok gerekli olmadıkça kullanılmaması gereken ileri düzeyde bir düzenlemedir. Bu özellik kullanılarak, yapılabilecek basit bir çalışma aşağıda görülmektedir.

 

Bu kodların görüntülenmesi,

Antakya

tarihle içiçe

bir şehirdir.

şeklinde olacaktır. Burada <span> gibi bir satıriçi elementin görüntülenmesi blok-düzey olarak değiştirilmiştir. Basit ve sonucu öngörülebilen bu uygulama, bütün belge çözümleyicilerde de desteklenmektedir. Oluşturulacak sitelerin genel destek bulabilmesi için, ancak desteklenebileceği yüzde yüz garantili terimlerin kullanılması ve desteklenmesi kuşkulu olan tüm karmaşık uygulamalardan kaçınılması en güvenli tutum olacaktır.

(IE 6.02 SP2 'display' kısayol özelliğini kısmen desteklemektedir)

 

 

Thursday, October 6, 2005 21:14

validate in W3C !