En son web geliştirme öğreticiler
×

CSS Eğitimi

CSS EV CSS Giriş CSS Sözdizimi CSS Nasıl CSS Renkler CSS Arka CSS Kenarlıklar CSS Kenar boşlukları CSS Dolgu malzemesi CSS Yükseklik genişlik CSS Metin CSS Yazı CSS Bağlantılar CSS Listeler CSS Tablolar CSS Kutu Modeli CSS Özeti CSS Gösterimi CSS Maksimum genişlik CSS Konumu CSS şamandıra CSS Inline-block CSS hizalama CSS combinators CSS Sözde sınıf CSS Sözde elemanı CSS Gezinti çubuğu CSS Açılır menülerde CSS Araç ipuçları CSS Resim Galerisi CSS Görüntüdeki Opaklık CSS Görüntü Spritleri CSS Attr Seçicileri CSS Formları CSS Sayaçlar

CSS3

CSS3 Giriş CSS3 Yuvarlatılmış köşeler CSS3 Sınır Resimleri CSS3 Arka CSS3 Renkler CSS3 Renk Geçişleri CSS3 Gölgeler CSS3 Metin CSS3 Yazı CSS3 2D Dönüşümler CSS3 3D Dönüşümler CSS3 Geçişler CSS3 Animasyonlar CSS3 Görüntüler CSS3 Düğmeler CSS3 sayfalara numara koyma CSS3 Birden Çok Sütun CSS3 Kullanıcı arayüzü CSS3 Kutu Boyutlandırma CSS3 Flexbox CSS3 Medya Sorguları CSS3 MQ Örnekleri

CSS Duyarlı Web Tasarımı

Duyarlı Web Tasarımı giriş Duyarlı Web Tasarımı Görünüm Duyarlı Web Tasarımı Izgara Görünümü Duyarlı Web Tasarımı Medya Sorguları Duyarlı Web Tasarımı Görüntüler Duyarlı Web Tasarımı Videolar Duyarlı Web Tasarımı çerçeveler

CSS Examples

CSS Örnekler CSS bilgi yarışması CSS sertifika

CSS References

CSS Referans CSS Seçiciler CSS Fonksiyonlar CSS Referans Resmi CSS Web Safe Yazı CSS canlandırılabilir CSS Birimler CSS PX-EM Dönüştürücü CSS Renkler CSS Renk Değerleri CSS Renkli İsimler CSS3 Tarayıcı Desteği

 

CSS Metin


metin biçimlendirme

Bu metin, metin biçimlendirme özelliklerinden bazıları ile dekore edilmiştir. Başlığı kullanan text-align, text-transform ve color özelliklerini. paragraf hizalanmış, girintili edilir ve karakterler arasında boşluk belirtilir. Altı çizili bu renkli kaldırılır "it Yourself deneyin" bağlantısını tıklayın.


Metin Rengi

color özelliği metnin rengini ayarlamak için kullanılır.

CSS ile, bir renk genellikle belirtilir:

  • gibi - bir renk adı "red"
  • gibi - bir HEX değeri "#ff0000"
  • gibi - bir RGB değeri " rgb(255,0,0) "

Bak CSS Renk Değerleri olası renk değerlerinin tam listesi için.

Bir sayfa için varsayılan metin rengi vücut seçicisi tanımlanmıştır.

Örnek

body {
    color: blue;
}

h1 {
    color: green;
}
Kendin dene "

Note: For W3C CSS: Eğer tanımlarsanız color özelliğini, ayrıca tanımlamak gerekir background-color özelliği.


Metin Hizalama

text-align tesisinde metnin yatay hizalama ayarlamak için kullanılır.

Bir metin sola veya sağa, hizalanmış merkezli veya haklı görülebilir.

Aşağıdaki örnek, merkezi hizalanır, ve sol ve sağ hizalanmış metni (yönü soldan sağa da sola hizalama varsayılan ve metin yönü sağdan sola doğru ise hizalama varsayılan) gösterir:

