Kurs Takvimi

CSS İleri Düzey Eğitimleri

• CSS Ekdersi
• CSS Tanıtımı
• CSS Temel Gramerci
• CSS İleri Gramerci
• CSS Köken Seçicileri
• CSS id Seçicileri
• CSS Sınıf Seçicileri
• CSS Oluşturma
• CSS Arka Plan
• CSS Metin
• CSS Yazıtipi
• CSS Listeleri

CSS Çerçeve Modeli

• CSS Kutu Modeli Özeti
• CSS İç Boşluk
• CSS Kenarlık
• CSS Dış Boşluk
• CSS Dış Boşluk Birleşimi

CSS Konumlandırma

• CSS Konum Özeti
• CSS Göreceli Konum
• CSS Mutlak Konum
• CSS Yüzeysel Konum

CSS Seçicileri

• CSS Element Seçicileri
• CSS Seçici Gruplama
• CSS Sınıf Seçici Ayrıntısı
• CSS ID Seçici Ayrıntısı
• CSS Özellik Seçici Ayrıntısı
• CSS Çocuk Seçicileri
• CSS Alt Sınıf Seçicileri
• CSS Yakın Kardeş Seçicileri

İhtiyari dersler

Kurs Önerisi:

• CodeW3C.com Çantası

CSS metin özellikleri, metnin görünümünü tanımlar.

Metin özellikleri aracılığıyla, metin rengini, karakter aralığını, metni hizalayıp süsleyebilir, metni içe kaydırabilir ve daha fazlasını yapabilirsiniz.

Metni daraltma

Web sayfasındaki paragrafların ilk satırlarını içe kaydırmak, en yaygın kullanılan metin biçimlendirme etkilerinden biridir.

CSS, text-indent özelliğiBu özellik, metin içe kaydırma işlemini kolayca gerçekleştirmek için uygundur.

text-indent özelliği kullanılarak, tüm elementlerin ilk satırları belirli bir uzunlukla içe kaydırılabilir, hatta bu uzunluk negatif de olabilir.

Bu özellikin en yaygın kullanımı, paragrafların ilk satırını içe kaydırmaktır; aşağıdaki kurallar, tüm paragrafların ilk satırını 5 em içe kaydıracaktır:

p {text-indent: 5em;}

Dikkat:Genel olarak, tüm blok öğelerine text-indent uygulanabilir, ancak bu özellik, satırlık öğelere veya değişken öğelere (örneğin, resimler) uygulanamaz. Ancak, bir blok öğesi (örneğin, bir paragraf)ın ilk satırında bir resim varsa, bu resim o satırın geri kalanı ile birlikte hareket eder.

İpucu:Bir satırlık öğenin ilk satırını 'içe kaydırmak' istiyorsanız, sol iç marj veya dış marj oluşturarak bu etkiyi elde edebilirsiniz.

Negatif değer kullanımı

text-indent, negatif değer olarak da ayarlanabilir. Bu tür teknikleri kullanarak, birçok ilginç etki elde edebilirsiniz, örneğin 'asılı içe kaydırma', yani ilk satırın elementin geri kalanının sol kenarında asılı kalması:

p {text-indent: -5em;}

Ancak text-indent için negatif değer ayarladığınızda dikkatli olun, bir paragrafa negatif değer ayarlandığında, bazı metinler tarayıcı penceresinin sol kenarını aşabilir. Bu tür görüntüleme sorunlarını önlemek için, negatif içe kaydırma için bir marj veya bazı iç marjlar ayarlamayı öneririz:

p {text-indent: -5em; padding-left: 5em;}

百分比值 kullanımı

text-indent,百分比值在内的所有长度单位都可以使用。

Yüzde değerler içe kaydırma öğesinin ebeveyn genişliğine göre olmalıdır. Diğer bir deyişle, içe kaydırma değeri %20 olarak ayarlandığında, etkilenen öğenin ilk satırı ebeveyn genişliğinin %20'sine içe kaydırılır.

Aşağıdaki örnekte, içe kaydırma değeri ebeveyn öğesinin %20'sidir, yani 100 piksel:

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>bu bir paragraftır</p>
</div>

devralma

