Örnekleriyle Birlikte CSS Yazı Formatları

Kategori: CSS

Blog Gönderisi Resmi

Hizmetlerimiz hakkında bilgi almak için tıklayın.

CSS (Cascading Style Sheets) bir web sayfasının tasarımını belirleyen ve HTML (Hyper Text Markup Language) etiketlerinde yazılmış olan içeriklerin nasıl görüneceğini tanımlayan bir stylesheet dildir. CSS, web sayfalarının profesyonel görünmesi ve tasarımının özelleştirilmesi için kullanılan birçok araca sahiptir. CSS kullanarak yazıların renkleri, hizalamaları, fontları vb. düzenlenebilir. İşte bazı popüler CSS yazı formatları ve özellikleri.

color Özelliği

Bu özellik, metnin rengini belirler. Color özelliğinin alabileceği değerler:

  1. Hexadecimal değerler (#000000 ile #ffffff arası)
  2. Mobile RGB değerleri (rgb(255, 255, 255))
  3. İsim değerler (red, blue, green vb.)

Örnek:


<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: blue;
}

h1 {
  color: green;
}
</style>
</head>
<body>

<h1>Bu bir başlıktır.</h1>
<p>Bu sıradan bir paragraf. Bu metnin mavi olduğuna dikkat edin.
 Bir sayfa için varsayılan metin rengi, gövde seçicide tanımlanır.</p>
 <p>Bir diğer paragraf.</p>

 </body>
 </html>

Görünüm:

Bu bir başlıktır.

Bu sıradan bir paragraf. Bu metnin mavi olduğuna dikkat edin. Bir sayfa için varsayılan metin rengi, gövde seçicide tanımlanır.

Bir diğer paragraf.

Yazı rengi ve Arkaplan Rengi

Bu örnekte, hem background-color özelliğini hem de color özelliğini tanımlıyoruz:

Örnek:


<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

div {
  background-color: blue;
  color: white;
}
</style>
</head>
<body>

<h1>Bu bir başlık.</h1>
<p>Bu bir gri arkaplana ve mavi renk bir metine sahip yazı.</p>
<div>Bu bir div.</div>

</body>
</html>

Görünüm:

Bu bir başlık.

Bu bir gri arkaplana ve mavi renk bir metine sahip yazı.

Bu bir div.

text-align

Bu özellik, belirtilen div ya da elementin içindeki yazının hizalanmasını belirler.
Text-align özelliğinin alabileceği değerler:

  1. Left (sola hizalanır.)
  2. Right (sağa hizalanır.)
  3. Center (ortaya hizalanır.)
  4. Justify (kelimeler eşit aralıklarla dağılır.)

Aşağıdaki örnek ortaya hizalanmış ve sola ve sağa hizalanmış metni gösterir (metin yönü soldan sağa ise sola hizalama varsayılandır ve metin yönü sağdan sola ise sağa hizalama varsayılandır):

Örnek:


<style>
h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}
</style>
<h1>Başlık 1 (center)</h1>
<h2>Başlık 2 (left)</h2>
<h3>Başlık 3 (right)</h3>

<p>Yukarıdaki üç başlık ortaya, sola ve sağa hizalanmıştır.</p>

Görünüm:

Başlık 1 (center)

Başlık 2 (left)

Başlık 3 (right)

text-align özelliği "justify" olarak ayarlandığında, her satır uzatılır, böylece her satır eşit genişliğe sahip olur ve sol ve sağ kenar boşlukları düz olur (dergi ve gazetelerdeki gibi):

Örnek:


<style>
div {
  border: 1px solid black;
  padding: 10px;
  width: 200px;
  height: 200px;
  text-align: justify;
}
</style>
<div>
Bu bir css örneğinde text-align:justify kullanılan bir örnekleme kodlamasıdır.
</div>

Görünüm:

Bu bir css örneğinde text-align:justify kullanılan bir örnekleme kodlamasıdır.

text-align-last

text-align-last özelliği, bir metnin son satırının nasıl hizalanacağını belirtir.

Örnek:


<style>
p.a {
  text-align-last: right;
}

