CSS'de 10 Metin Stili Özelliği

Basamaklı Stil Sayfaları (CSS), HTML'nin öğeleri ekranda nasıl görüntülediğini açıklar. CSS, birkaç satır kodla birden çok web sayfasının düzenini kontrol edebilir.

CSS, metnin aralığını, görünümünü ve hizalamasını etkileyen biçimlendirme özelliklerine sahiptir. Uygulama sayfalarınızdaki metne stil vermek için kullanabileceğiniz bazı özellikler aşağıda verilmiştir.

1. Metin Rengi

bu renk özelliği, metninizin ana ön plan rengini belirtir. Gibi önceden tanımlanmış bir renk adı kullanabilirsiniz. kırmızı, beyaz, veya yeşil. Onaltılık bir değer veya RGB, HSL ve RGBA gibi diğer birimleri de kullanabilirsiniz.

gibi CSS çerçeveleri Kuyruk Rüzgarı CSS'si çeşitli tonları gösteren yerleşik bir renk özelliğine sahiptir. Bu, tercih ettiğiniz bir gölgeyi seçmenizi kolaylaştırır. Bu özelliklerden bazılarını kullanarak aşağıdaki başlıkların rengini değiştirelim:

<vücut>
<h1>Rengimi Değiştirh1>
<h2>Rengimi Değiştirh2>
<h3>Rengimi Değiştirh3>





instagram viewer
<h4>Rengimi Değiştirh4>
vücut>

CSS şöyle görünecek:

h1 {
renk: turuncu;
}
h2 {
renk: #ff6600;
}
h3 {
renk: rgb(255, 102, 0);
}
h4 {
renk: hsl(24, 100%, 50%);
}

Ve stillendirilmiş metin şu şekilde görünecektir:

2. Arka plan rengi

kullanabilirsiniz arka plan rengi yaratılacak özellik çekici arka planlar. Aşağıdaki başlıklar için farklı arka planlar ayarlamak için kullanın:

<vücut>
<h1>Arka Plan Rengimi Değiştirh1>
<h2>Arka Plan Rengimi Değiştirh2>
<h3>Arka Plan Rengimi Değiştirh3>
<h4>Arka Plan Rengimi Değiştirh4>
vücut>

Aşağıdaki CSS ile:

h1 {
arka plan rengi: turuncu;
}
h2 {
arka plan rengi: #009900;
}
h3 {
arka plan rengi: rgb(204, 0, 0);
}
h4 {
arka plan rengi: hsl(60, 100%, 50%);
}

Tarayıcınız bu sayfayı oluşturduğunda, şöyle görünecektir:

3. Metin hizalama

bu Metin hizalama özelliği metnin yatay hizalamasını ayarlar. Bu değer olabilir sol, Sağ, merkez, veya savunmak.

Yaslama değeri metnin her satırını uzatır, böylece hepsi sağ ve sol kenar boşluklarında aynı genişliği kaplar. Bu dört değeri keşfetmek için aşağıdaki örnek kodu kullanın:

<vücut>
<h1>Beni Sola Hizalah1>
<h2> Beni Sağa Hizalah2>
<h3>Beni hizala merkezih3>
<Psınıf="ex4"><güçlü>Beni haklı hizalagüçlü>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam, pulvinar'da, pulvinar felis blandit'te. Vestibulum volutpat tellus diam, sonuç olarak libero rhoncus ut.P>
<P><güçlü>Hizalama yok güçlü>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam, pulvinar'da, pulvinar felis blandit'te. Vestibulum volutpat tellus diam, sonuç olarak libero rhoncus ut.P>
vücut>

Farklı hizalamalar uygulamak için aşağıdaki CSS'yi kullanın:

h1 {
Metin hizalama: sol;
}
h2 {
Metin hizalama: Sağ;
}
h3 {
Metin hizalama: merkez;
}
.ex4{
Metin hizalama: savunmak;
}