text-indent özelliği devralabilir, aşağıdaki işaretleri göz önünde bulundurun:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">bazı metin. bazı metin. bazı metin.</div>
<p>bu bir paragraftır.</p>
</div>
</div>

Bu işaretlerdeki paragraflar 50 piksel kadar içe kaydırılır, çünkü bu paragraf inner adlı div öğesinin içe kaydırma değerini devralır.

yatay hizalama

text-align temel bir özelliktir ve bir element içindemetin satırıBirbirleri arasındaki hizalama yöntemleri. İlk 3 değeri oldukça doğrudur, ancak 4. ve 5. değerler biraz karmaşıktır.

Değerler left, right ve center, element içindeki metni sırasıyla sola, sağa ve ortaya hizalar.

Batılı diller sağdan sola doğru okunur, bu yüzden text-align'in varsayılan değeri sağa doğrudır. Metin sol sınıra hizalanır ve sağ sınıra dişli gibi (soldan sağa metin olarak adlandırılır). İbrani ve Arapça gibi diller için, text-align'in varsayılan değeri sağa doğrudır, çünkü bu diller sağdan sola doğru okunur. Şaşırtıcı olmayacak şekilde, center her metin satırını element içinde ortaya yerleştirir.

İpucu:Blok elementleri veya tabloları ortaya yerleştirmek, bu elementlere uygun olarak sol ve sağ dış boşluk ayarlamak suretiyle yapılır.

text-align:center ile <CENTER>

text-align:center ile <CENTER> elementinin etkisinin aynı olduğuna inanabilirsiniz, ancak aslında büyük bir fark vardır.

<CENTER> hem metni hem de tüm elementi ortaya alır. text-align, elementin hizalanmasını kontrol etmez, sadece içeriği etkiler. Element kendisi bir parçadan bir parçaya taşınmaz, sadece içindeki metin etkilidir.

justify

Sonraki yatay hizalama özelliği justify'dır.

İki uçta hizalanmış metinde, metin satırlarının sol ve sağ uçları ebeveyn bileşeninin iç sınırlarına yerleştirilir. Sonra, kelimeler ve harfler arasındaki aralığı ayarlayarak her satırın uzunluğunu eşit hale getirin. Belki de iki uçta hizalanmış metnin baskı alanında yaygın olduğunu fark etmişsinizdir.

Dikkat edilmesi gereken şey, iki uçta hizalanmış metnin nasıl genişletileceğinin kullanıcı aracısı (CSS değil) tarafından belirlenmesi gerektiğidir. Ayrıntılar için, lütfen CSS text-align özelliği referans sayfası.

kelime aralığı

word-spacing özelliğiKelimeler (kelimeler) arasındaki standart aralığı değiştirebilirsiniz. Varsayılan değeri normal, 0 olarak ayarlanmıştır.

word-spacing özelliği bir pozitif uzunluk değeri veya negatif uzunluk değeri kabul eder. Bir pozitif uzunluk değeri sağlanırsa, kelimeler arasındaki aralık artırılır. word-spacing için bir negatif değer ayarlanırsa, onu yaklaştırır:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
Bu bir paragraftır. Kelimeler arasındaki boşluklar artırılacaktır.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

Örnek TIY: Kelime aralığını (harf aralığını) artırma veya azaltma

Açıklama:CSS'de 'kelime' (word) tanımını daha iyi anlamak için ziyaret edin: CSS word-spacing özellikleri referans sayfası.

Harf aralığı

letter-spacing özelliğiword-spacing ile arasındaki fark, harf veya harfler arasındaki aralığı değiştirmektir.

word-spacing özelliği ile aynı şekilde, letter-spacing özelliğinin alınabilir değerleri tüm uzunluklardır. Varsayılan anahtar kelime normal (bu, letter-spacing:0 ile aynıdır). Girişilen uzunluk değeri harfler arasındaki aralığı belirtilen miktarda artırır veya azaltır:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

Örnek TIY: Karakter aralığını (harf aralığını) belirleme

Karakter dönüştürme

text-transform özelliğiMetin büyük küçük harflerini işlemek için bu özellik 4 değeri içerir:

• none
• uppercase
• lowercase
• capitalize

