Durum
Üzgünüz bu konu cevaplar için kapatılmıştır...
Griffin Premium
Katılım
3 Mar 2017
Mesajlar
1,378
Çözümler
1
Tepki puanı
995
Ödüller
11
Sosyal
7 HİZMET YILI
web tasarımı, css color özelliği, css dersleri, css örnekleri, css yazı biçimlendirme
:yazı:
html sayfalarına eklenilen metinlere CSS kullanarak biçimlendirme uygulanabilir. Bu yazımızda CSS ile sayfalarınıza eklediğiniz metinlere ne tür biçimler verebileceğinizi göreceksiniz.

color:
color” özelliği kullanılarak sayfalarınıza eklediğiniz yazıları renklendirebilirsiniz. Bir sayfanın varsayılan metin rengini değiştirmek için color özelliği body etiketine uygulanmalıdır. Aşağıdaki örnekte sayfaya eklenmiş olan başlık ve paragrafın renklendirilmesini göreceksiniz.

Kodlar:

CSS:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>memoryhackers.org</title>
        <style>
            h1{
                color: red;
            }
            p{
                color: blue
            }
        </style>
    </head>
    <body>
        <h1>CSS ile Metni Renklendirme</h1>
        <p>color Özelliği metne rengini vermek için kullanılır. Bu özellik bir renk değeri kabul eder. Birçok farklı formatta, onaltılık değerleri ve RGB, RGBa, HSL ve HSLa değerlerini içerir. En fazla kontrolü en az çaba sarf ettikleri için onaltılık değerler en yaygın olanlardır.</p>
  
    </body>
</html>

:resim:

Ekran Alıntısı.PNG


text-align :


Sayfaya eklenen metnin yatayda hizalanması amacıyla kullanılır. text-align özelliği aşağıdaki değerleri alabilir.​
  • center : Ortala​
  • left : Sola hizala​
  • right : Sağa hizala​
  • justify : Her iki yana yasla​
  • inherit : Üst kapsayıcıdan devral.​
Aşağıdaki örnekte sayfaya eklenen dört paragrafa yukarıdaki özelliklerin uygulanması görülmektedir.

Kodlar:

CSS:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>memoryhackers.org</title>
        <style>
            #p1{
                text-align: center;
                color: rebeccapurple;
            }
            #p2{
                text-align: left;
                color: red;
            }
            #p3{
                text-align: right;
                color: royalblue;
            }
            #p4{
                text-align: justify;
            }
        </style>
    </head>
    <body>
        <p id="p1">Bu metin ortalanmıştır.</p>
        <p id="p2">Bu metin sola hizalanmıştır.</p>
        <p id="p3">Bu metin sağa hizalanmıştır.</p>
        <p id="p4">Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. </p>
    
    </body>
</html>

:resim:

Ekran Alıntısı2.PNG






 

Ekli dosyalar

  • Ekran Alıntısı.PNG
    Ekran Alıntısı.PNG
    10.6 KB · Görüntüleme: 37
Son düzenleme:
Önce hayaller ölür, sonra insan.
Uzman Üye
Katılım
26 Mar 2018
Mesajlar
286
Tepki puanı
709
Yaş
25
6 HİZMET YILI
Yararlı Konu Bilmeyenler İçin.
 
Durum
Üzgünüz bu konu cevaplar için kapatılmıştır...
Üst
  AdBlock Detected
Elbette, reklam engelleme yazılımı, reklamları engelleme konusunda harika bir iş çıkarır, ancak aynı zamanda web sitemizin bazı yararlı ve önemli özelliklerini de engeller. Mümkün olan en iyi site deneyimi için lütfen bir dakikanızı ayırarak AdBlocker'ınızı devre dışı bırakın.