Tarayıcıda bu şöyle görünecektir:

4. Metin yönü

bu Metin yönü özelliği metnin yönünü tanımlar. Özellikleri kullanarak yönü tanımlayın rtl (sağdan sola) veya litre (soldan sağa). Bu ikisi, metnin hangi yönde akmasını istediğinizi belirtir.

Örneğin, kullan rtl İbranice veya Arapça gibi sağdan sola yazılan dillerle çalışırken. Kullan litre İngilizce gibi soldan sağa yazılan diller için.

Bunu aşağıdaki kod ile gösterelim:

<vücut>
<div>
<Psınıf="ex1">Bu paragraf sağdan sola gider. Kürsör
 hakkında daha fazla bilgi yazdığınızda sağdan sola doğru hareket eder.
 sayfa.P>
<PİD="ex2">Bu paragraf soldan sağa doğru gider. İmleç hareket eder
 Sayfada daha fazla bilgi yazdığınızda soldan yazmak için!P>
div>
vücut>

Bu eşlik eden CSS ile:

.ex1 {
yön: rtl;
}
#ex2 {
yön: litre;
}

Nihai sonuç şöyle görünecektir:

5. Metin Dekorasyonu

bu metin dekorasyonu özelliği, metin üzerindeki dekoratif çizgilerin görünümünü ayarlar. kısaltması metin-dekorasyon-çizgisi,metin-dekorasyon-renk,metin-dekorasyon-stili, Ve metin-dekorasyon-kalınlığı mülk. Özelliğin bağlantıları olan öğelerde olmasını istemiyorsanız, şunu kullanın: metin dekorasyonu: yok;

Normal metnin altını çizmekten kaçınmalısınız, çünkü bu stil genellikle bir bağlantıyı gösterir. Aşağıdaki şekilde koddaki bazı örnekler gösterilmektedir:

<vücut>
<h1>Üst çizgili metin süslemesih1>
<h2>Satır arası metin süslemesih2>
<h3>Altı çizili metin süslemesih3>
<Psınıf="eski">Üst çizgi ve altı çizgili metin dekorasyonu.P>
<P><Ahref="varsayılan.asp">bu bir bağlantıA>P>
vücut>

Bu CSS ile çeşitli dekorasyon efektleri uygulayabilirsiniz:

h1 {
metin dekorasyonu: üst çizgi;
}
h2 {
metin dekorasyonu: hat boyunca;
}
h3 {
metin dekorasyonu: altını çizmek;
}
P.eski {
metin dekorasyonu: üst çizgialtını çizmek;
}
A {
metin dekorasyonu: hiçbiri;
}

Ve bunun gibi bir şey gösterecekler:

6. Metin Dönüşümü

bu metin dönüşümü özelliği, harflerin görüneceği büyük/küçük harf türünü belirtir. Bu büyük veya küçük harflerle olabilir. Her kelimenin ilk harfini büyük yapmak için de kullanabilirsiniz:

Aşağıdaki örnek, kodda nasıl yapılacağını gösterir:

<vücut>
<h1>Metin dönüştürme özelliğine örneklerh1>
<Psınıf="büyük harf">Bu cümle büyük harfle yazılmıştır.P>
<Psınıf="küçük harf">Bu cümle küçük harfle yazılmıştır.P>
<Psınıf="büyük harfle">Bu metni büyük harfle yaz.P>
vücut>

CSS dosyası:

P.büyük harf {
metin dönüşümü: büyük harf;
}
P.küçük harf {
metin dönüşümü: küçük harf;
}
P.büyük harf yap {
metin dönüşümü: büyük harfle yazmak;
}

Aşağıdaki sonuçla:

7. Harf boşluğu

bu harf boşluğu özelliği, metindeki harfler arasındaki boşluğu belirtir. Aşağıdaki örnek, farklı boşluk stillerinin nasıl belirleneceğini göstermektedir.

