Articles
CSS'e Giriş
Metinle ilgili CSS özellikleri

Metinle ilgili CSS özellikleri

Bu makale, metinle ilgili CSS özelliklerini açıklar.

text-align, text-decoration ve text-transform özelliklerinin kullanımını ve nasıl yazılacağını öğrenebilirsiniz.

YouTube Video

Önizleme için HTML oluşturma

css-text.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Text-Related CSS Properties</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-text.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>Text-Related CSS Properties</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Typography (Text-Related)</h2>
20        </header>
21        <article>
22            <h3>text-align</h3>
23            <section>
24                <header><h4>text-align: left</h4></header>
25                <section class="sample-view">
26                    <p class="text-align-left">This is left-aligned text.</p>
27                </section>
28                <header><h4>text-align: center</h4></header>
29                <section class="sample-view">
30                    <p class="text-align-center">This is center-aligned text.</p>
31                </section>
32                <header><h4>text-align: right</h4></header>
33                <section class="sample-view">
34                    <p class="text-align-right">This is right-aligned text.</p>
35                </section>
36                <header><h4>text-align: justify</h4></header>
37                <section class="sample-view">
38                    <p class="text-align-justify">This is justified text, meaning it will be spaced so that the left and right edges are aligned evenly.</p>
39                </section>
40            </section>
41        </article>
42        <article>
43            <h3>text-decoration</h3>
44            <section>
45                <header><h4>text-decoration: underline</h4></header>
46                <section class="sample-view">
47                    <p class="text-decoration-underline">This text has an underline.</p>
48                </section>
49                <header><h4>text-decoration: overline</h4></header>
50                <section class="sample-view">
51                    <p class="text-decoration-overline">This text has an overline.</p>
52                </section>
53                <header><h4>text-decoration: line-through</h4></header>
54                <section class="sample-view">
55                    <p class="text-decoration-line-through">This text has a line-through.</p>
56                </section>
57                <header><h4>text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; text-decoration-thickness: 2px;</h4></header>
58                <section class="sample-view">
59                    <p class="text-decoration-custom-underline">This text has a custom underline (color and style).</p>
60                </section>
61            </section>
62        </article>
63        <article>
64            <h3>text-transform</h3>
65            <section>
66                <header><h4>text-transform: none</h4></header>
67                <section class="sample-view">
68                    <p class="text-transform-none">This is no transformation applied.</p>
69                </section>
70                <header><h4>text-transform: capitalize</h4></header>
71                <section class="sample-view">
72                    <p class="text-transform-capitalize">this is a sentence in lowercase but will be capitalized.</p>
73                </section>
74                <header><h4>text-transform: uppercase</h4></header>
75                <section class="sample-view">
76                    <p class="text-transform-uppercase">This text will be transformed to uppercase.</p>
77                </section>
78                <header><h4>text-transform: lowercase</h4></header>
79                <section class="sample-view">
80                    <p class="text-transform-lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
81                </section>
82            </section>
83        </article>
84    </main>
85</body>
86</html>

Tipografi (Metinle İlgili)

text-align özelliği 

 1/* Text align examples */
 2.text-align-left {
 3    text-align: left; /* Align text to the left */
 4}
 5
 6.text-align-center {
 7    text-align: center; /* Center align text */
 8}
 9
10.text-align-right {
11    text-align: right; /* Align text to the right */
12}
13
14.text-align-justify {
15    text-align: justify; /* Justify text (aligns text to both left and right edges) */
16}

text-align, metin ve satır içi öğelerin yatay hizalamasını belirlemek için kullanılan bir CSS özelliğidir. Genellikle paragraf veya başlık metnini sola, sağa veya merkeze hizalamak için kullanılır. Web sayfası düzeninde ve metin biçimlendirme işlemlerinde önemli bir rol oynar.

text-align özelliğinin ana değerleri

left (sol hizalı) 
1p {
2    text-align: left;
3}
  • left metni sola hizalar (bu, birçok dil için varsayılan hizalama yöntemidir).
right (sağ hizalı) 
1p {
2    text-align: right;
3}
  • right metni sağa hizalar. Arapça ve İbranice gibi sağdan sola doğru yazılan diller için özellikle etkilidir.
center (merkez hizalı) 
1p {
2    text-align: center;
3}
  • center metni ortaya hizalar. Genellikle başlıklar ve alt başlıklar için kullanılır.
