Metin Hizalama, Süsleme ve Aralıklandırma
Metni hizalayın, altı çizili veya üstü çizili biçimlendirme ekleyin ve harf ile satır aralıklarını denetleyin.
Metin Hizalama, Süsleme ve Aralıklandırma, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
text-align
text-align, bir blok kapsayıcı içindeki satır içi içeriğin yatay hizalamasını denetler.
<p class="left">Left aligned text</p>
<p class="center">Center aligned text</p>
<p class="right">Right aligned text</p>
<p class="justify">Justified text that stretches to fill the full width of its container on every line except the last, spreading word spacing evenly across the line.</p>
text-align: justify
justify, sözcükler arasına boşluk ekleyerek satırları kapsayıcının tam genişliğini dolduracak şekilde uzatır. Dar kapsayıcılarda rahatsız edici boşlukları önlemek için hyphens: auto ile birlikte kullanın.
<p>Justified paragraph text with hyphenation enabled so that long words like internationalization can break across justified lines cleanly without leaving large gaps.</p>
text-decoration
text-decoration, metne çizgiler ekler. Genellikle bağlantıların altını çizmek veya silinmiş içeriğin üstünü çizmek için kullanılır.
<a href="#">Underlined link</a>
<p class="strikethrough">Strikethrough text</p>
<a href="#" class="no-underline">No underline link</a>
text-decoration Uzun Gösterimi
text-decoration, çizgi, stil, renk ve kalınlık değerlerinin kısa gösterimidir:
<a href="#">Wavy red underline link</a>
text-transform
text-transform, temel HTML'yi değiştirmeden metindeki büyük ve küçük harf kullanımını değiştirir:
<p class="upper">uppercase this text</p>
<p class="lower">LOWERCASE THIS TEXT</p>
<p class="title">title case this text</p>
<p class="none">No Transform Applied</p>
text-indent
text-indent, bir blok öğesinin ilk satırını girintiler. Metni erişilebilir biçimde gizlemek (görsel değiştirme) için eşleşen iç dolguyla birlikte negatif bir değer kullanın.
<p class="indent">This paragraph's first line is indented by 2em, a classic print-style paragraph convention brought to the web.</p>
<a href="#" class="logo-link">Company Logo</a>
white-space
white-space, kaynak HTML'deki boşlukların ve satır sonlarının nasıl işleneceğini denetler:
normal— boşlukları daraltır, sözcüklerde satır kaydırırnowrap— satır kaydırmayı engellerpre— boşlukları korur, satır kaydırmazpre-wrap— boşlukları korur, satır kaydırmaya izin verir
<p class="nowrap">This text will not wrap no matter how long the line becomes.</p>
<pre>function example() {
return true;
}</pre>
letter-spacing
letter-spacing, karakterler arasına ek boşluk koyar. Pozitif değerler glifleri birbirinden uzaklaştırır; negatif değerler onları birbirine yaklaştırır. Orantılı ölçekleme için em kullanın.
<p class="spaced">spaced heading text</p>
word-spacing
word-spacing, sözcükler arasına ek boşluk koyar. Nadiren gereklidir; ancak iki yana yaslanmış metinlerde ince ayar yapmak veya başlık metinlerinde kullanmak için yararlıdır.
<h1>Word Spaced Heading Example</h1>
text-overflow: ellipsis
Taşan metni üç nokta ile kısaltın. Bunun için overflow: hidden ve white-space: nowrap gerekir.
<p class="truncate">This is a very long line of text that will be truncated with an ellipsis</p>
writing-mode ile Dikey Metin
writing-mode, metin akışının yönünü değiştirir. text-orientation ile birlikte kullanıldığında dikey CJK tipografisini veya yaratıcı biçimde döndürülmüş etiketleri mümkün kılar.
<div class="label">Vertical Label Text</div>
Hızlı Kontrol
Metin taştığında üç noktanın görüntülenmesi için hangi üç özellik gerekir?
Özet
text-align, satır içi içeriği kapsayıcısı içinde konumlandırır. text-decoration, çizgiler ekler veya kaldırır. text-transform, büyük ve küçük harf kullanımını değiştirir. white-space: nowrap + overflow: hidden + text-overflow: ellipsis, klasik metin kısaltma yöntemidir.
Sıkça Sorulan Sorular
“Metin Hizalama, Süsleme ve Aralıklandırma” dersi ücretsiz mi?
Evet — “Metin Hizalama, Süsleme ve Aralıklandırma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Metin Hizalama, Süsleme ve Aralıklandırma” dersinde ne öğreneceğim?
Metni hizalayın, altı çizili veya üstü çizili biçimlendirme ekleyin ve harf ile satır aralıklarını denetleyin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Metin Hizalama, Süsleme ve Aralıklandırma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Yazı Tipi Ailesi ve Web Güvenli Yazı Tipleri
- Yazı Tipi Boyutu, Ağırlığı ve Stili
- Metin Hizalama, Süsleme ve Aralıklandırma
- Google Fonts ve @font-face