<vücut>
<h1>Harf aralığı örneklerih1>
<h2>bu 1. başlıkh2>
<h3>bu 2. başlıkh3>
vücut>

CSS dosyanızda pikselleri veya diğer ölçü birimlerini kullanın:

h2 {
harf boşluğu: 7piksel;
}
h3 {
harf boşluğu: -2 piksel;
}

Ve ortaya çıkan metin uzatılacak veya sıkıştırılacaktır:

8. Kelime Boşluğu

bu kelime aralığı özellik, bir metindeki kelimeler arasındaki boşluğu belirtir. Tarayıcıların sözcükler arasındaki boşluk için standart bir uzunluğu vardır, ancak siz kendinizinkini ayarlayabilirsiniz. Aşağıdaki örnek, sözcükler arasındaki boşluğun nasıl artırılacağını veya azaltılacağını göstermektedir:

<vücut>
<h1>Kelime Aralığı Özelliğine Örneklerh1>
<P>Normal kelime aralığı.P>
<Psınıf="ex1">Büyük kelime aralığı.P>
<Psınıf="ex2">Küçük kelime aralığı.P>
vücut>

Bu CSS'yi kullanarak:

P.ex1 {
kelime aralığı: 1rem;
}
P.ex2 {
kelime aralığı: -0.3rem;
}

Kelime aralığının etkisini açıkça görebilirsiniz:

9. Satır yüksekliği

bu satır yüksekliği özelliği, bir paragraftaki satırlar arasındaki boşluğu belirtir. Çoğu tarayıcıdaki standart ve varsayılan satır yüksekliği yaklaşık %110 ila %120'dir. Aşağıdaki kod, nasıl değiştirileceğini gösterir:

<vücut>
<h1>Satır yüksekliğini kullanmah1>
<P>
 Standart hat yüksekliği.
 Standart hat yüksekliği.
P>
<Psınıf="küçük">
 Küçük küçük hat yüksekliği.
 Küçük satır yüksekliği
P>
<Psınıf="büyük">
 Daha büyük satır yüksekliği.
 Daha büyük satır yüksekliği.
P>
vücut>

Aşağıdaki CSS'yi kullanarak:

P.küçük {
satır yüksekliği: 0.7;
}
P.büyük {
satır yüksekliği: 1.8;
}

Sonuçları her paragraftaki her satır arasında görebilirsiniz:

10. Metin gölgesi

bu Metin gölgesi özelliği metne gölge uygular. Yatay gölgeyi ve dikey gölgeyi belirtmeniz gerekir. Metin gölgesi renk ve bulanıklık yarıçapı içerebilir. Bunu aşağıdaki kodla gösterelim:

<vücut>
 <h1>örneklerile ilgiliMetin gölgesietki.h1>
 <h1sınıf="eski1">Metin gölgesiilerenkh1>
 <h1sınıf="eski2">Metin gölgesiilebulanıklıketki.h1>
vücut>

Bu CSS ile:

h1 {
 metin gölgesi: 2px 2px;
}
.ex1 {
 metin gölgesi: 2px 2px turuncu;
}
.ex2 {
 metin gölgesi: 2px 2px 10px kırmızı;
}

Bazı olağandışı ve ilginç etkiler üretecektir:

Neden CSS Metin Stili Özelliklerini Öğrenelim?

CSS, modern web tasarımının bel kemiğidir. İster vanilya biçiminde ister çerçevelerde olsun, CSS özelliklerinin temel işlevi aynıdır. Metin biçimlendirme özelliklerine hakim olmak, çekici ve okunabilir kullanıcı arabirimleri oluşturmanıza olanak tanır.

CSS'nin en son sürümü olan CSS3, animasyonlardan çok sütunlu mizanpajlara kadar yeni kavramlar sunar. Bu kavramlar, profesyonel uygulamalar ve belgeler oluşturmayı kolaylaştırır.