justify (iki yana yaslı) 
1p {
2    text-align: justify;
3}
  • justify, satırların sol ve sağ kenarlarını eşit hizalayarak düzenli bir görünüm sağlar. Gazete ve dergi gibi düzenlerde kullanılır.
start (başlangıç hizalı) 
1p {
2    text-align: start;
3}
  • start metni başlangıç pozisyonuna göre hizalar. Soldan sağa yazılan diller için, bu sol hizalama ile aynı şekilde davranır.
end (son hizalama) 
1p {
2    text-align: end;
3}
  • end metni bitiş pozisyonuna göre hizalar. Soldan sağa yazılan dillerde, bu sağ hizalama ile aynı şekilde davranır.

text-align kullanımı ve örnekleri

Merkez hizalamayı kullanan başlık
  • Merkez hizalama genellikle web sayfaları ve belgelerin başlıkları için kullanılır. Görsel olarak hoş görünür ve dengeli bir tasarım oluşturur.
Paragraflar için sol veya sağ hizalama
  • Metin paragrafları varsayılan olarak genellikle soldan hizalanır, ancak belirli tasarımlar için sağ veya merkez hizalama kullanılabilir.
Metni eşit şekilde hizalama
  • justify ile hizalandığında, metnin her satırı hem sol hem de sağ kenarla eşit şekilde hizalanır. Gazete veya dergi tarzı düzenler için kullanışlıdır.

Özet

  • text-align, metni veya satır içi elemanları yatay olarak hizalamak için kullanılan bir CSS özelliğidir.
  • Sol hizalama, sağ hizalama, merkez hizalama ve düz hizalama gibi çeşitli düzenleri yönetebilir.
  • Düzeni ve tasarım hedeflerine göre uygun hizalamayı seçmek, okunabilir ve güzel bir tasarım elde etmenin anahtarıdır.

Metin hizalamayı tasarımınızın bir parçası olarak text-align ile etkili bir şekilde kullanalım.

text-decoration özelliği 

 1/* Text decoration examples */
 2.text-decoration-underline {
 3    text-decoration: underline;
 4}
 5
 6.text-decoration-overline {
 7    text-decoration: overline;
 8}
 9
10.text-decoration-line-through {
11    text-decoration: line-through;
12}
13
14.text-decoration-custom-underline {
15    text-decoration: underline;
16    text-decoration-color: red;
17    text-decoration-style: wavy;
18    text-decoration-thickness: 2px;
19}

text-decoration, metne alt çizgi, üst çizgi, üzeri çizili veya özel stil çizgiler eklemek için kullanılan bir CSS özelliğidir. Bu özelliği kullanarak, metin stilini daha dekoratif veya görsel olarak vurgulanmış hale getirebilirsiniz.

Açıklama:

  • text-decoration-underline sınıfı, metne alt çizgi ekler.
  • text-decoration-overline sınıfı, metnin üzerine bir çizgi çizer.
  • text-decoration-line-through sınıfı metne bir üstü çizili (strikethrough) efekt uygular.
  • text-decoration-custom-underline sınıfı, alt çizgi rengini, stilini ve kalınlığını özelleştirmenin bir örneğidir.

text-decoration için temel değerler

none 
1p {
2    text-decoration: none;
3}
  • none belirlemek metindeki herhangi bir dekorasyonu kaldıracaktır. Örneğin, bağlantılardan alt çizgiyi kaldırmak istediğinizde kullanılır.
underline 
1p {
2    text-decoration: underline;
3}
  • underline belirlemek metnin altına bir alt çizgi çizer. Bağlantılar veya vurgulamak istediğiniz kısımlar için kullanılabilir.
overline 
1p {
2    text-decoration: overline;
3}
  • overline belirlemek metnin üzerinden bir çizgi çizer. Görünümü değiştirmek veya özel süsleme için kullanılır.
line-through 
1p {
2    text-decoration: line-through;
3}
  • line-through belirlemek metnin üstüne bir çizgi çizer. Düzeltmeleri belirtmek için kullanılır.
blink（点滅）
  • blink metnin yanıp sönmesine neden olan bir değerdir, ancak artık çoğu tarayıcı tarafından desteklenmediği için kullanılmaz.

text-decoration için gelişmiş ayarlar