p.b {
  text-align-last: center;
}
</style>
<h2>text-align-last: right:</h2>
<p class="a">enesalp.com.tr bir web tasarım, seo hizmetleri, reklam hizmetleri, sosyal medya hizmetleri,
yazılım ve programlama hizmetleri hakkında hizmet veren bir websitesidir. Ayrıca blog bölümünde ise dersler
bulunmaktadır, dersler ücretsizdir.</p>

<h2>text-align-last: center:</h2>
<p class="b">enesalp.com.tr bir web tasarım, seo hizmetleri, reklam hizmetleri, sosyal medya hizmetleri, 
yazılım ve programlama hizmetleri hakkında hizmet veren bir websitesidir. Ayrıca blog bölümünde ise dersler
bulunmaktadır, dersler ücretsizdir.</p>

Görünüm:

text-align-last: right:

enesalp.com.tr bir web tasarım, seo hizmetleri, reklam hizmetleri, sosyal medya hizmetleri, yazılım ve programlama hizmetleri hakkında hizmet veren bir websitesidir. Ayrıca blog bölümünde ise dersler bulunmaktadır,
dersler ücretsizdir.


text-align-last: center:

enesalp.com.tr bir web tasarım, seo hizmetleri, reklam hizmetleri, sosyal medya hizmetleri, yazılım ve programlama hizmetleri hakkında hizmet veren bir websitesidir. Ayrıca blog bölümünde ise dersler bulunmaktadır,
dersler ücretsizdir.

direction

direction ve unicode-bidi özellikleri, bir öğenin metin yönünü değiştirmek için kullanılabilir:


 <style>
p.dr1 {
  direction: rtl;
  unicode-bidi: bidi-override;
}
</style>
<p>Bu normal varsayılan metin yönüdür.</p>

<p class="dr1">Bu, sağdan sola metin yönüdür.</p>

Görünüm:

Bu normal varsayılan metin yönüdür.

Bu, sağdan sola metin yönüdür.

text-decoration

Bu özellik, metinde çizgi, altı çizili, üstü çizili gibi dekorasyon özellikleri eklemek için kullanılır. text-decoration özelliğinin alabileceği değerler:

  1. None (dekorasyon özelliği yok)
  2. Underline (altı çizili)
  3. Overline (üstü çizili)
  4. Line-through (orta çizili)
  5. Underline overline (metnin altı ve üstü çizili)

Örnek:


<style>
p.txt1{
    text-decoration:none;
}
p.txt2{
    text-decoration:underline;
}
p.txt3{
    text-decoration:overline;
}
p.txt4{
    text-decoration:line-through;
}
p.txt5{
    text-decoration:underline overline;
}
</style>
<h1>text-decoration:none örneği</h1>
<p class="txt1">Bu bir örnektir.</p>

<h1>text-decoration:underline örneği</h1>
<p class="txt2">Bu bir örnektir.<


<h1>text-decoration:overline örneği</h1>
<p class="txt3">Bu bir örnektir.</p>

<h1>text-decoration:line-through örneği</h1>
<p class="txt4">Bu bir örnektir.</p>

<h1>text-decoration:underline overline örneği</h1>
<p class="txt5">Bu bir örnektir.</p>

Görünüm:

text-decoration:none örneği

Bu bir örnektir.

text-decoration:underline örneği

Bu bir örnektir.

text-decoration:overline örneği

Bu bir örnektir.

text-decoration:line-through örneği

Bu bir örnektir.

text-decoration:underline overline örneği

Bu bir örnektir.

text-decoration-line

text-decoration-line özelliği, metne bir dekorasyon satırı eklemek için kullanılır.

İpucu:Metnin hem üzerinde hem de altında çizgileri görüntülemek için üst çizgi ve altı çizgi gibi birden fazla değeri birleştirebilirsiniz.

İpucu:Bağlantı olmayan metinlerin altının çizilmesi genellikle okuyucunun kafasını karıştırdığından önerilmez.

Örnek:


<style>
p.txt6{
    text-decoration-line:none;
}
p.txt7{
    text-decoration-line:underline;
}
p.txt8{
    text-decoration-line:overline;
}
p.txt9{
    text-decoration-line:line-through;
}
p.txt10{
    text-decoration-line:underline overline;
}
</style>
<h1>text-decoration:none örneği</h1>
<p class="txt6">Bu bir örnektir.</p>