Örnek

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}
Kendin dene "

Ne zaman text-align özelliği ayarlandığında "justify" , her satırı her satır eşit genişliğe sahiptir ve sol ve sağ kenar boşluklarını düz olacak şekilde gerilir (like in magazines and newspapers) :

Örnek

div {
    text-align: justify;
}
Kendin dene "

Metin Dekorasyon

text-decoration özelliği ayarlamak veya metinden süslemeleri kaldırmak için kullanılır.

Değeri text-decoration: none; genellikle bağlantılardan alt çizgi kaldırmak için kullanılır:

Örnek

a {
    text-decoration: none;
}
Kendin dene "

Diğer text-decoration değerleri metin süslemek için kullanılır:

Örnek

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}
Kendin dene "

Note: genellikle okuyucu karıştırır gibi bir bağlantı olmadığı metnin altını çizmek için tavsiye edilmez.


Metin Dönüşüm

text-transform tesiste metinde büyük ve küçük harf belirtmek için kullanılır.

Büyük veya küçük harfler her şeyi açmak, ya da her kelimenin ilk harfini büyük kullanılabilir:

Örnek

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}
Kendin dene "

Metin Girinti

text-indent tesiste metnin ilk satırının girinti belirtmek için kullanılır:

Örnek

p {
    text-indent: 50px;
}
Kendin dene "

Harf boşluğu

letter-spacing tesiste metinde karakterler arasındaki boşluğu belirtmek için kullanılır.

Aşağıdaki örnek artırmak veya karakterler arasındaki boşluğu azaltmak için gösterilmiştir:

Örnek

h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}
Kendin dene "

Satır yüksekliği

line-height özelliği çizgileri arasındaki alanı belirtmek için kullanılır:

Örnek

p.small {
    line-height: 0.8;
}

p.big {
    line-height: 1.8;
}
Kendin dene "

Metin yönü

direction nitelik bir elemanın metin yönünü değiştirmek için kullanılır:

Örnek

div {
    direction: rtl;
}
Kendin dene "

sözcük Aralığı

word-spacing tesiste metinde sözcükler arasında boşluğu belirtmek için kullanılır.

Aşağıdaki örnek artırmak veya kelimeler arasında boşluk azaltmak için gösterilmiştir:

Örnek

h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}
Kendin dene "

Örnekler

Diğer Örnekler

Bir elemanın içindeki metin sarma devre dışı bırakın
Bu örnek, bir öğenin içinde metin kaydırma devre dışı bırakmak için nasıl kullanılacağını gösterir.

Bir resmin dikey hizalama
Bu örnek, bir metinde bir resmin dikey hizalama ayarlama gösterilmiştir.

Metne gölge ekle
Bu örnek metne gölge eklemek gösterilmiştir.


Egzersizleri ile Yourself test edin!

Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 »


Tüm CSS Metin Özellikleri

özellik Açıklama
color Metnin rengini ayarlar
direction Metin yönü / yazma yönünü belirler
letter-spacing Artırır veya bir metinde karakterler arasındaki boşluğu azaltır
line-height Satır yüksekliğini ayarlar
text-align Metnin yatay hizalamasını belirtir
text-decoration dekorasyon metne eklenen belirtir
text-indent Bir metin bloğundaki ilk satırının girinti belirtir
text-shadow Metne eklenen gölge efekti belirtir
text-transform metnin büyük harf Kontrolleri
unicode-bidi Ile birlikte kullanılır yönü ayarlamak veya metin aynı belgede birden fazla dili destekleyecek şekilde geçersiz gerekip gerekmediğini dönmek için mülk
vertical-align Bir elemanın dikey hizalamasını ayarlar
white-space Bir elemanın içindeki beyaz boşluk nasıl işleneceğini belirtir
word-spacing Artırır veya bir metinde kelimelerin arasında boşluk azalır