Varsayılan değer none, metne herhangi bir değişiklik yapmaz, kaynağın metnindeki mevcut büyük küçük harf düzenini kullanır. Adından da anlaşılacağı gibi, uppercase ve lowercase metni tam büyük harfe ve tam küçük harfe dönüştürür. Son olarak, capitalize sadece her kelimenin ilk harfini büyük harfe çevirir.

Bir özellik olarak text-transform belki de çok önemli değildir, ancak aniden tüm h1 ögelerini büyük harfe çevirmeye karar verirseniz bu özellik oldukça faydalıdır. Tüm h1 ögelerinin içeriğini tek tek değiştirmenize gerek yoktur; text-transform kullanarak bu değişikliği yapabilirsiniz:

h1 {text-transform: uppercase}

text-transform kullanmak iki yönüyle faydalıdır. İlk olarak, bu değişikliği yapmak için basit bir kural yazmanız yeterlidir; h1 ögesini doğrudan değiştirmenize gerek yoktur. İkinci olarak, daha sonra tüm büyük küçük harfleri eski durumuna döndürmeye karar verirseniz, bu değişikliği daha kolay gerçekleştirebilirsiniz.

Örnek TIY: Metin içindeki harflerin büyük küçük harf düzenini kontrol etme

Metin süslemesi

Sonra, biz tartışıyoruz text-decoration özelliğiBu, oldukça ilginç bir özelliktir ve birçok ilginç davranış sunar.

text-decoration 5 değeri vardır：

• none
• underline
• overline
• line-through
• blink

Beklendiği gibi, underline, elemente alt çizgi ekler, HTML'deki U elementi gibi. Overline'nın etkisi tam tersidir, metnin üstüne bir alt çizgi çizer. line-through değeri, metin ortasında bir çizgi döşeme süslemesi çizer, HTML'deki S ve strike elementleri ile eşdeğerdir. blink, metni parlamaya geçirir, Netscape tarafından desteklenen tartışmalı blink etiketi benzeri bir etki yaratır.

none değeri, bir elemente uygulanan tüm süslemeleri kapatır. Genellikle, süslemsiz metin varsayılan görünümde olmasına rağmen, bu her zaman böyle değildir. Örneğin, bağlantılar varsayılan olarak alt çizgili olur. Bağlantıların alt çizgisini kaldırmak istiyorsanız, aşağıdaki CSS ile bu işlemi yapabilirsiniz:

a {text-decoration: none;}

Dikkat:Bu tür bir kural ile bağlantının alt çizgisini açıkça kaldırdığınızda, bağlantı ile normal metin arasındaki görsel tek fark renktir (en azından bu böyle olmalıdır, ancak renğin kesinlikle farklı olacağından emin olun都不能保证其颜色肯定有区别).

Bir kuralda birden fazla süslemeyi birleştirebilirsiniz. Tüm bağlantıların hem alt çizgi hem de üst çizgi olmasını istiyorsanız, kural şu şekilde olacaktır:

a:link a:visited {text-decoration: underline overline;}

Ancak, iki farklı süslemenin aynı elementle eşleşmesi durumunda, kazanma kuralının değeri tamamen diğer değerini değiştirir. Daha aşağıdaki kuralı göz önünde bulundurun:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

Belirtilen kurallara göre, tüm class'ı stricken olan h2 elementleri sadece bir çizgi döşeme süslemesi içerir, alt çizgi ve üst çizgi olmaz, çünkü text-decoration değeri, birikmemek yerine değiştirir.

Boşluk işaretlerini işlemek

white-space özelliğiKullanıcı aracının kaynak belgedeki boşluk, satır boşlukları ve tab karakterlerini işleme yöntemini etkiler.

Bu özellik kullanılarak, tarayıcının karakterler arası ve metin satırları arasındaki boşluk işaretlerini işleme yöntemini etkileyebilir. Bir şekilde, varsayılan XHTML işleme, boşluk işaretlerini işlemi zaten tamamlamıştır: tüm boşluk işaretlerini bir boşluk olarak birleştirir. Bu nedenle, aşağıdaki işaretlerin Web tarayıcısında görüntülendiğinde, karakterler arasında sadece bir boşluk görüntülenir ve element içindeki satırları göz ardı eder:

<p>This     paragraph has    many
    spaces           in it.</p>