<h1>text-decoration:underline örneği</h1>
<p class="txt7">Bu bir örnektir.</p>

<h1>text-decoration:overline örneği</h1>
<p class="txt8">Bu bir örnektir.</p>

<h1>text-decoration:line-through örneği</h1>
<p class="txt9">Bu bir örnektir.</p>

<h1>text-decoration:underline overline örneği</h1>
<p class="txt10">Bu bir örnektir.</p>

Görünüm:

text-decoration:none örneği

Bu bir örnektir.

text-decoration:underline örneği

Bu bir örnektir.

text-decoration:overline örneği

Bu bir örnektir.

text-decoration:line-through örneği

Bu bir örnektir.

text-decoration:underline overline örneği

Bu bir örnektir.

text-decoration-color

text-decoration-color özelliği, dekorasyon çizgisinin rengini ayarlamak için kullanılır.

Örnek:


<style>
p.txt11{
    text-decoration-line:none;
    text-decoration-color:red;
}
p.txt12{
    text-decoration-line:underline;
    text-decoration-color:blue;
}
p.txt13{
    text-decoration-line:overline;
    text-decoration-color:green;
}
p.txt14{
    text-decoration-line:line-through;
    text-decoration-color:purple;
}
p.txt15{
    text-decoration-line:underline overline;
    text-decoration-color:brown;
}
</style>
<p class="txt11">Bu bir örnektir.</p>

<p class="txt12">Bu bir örnektir.</p>

<p class="txt13">Bu bir örnektir.</p>

<p class="txt14">Bu bir örnektir.</p>

<p class="txt15">Bu bir örnektir.</p>

Görünüm:

Bu bir örnektir.

Bu bir örnektir.

Bu bir örnektir.

Bu bir örnektir.

Bu bir örnektir.

text-decoration-style

text-decoration-style özelliği, dekorasyon çizgisinin stilini ayarlamak için kullanılır.

Örnek:


<style>
p.txt16{
    text-decoration-line:none;
    text-decoration-style: solid; //Bu varsayılandır.\\
}
p.txt17{
    text-decoration-line:underline;
    text-decoration-style: double;
}
p.txt18{
    text-decoration-line:overline;
    text-decoration-style: dotted;  
}
p.txt19{
    text-decoration-line:line-through;
    text-decoration-style: dashed;  
}
p.txt20{
    text-decoration-line:underline overline;
    text-decoration-style: wavy;  
}
p.txt21{
    text-decoration-line:underline overline;
    text-decoration-style: wavy;
    text-decoration-color:red;
}
</style>
<p class="txt16">Bu bir örnektir.</p>

<p class="txt17">Bu bir örnektir.</p>

<p class="txt18">Bu bir örnektir.</p>

<p class="txt19">Bu bir örnektir.</p>

<p class="txt20">Bu bir örnektir.</p>

<p class="txt21">Bu bir örnektir.</p>

Görünüm:

Bu bir örnektir.

Bu bir örnektir.

Bu bir örnektir.

Bu bir örnektir.

Bu bir örnektir.

Bu bir örnektir.

text-decoration-thickness

text-decoration-thickness özelliği, dekorasyon çizgisinin kalınlığını ayarlamak için kullanılır.

Örnek:


 <style>
p.txt22{
    text-decoration-line:underline;
    text-decoration-thickness: auto; //Bu varsayılandır.\\
}
p.txt23{
    text-decoration-line:underline;
    text-decoration-thickness: 5px;
}
p.txt24{
    text-decoration-line:underline;
    text-decoration-thickness: 25%;
}
p.txt25{
  text-decoration-line: underline;
  text-decoration-color: red;  
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}
</style>
<p class="txt22">Bu bir örnektir.</p>

<p class="txt23">Bu bir örnektir.</p>

<p class="txt24">Bu bir örnektir.</p>

<p class="txt25">Bu bir örnektir.</p>

Görünüm:

Bu bir örnektir.

Bu bir örnektir.

Bu bir örnektir.