text-decoration aşağıdaki gibi ayrıntılı ayarlamalara izin verir:

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • text-decoration-color özelliği alt çizgiler veya çizili metinlerin rengini belirtmenizi sağlar. Varsayılan olarak metin rengiyle eşleşir, ancak farklı bir renk seçerek görsel bir vurgu ekleyebilirsiniz.
text-decoration-style 
 1p.dshed {
 2    text-decoration: underline;
 3    text-decoration-style: solid;
 4}
 5p.double {
 6    text-decoration: underline;
 7    text-decoration-style: double;
 8}
 9p.dotted {
10    text-decoration: underline;
11    text-decoration-style: dotted;
12}
13p.dashed {
14    text-decoration: underline;
15    text-decoration-style: dashed;
16}
17p.wavy {
18    text-decoration: underline;
19    text-decoration-style: wavy;
20}
  • text-decoration-style özelliği süs çizgilerinin stilini belirtmenizi sağlar. Değerler aşağıdakileri içerir:.
    • solid (Varsayılan, düz çizgi)
    • double (çift çizgi)
    • dotted (noktalı çizgi)
    • dashed (kesikli çizgi)
    • wavy (dalgalı çizgi)
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • text-decoration-thickness özelliği süs çizgilerinin kalınlığını belirtmenizi sağlar. Örneğin, 2px veya 0.1em gibi birimler kullanarak ayarlayabilirsiniz.

Özet:

  • text-decoration, metinlerin altını çizmek veya üstünü çizmek gibi dekoratif çizgiler eklemek için kullanılan bir özelliktir.
  • text-decoration-color, text-decoration-style ve text-decoration-thickness ile daha ayrıntılı özelleştirme mümkündür.
  • Bağlantıları veya önemli metinleri vurgulamak ya da bir tasarım öğesi olarak sıkça kullanılır.

text-decoration kullanarak metinlere hafif vurgu veya detaylar ekleyebilirsiniz.

text-transform özelliği 

 1/* Text transform examples */
 2.text-transform-none {
 3    text-transform: none;
 4}
 5
 6.text-transform-capitalize {
 7    text-transform: capitalize;
 8}
 9
10.text-transform-uppercase {
11    text-transform: uppercase;
12}
13
14.text-transform-lowercase {
15    text-transform: lowercase;
16}

text-transform metnin harf durumunu dönüştürmek için kullanılan bir CSS özelliğidir. Bu özellik, HTML'de belirtilen metnin görüntü formatını kontrol etmenizi sağlar ve kullanıcı tarafından girilen ya da mevcut metnin harf durumunu otomatik olarak dönüştürür.

Açıklama:

  • text-transform-none sınıfı, metni orijinal haliyle hiçbir değişiklik yapmadan görüntüler.
  • text-transform-capitalize sınıfı, her kelimenin ilk harfini büyük harfe dönüştürür.
  • text-transform-uppercase sınıfı, metnin tamamını büyük harfe dönüştürür.
  • text-transform-lowercase sınıfı, metnin tamamını küçük harfe dönüştürür.

text-transform ana değerleri

none 
1p {
2    text-transform: none;
3}
  • none belirtilirse, metin değişmeden kalır.
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • capitalize belirtilirse, her kelimenin ilk harfi büyük harfe dönüştürülür. Kelime sınırları boşluklar veya noktalama işaretleri ile tanınır.
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • uppercase belirtilirse, metnin tamamı büyük harfe dönüştürülür.
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • lowercase belirtilirse, metnin tamamı küçük harfe dönüştürülür.
full-width
  • full-width belirtilirse, metin tam genişlikte karakterlere dönüştürülür. Genellikle Kanji veya Kana ile çalışırken özel bir stil olarak kullanılır, ancak çok az tarayıcı bunu destekler.

Özet:

  • text-transform, metnin harf durumunu değiştirmek için kullanışlı bir CSS özelliğidir.
  • Başlıklar, gezinme menüleri ve form metinleri için görsel tutarlılık sağlamak amacıyla sıkça kullanılır.
  • Kullanıcı girişinden bağımsız olarak metni belirli bir stilde görüntülemek istediğinizde kullanışlıdır.

Bu özelliği kullanarak, görsel tutarlılığı korurken metni kolayca düzenleyebilirsiniz.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

Yazı tipi ile ilgili CSS ÖzellikleriMetin boşluğuyla ilgili CSS özellikleri