Bütünleşik Biçembentler, 2. Aşama | ||
---|---|---|
Önceki | Yukarı | Sonraki |
Aşağıdaki bölümlerde tanımlanan nitelikler karakterlerin, boşlukların, sözcüklerin ve paragrafların görsel sunumunu etkiler.
text-indent
niteliğitext-indent | NİTELİK |
Değer: | uzunluk | yüzdelik | inherit |
İlk değer: | 0 |
Uygulama yeri: | blok seviyesinden elemanlar |
Kalıtsallık: | evet |
Yüzdelik değerler: | taşıyıcı blok genişliği ölçüt alınır |
Ortam: | görsel |
Bu nitelik bir bloktaki metnin ilk satırının girinti miktarını belirtir. Başka bir deyişle, blokun ilk satır çerçevesine akan ilk çerçevenin girinti miktarını belirler. Çerçeve satır çerçevesinin sol kenarına göre (yazım yönü sağdan sola ise sağ kenara göre) tasarlanır. Kullanıcı arayüzlerinin bu girintiyi boş alan olarak oluşturmaları gerekir.
Değerlerin anlamları:
text-indent
değeri negatif olabilir, fakat gerçeklenime özgü sınırlamalar olabilir. Eğer text-indent
değeri negatif ise metnin görünürlüğünü overflow
değeri belirleyecektir.
p { text-indent: 3em }
text-align
niteliğitext-align | NİTELİK |
Değer: | left | right | center | justify | dizge | inherit |
İlk değer: | kullanıcı arayüzüne ve yazım yönüne bağlı |
Uygulama yeri: | blok seviyesinden elemanlar |
Kalıtsallık: | evet |
Yüzdelik değerler: | Elverişsiz |
Ortam: | görsel |
Bu nitelik bir bloğun satıriçi içeriğinin nasıl hizalanacağını belirler. Değerlerin anlamları şöyledir:
direction
niteliğinin ltr veya rtl oluşuna bağlı olarak sırayla left veya right belirtilmiş gibi işlem yapılır.Bir metin bloku bir satır çerçevesi yığınıdır. left, right ve center durumunda, bu nitelik, her satır çerçevesi içindeki satıriçi çerçevelerin satır çerçevesinin sol ve/veya sağ kenarına göre nasıl hizalanacağını belirtir; hizalama görüntü alanına göre yapılmaz. justify durumunda ise kullanıcı arayüzü satıriçi çerçevelerin konumlarını belirlemekten başka genişliklerini arttırabilir. (Ayrıca, letter-spacing
ve word-spacing
niteliklerine de bakınız.)
text-align
miras alındığından 'class="center"
' öznitelikli tüm <div>
elemanlarının içindeki blok seviyesinden elemanların hepsinin satıriçi içeriği ortalanacaktır.div.center { text-align: center }
Uyumlu kullanıcı arayüzleri justify değerini, elemanın öntanımlı yazma yönünün soldan sağa olması durumunda left olarak aksi takdirde right olarak uygulayabilirler.
text-decoration
niteliğitext-decoration | NİTELİK |
Değer: | none | [ underline || overline || line-through || blink ] | inherit |
İlk değer: | none |
Uygulama yeri: | tüm elemanlar |
Kalıtsallık: | hayır (metne bakınız) |
Yüzdelik değerler: | Elverişsiz |
Ortam: | görsel |
Bu nitelik bir elemanın metnine eklenen süslemeleri tanımlar. Eğer nitelik bir block seviyesinden eleman için belirtilmeşse elemanın tüm satıriçi astsallarını etkiler. Bir satıriçi seviyeden eleman için belirtilmişse (veya üzerinde etkiliyse) eleman tarafından üretilen tüm çerçeveleri etkiler. Elemanın ne içeriği ne de metni varsa (HTML'deki <img>
elemanı gibi) kullanıcı arayüzlerinin bu niteliği yoksaymaları gerekir.
Değerlerin anlamları:
Metin süslemesi için gereken renkler color
niteliğinin değerinden türetilmelidir.
Bu nitelik miras alınmaz, fakat bir blok çerçevesinin astsal çerçevelerinin renkleri (color
niteliklerinin değerleri) farklı bile olsa aynı süsleme ile biçimlenmesi gerekir.
<a>
elemanlarının içeriklerinin altı çizilecektir:a[href] { text-decoration: underline }
text-shadow
niteliğitext-shadow | NİTELİK |
Değer: | none | [renk || uzunluk uzunluk uzunluk? ,]* [renk || uzunluk uzunluk uzunluk?] | inherit |
İlk değer: | none |
Uygulama yeri: | tüm elemanlar |
Kalıtsallık: | hayır (metne bakınız) |
Yüzdelik değerler: | Elverişsiz |
Ortam: | görsel |
Bu nitelik elemanın metnine uygulanacak gölgeleme etmenlerini virgül ayraçlı bir liste olarak kabul eder. Gölgeleme etmenleri belirtildiği sırada uygulanır ve bu bakımdan biri diğerini örtebilir, fakat asla metni örtmezler. Gölgeleme etmenleri bir çerçevenin boyutlarını değiştirmez, fakat sınırlarına dayanabilir. Gölgeleme etmenlerinin yığıt seviyesi elemanın ki ile aynıdır.
Her gölgeleme etmeni için mutlaka bir gölge mesafesi belirtilmelidir, ayrıca isteğe bağlı olarak bir bulanıklık yarıçapı ve bir gölge rengi belirtilebilir.
Bir gölgenin yeri metinden uzaklık belirten iki uzunluk değeri ile belirtilir. İlk uzunluk değerinde metnin sağına yatay uzaklık belirtilir. Negatif bir yatay uzunluk değeri gölgeyi metnin soluna yerleştirir. İkinci uzunluk değerinde metnin aşağısına doğru gölgenin yerine düşey uzaklık belirtir. Negatif bir düşey uzunluk değeri gölgeyi metnin yukarısına yerleştirir.
Bulanıklık yarıçapı isteğe bağlı olarak gölgenin yerinden sonra belirtilebilir. Bulanıklık yarıçapı, bulanıklık etmeninin sınırlarını belirleyen bir uzunluk değeridir. Bulanıklık etkisi veren etmenin hesabında kullanılan algoritma belirtilmemiştir.
Gölgeleme etmeninin uzunluk değerlerinden sonra ya da önce isteğe bağlı olarak bir renk belirtilebilir. Renk değeri gölgeleme etmeni için temel renk olarak kullanılacaktır. Renk için bir değer belirtilmezse color
niteliğinde belirtilen değer kullanılır.
Metin gölgeleri :first-letter
ve :first-line
sözde elemanlarıyla birlikte kullanılabilir.
h1 { text-shadow: 0.2em 0.2em }
Aşağıdaki örnekte yine elemanın metninin sağ altına doğru bir metin gölgesi belirtilmiştir. Gölgeye 5px yarıçaplı bulanıklık verilecek ve gölge temelde kırmızı renkte olacaktır:
h2 { text-shadow: 3px 3px 5px red }
Sonraki örnekte birden fazla gölge ekmeni belirtilmektedir. İlk gölge elemanın metninin sağ altına doğru, kırmızı renkte olacak ve bulanıklaştırılmayacaktır. İkinci gölge ilk gölgenin üzerine gelecek, metnin alt soluna yerleşecek, sarı renkte ve bulanık olacaktır. üçüncü gölge metnin sağ üstüne yerleşecektir. Üçüncü gölge için bir renk belirtilmediğinden gölge rengi elemanın color
niteliğinen alınacaktır:
h2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }
span.glow { background: white; color: white; text-shadow: black 0px 0px 5px; }
Bu örnekte, background
ve color
nitelikleri aynı değere sahiptir ve text-shadow
niteliği "güneş tutulması" etkisi oluşturmak için kullanılmıştır:
letter-spacing
ve word-spacing
nitelikleriletter-spacing | NİTELİK |
Değer: | normal | uzunluk | inherit |
İlk değer: | normal |
Uygulama yeri: | tüm elemanlar |
Kalıtsallık: | evet |
Yüzdelik değerler: | Elverişsiz |
Ortam: | görsel |
Bu nitelik metin karakterleri arasındaki boşlukların genişliklerini ayarlar. Değerlerin anlamları:
Karakterler arası boşluk algoritması kullanıcı arayüzüne bağlıdır. Karakterler arası boşluklar ayrıca satır iki kenara yayılarak hizalama yapılırken değişebilir (text-align
niteliğine bakınız).
<blockquote>
içeriğindeki karakterler arası boşluklar '0.1em' arttırılmaktadır:blockquote { letter-spacing: 0.1em }
Aşağıdaki örnekte ise kullanıcı arayüzüne karakterler arası boşluğu değiştirme izni verilmemiştir:
blockquote { letter-spacing: 0cm } /* Sadece '0' verilebilirdi */
İki karakter arasında elde edilen boşluk öntanımlı boşlukla aynı olmadığı takdirde kullanıcı arayüzlerinin çift harfleri [İng.: ligature] kullanmamaları gerekir.
Uyumlu kullanıcı arayüzleri, letter-spacing
niteliğinin değerinin normal olduğunu varsayabilirler.
word-spacing | NİTELİK |
Değer: | normal | uzunluk | inherit |
İlk değer: | normal |
Uygulama yeri: | blok seviyesinden elemanlar |
Kalıtsallık: | evet |
Yüzdelik değerler: | Elverişsiz |
Ortam: | görsel |
Bu nitelik sözcükler arası boşluk genişliğini değiştirmekte kullanılır. Değerlerin anlamları:
Sözcükler arası boşluk algoritmaları kullanıcı arayüzüne bağlıdır. Sözcükler arası boşluklar ayrıca satır iki kenara yayılarak hizalama yapılırken değişebilir (text-align
niteliğine bakınız).
<h1>
içeriğindeki sözcükler arası boşluklar '1em' arttırılmaktadır:h1 { word-spacing: 1em }
Uyumlu kullanıcı arayüzleri, word-spacing
niteliğinin değerinin normal olduğunu varsayabilirler.
text-transform
niteliğitext-transform | NİTELİK |
Değer: | capitalize | uppercase | lowercase | none | inherit |
İlk değer: | none |
Uygulama yeri: | tüm elemanlar |
Kalıtsallık: | evet |
Yüzdelik değerler: | Elverişsiz |
Ortam: | görsel |
Bu nitelik elemanın metninin karakterlerinin harf büyüklükleri üzerinde etkilidir. Değerlerin anlamları:
Her harf için asıl dönüşüm karakteri metnin yazıldığı dile bağlıdır. Bir elemanın dilini bulma yolları için [RFC2070]'e bakınız.
Uyumlu kullanıcı arayüzleri, harf dönüşüm tablosu [ISO/IEC 10646]'da belirtilenden farklı olan dillerin elemanları için ve Latin-1 ailesinden olmayan karakterler için text-transform
niteliğinin değerinin none olduğunu varsayabilirler.
<h1>
elemanının tüm metnini büyük harfe çevirmektedir:h1 { text-transform: uppercase }
white-space
niteliğiwhite-space | NİTELİK |
Değer: | normal | pre | nowrap | inherit |
İlk değer: | normal |
Uygulama yeri: | tüm elemanlar |
Kalıtsallık: | evet |
Yüzdelik değerler: | Elverişsiz |
Ortam: | görsel |
Bu nitelik bir elemanın içeriğindeki boşluklar için nasıl bir işlem yapılacağını belirtir. Değerlerin anlamları:
<br>
elemanı gibi).<pre>
ve <p>
elemanları ile 'nowrap
' özniteliğinden eleman içeriğindeki boşluklar için nasıl bir işlem beklendiği belirtilmiştir:pre { white-space: pre } P { white-space: normal } td[nowrap] { white-space: nowrap }
Uyumlu kullanıcı arayüzleri kullanıcı ve yazar biçembentlerindeki white-space
niteliklerini yoksayabilir, fakat öntanımlı biçembentte bir değer belirtmelidirler.
Önceki | Yukarı | Sonraki |
Yazıtipleri | Bir Linux Kitaplığı Sayfası | Tablolar |