Bu bir örnektir.

Özellikleri bir arada kullanalım;

Örnek:


<style>
p.txt26{
    text-decoration: underline;
}
p.txt27{
    text-decoration: underline red;
}
p.txt28{
    text-decoration: underline red double;
}
p.txt29{
    text-decoration: underline red double 5px;
}
</style>
<p class="txt26">Bu bir örnektir.</p>

<p class="txt27">Bu bir örnektir.</p>

<p class="txt28">Bu bir örnektir.</p>

<p class="txt29">Bu bir örnektir.</p>

Görünüm:

Bu bir örnektir.

Bu bir örnektir.

Bu bir örnektir.

Bu bir örnektir.

text-transform

text-transform özelliği, bir metini tamamen büyük, küçük veya baş harfi büyük şekilde ayarlar.

text-transformözelliğinin alabileceği değerler:

  1. none:hiçbir büyük/küçük harf ayarlaması yapılmaz.
  2. lowercase:metnin tümü küçük harfle yazılır.
  3. uppercase:metnin tümü büyük harfle yazılır.
  4. capitalize:kelimenin ilk harfi büyük, diğer harfler küçük yazılır.

Örnek:


<style>
p.txt30{
    text-transform: none;  // Varsayılanı kullanır.
}
p.txt31{
    text-transform: uppercase; // Metin Tamamen Büyük Harfle Yazılır.
}
p.txt32{
    text-transform: lowercase; // Metin Tamamen Küçük Harfle Yazılır.
}
p.txt33{
    text-transform: capitalize; // Metnin Baş Harfleri Hariç Tamamı Küçüktür.
}
</style>
<p class="txt30">Bu bir örnektir.</p>

<p class="txt31">Bu bir örnektir.</p>

<p class="txt32">Bu bir örnektir.</p>

<p class="txt33">Bu bir örnektir.</p>

Görünüm:

Bu bir örnektir.

Bu bir örnektir.

Bu bir örnektir.

Bu bir örnektir.

Yazı Boşlukları

text-indent

text-indent özelliği, bir metnin ilk satırının girintisini belirtmek için kullanılır:

Örnek:


<style>
p.txt34{
    text-indent: 50px;
}
</style>
<p class="txt34">enesalp.com.tr bir web tasarım, 
seo hizmetleri, reklam hizmetleri,sosyal medya hizmetleri, yazılım ve
 programlama hizmetleri hakkında hizmet veren bir websitesidir.
 Ayrıca blog bölümünde ise dersler bulunmaktadır, dersler ücretsizdir.</p>

Görünüm:

enesalp.com.tr bir web tasarım, seo hizmetleri, reklam hizmetleri,sosyal medya hizmetleri, yazılım ve programlama hizmetleri hakkında hizmet veren bir websitesidir. Ayrıca blog bölümünde ise dersler bulunmaktadır, dersler ücretsizdir.

letter-spacing

letter-spacing özelliği, bir metindeki karakterler arasındaki boşluğu belirtmek için kullanılır.

Aşağıdaki örnek, karakterler arasındaki boşluğun nasıl artırılacağını veya azaltılacağını gösterir:

Örnek:


 <style>
p.txt35{
    letter-spacing: 5px;
}
p.txt36{
    letter-spacing: -2px;
}
</style>
<p class="txt35">Bu bir örnektir</p>
<p class="txt36">Bu bir örnektir</p>

Görünüm:

Bu bir örnektir

Bu bir örnektir

line-height

line-height özelliği, satırlar arasındaki boşluğu belirtmek için kullanılır:

Örnek:


<style>
p.txt37{
    line-height: 0.7;
}
p.txt38{
    line-height: 1.8;
}
</style>

<p class="txt37">Bu paragraf, metinler arasında küçük boşluğu verir. <br>
Bu paragraf, metinler arasında küçük boşluğu verir. </p>

<p class="txt38">Bu paragraf, metinler arasında büyük boşluğu verir. <br>
Bu paragraf, metinler arasında büyük boşluğu verir.</p>

Görünüm:

Bu paragraf, metinler arasında küçük boşluğu verir.
Bu paragraf, metinler arasında küçük boşluğu verir.