Bu tür varsayılan davranışı açıkça belirlemek için aşağıdaki şekilde ifade edilebilir:

p {white-space: normal;}

Yukarıdaki kurallar, tarayıcıya normal şekilde işlemek için talimat verir: fazla boşlukları atar. Bu değeri verildiğinde, satır değiştiricileri (enter) boşluklara dönüştürülür ve bir satırda birden fazla boşluk dizisi de bir boşluğa dönüştürülür.

Örnek TIY: white-space: normal

Değer pre

Ancak, white-space'ı pre olarak ayarladığınızda, bu özellikten etkilenen elemanın içindeki boşluk simgesi işleme farklıdır ve bu davranış, XHTML'in pre elementi gibi olur; boşluk simgeleri göz ardı edilmez.

white-space özelliğinin değeri pre olarak ayarlandığında, tarayıcı ekstra boşlukları ve hatta enterleri dikkate alacaktır. Bu açıdan ve sadece bu açıdan, herhangi bir element bir pre elementine eşdeğer olabilir.

Örnek TIY: white-space: pre

Dikkat:Test edilmiştir ki, IE 7 ve daha eski sürümlerinde bu değeri desteklememektedir, bu yüzden yukarıdaki örnekleri görüntülemek için IE dışındaki tarayıcıları kullanmanız gerekmektedir.

Değer nowrap

Buna karşılık gelen değer nowrap, elemanın içindeki metni satırlara ayırmayı önler, ancak br elementi kullanılmadıkça. CSS'te nowrap, HTML 4'te <td nowrap> kullanılarak bir tablo hücresinin satırlara ayırmayı önlemesi gibi çok benzerdir, ancak white-space değeri herhangi bir elemana uygulanabilir.

Örnek TIY: white-space: nowrap

Değerler pre-wrap ve pre-line

CSS2.1, önceki CSS sürümlerinde olmayan pre-wrap ve pre-line değerlerini tanıttı. Bu değerlerin amacı, yaratıcıların boşluk simgesi işleme üzerinde daha iyi kontrol sahibi olmasını sağlamaktır.

Eğer elemanın white-space ayarı pre-wrap olarak ayarlanırsa, elemanın içindeki metin boşluk simgesi dizisini korur, ancak metin satırları normalde satır değiştirir. Bu değere ayarlanırsa, kaynak metinindeki satır ayırıcıları ve oluşturulan satır ayırıcıları da korunur. pre-line, pre-wrap'ın tam tersidir ve normal metinde olduğu gibi boşluk simgesi dizilerini birleştirir, ancak satır değiştiricileri korur.

TIY örneği: white-space: pre-wrap

TIY örneği: white-space: pre-line

Dikkat:Yukarıdaki iki örneği IE7 ve FireFox2.0 tarayıcılarında test ettik, ancak sonuç olarak, değer pre-wrap ve pre-line iyi desteklenmedi.

Özet

Aşağıdaki tablo, white-space özelliğinin davranışlarını özetler:

Metin yönü

İngilizce kitaplar okuduğunuzda, soldan sağa ve yukarıdan aşağıya doğru okursunuz, bu da İngilizce akış yönüdür. Ancak, tüm diller böyle değil. Antik Çince'nin sağdan sola doğru okunduğunu biliyoruz, tabii ki, İbrani ve Arapça gibi diller de dahil. CSS2, yönelliği tanımlamak için bir özellik getirdi.

direction özelliğiBloklu elementlerin metin yazım yönünü, tabloların sütun düzenini, içeriğin element çerçevesini doldurma yönünü ve iki uçta hizalanmış elementlerin son satırının konumunu etkiler.

Açıklama:Satır içi elementler için, sadece unicode-bidi özelliğidirection özelliği embed veya bidi-override olarak ayarlandığında uygulanır.

direction özelliği iki değeri içerir: ltr ve rtl. Çoğu durumda, varsayılan değer ltr'dir ve sağdan sola doğru metin gösterir. Sağdan sola doğru metin göstermek için değer rtl kullanılmalıdır.

CSS metin özellikleri

Araç Kutusu

CSS Referans Kılavuzu

CSS Örnekleri

CSS Testi

CSS Eğitimi

Sponsor Linkleri