Bu paragraf, metinler arasında büyük boşluğu verir.
Bu paragraf, metinler arasında büyük boşluğu verir.

text-shadow

text-shadow özelliği, metnin gölgesini oluşturmak için kullanılır. Text-shadow özelliğinin alabileceği değerler:

  1. X offset: gölgenin yatay uzaklığı
  2. Y offset: gölgenin dikey uzaklığı
  3. Blur: gölgenin bulanıklığı
  4. Shadow color: gölgenin rengi

Örnek:


 <style>
p.txt39{
    text-shadow: 2px 2px 2px #000000; 
}
p.txt40{
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
<p class="txt39">Bu bir örnektir</p>
<p class="txt40">Bu bir örnektir</p>

Görünüm:

Bu bir örnektir

Bu bir örnektir

Bu bölümde neler öğrendik?

  1. color:Metnin rengini belirtir.
  2. background-color: Metnin arkaplan rengini belirtir.
  3. text-align: Metnin hizalanmasını sağlar.
  4. text-align-last: Bir metnin son satırının nasıl hizalanacağını belirtir
  5. direction: Metin yönünü/yazma yönünü belirtir
  6. unicode-bidi: Aynı belgede birden çok dili desteklemek için metnin geçersiz kılınıp kılınmayacağını ayarlamak veya döndürmek için direction özelliğiyle birlikte kullanılır
  7. text-decoration: metinde çizgi, altı çizili, üstü çizili gibi dekorasyon özellikleri eklemek için kullanılır.
  8. text-decoration-line:text-decoration-line özelliği, metne bir dekorasyon satırı eklemek için kullanılır.
  9. text-decoration-color: metnin çizgilerinin renklerini belirler.
  10. text-decoration-style: dekorasyon çizgisinin stilini ayarlamak için kullanılır.
  11. text-decoration-thickness: dekorasyon çizgisinin kalınlığını ayarlamak için kullanılır.
  12. text-transform: özelliği, bir metindeki büyük ve küçük harfleri belirtmek için kullanılır.
  13. text-indent: özelliği, bir metnin girintisinin boşluğunu belirtmek için kullanılır.
  14. letter-spacing: özelliği, metnin karakterleri arasındaki boşluğu belirtmek için kullanılır.
  15. line-height: özelliği, metnin satırlar arasındaki boşluğunu belirtmek için kullanılır.
  16. text-shadow: özelliği, metnin gölgesini oluşturmak için kullanılır.

Diğer bölümlerde görüşmek dileğiyle!

Sizin İçin Önerdiklerimiz

Blog Resim
Responsive Web Tasarımı ve CSS’in Rolü

CSS

Responsive web tasarımı, web sayfalarının herhangi bir cihazda, herhangi bir boyutta ve herhangi bir oryantasyonda ideal olarak görüntülenebilmesini ..

Devamını Oku
Blog Resim
CSS’de Flexbox Nedir ve Nasıl Kullanılır?

CSS

Günümüz web dünyasında, CSS (Cascading Style Sheets) kullanılarak birçok farklı web sayfası tasarımı oluşturulmaktadır. Inline, block ve float..

Devamını Oku
Blog Resim
Örnekleriyle Birlikte CSS Kutu Modelleri

CSS

CSS kutu modelleri, web sayfalarının temel bileşenlerinden biridir. Kutu modelleri, her HTML öğesinin içeriğini, kenar boşluklarını, çerçevelerini ve ..

Devamını Oku
Blog Resim
CSS Örnekleri: Tasarım ve SEO için En İyi Uygulamalar

CSS

Günümüzde bir web sitesinin başarısı, içeriği kadar tasarımı ve kullanıcı dostu olmasıyla da ölçülmektedir. Bu nedenle, birçok web sitesi sahibi ve geliştiricisi..

Devamını Oku

EA Medya

"Teknoloji ve Tasarımın Buluştuğu Noktada, Yaratıcı Çözümler"

Sözleşmeler

Kullanım Koşulları Gizlilik Politikası Çerez Politikası İletişim

Abone Ol

Adres

İstanbul +90 542 386 31 11 info@enesalp.com.tr