CSS Metin İşlemleri

nightstar

Doğdu, Ölecek.
Süper Üye
Katılım
3 Mar 2017
Mesajlar
544
Beğeniler
102
Yaş
18
Konum
한국
#1
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.net</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.net</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.net. Bu metin iki yana yaslanmıştır. memoryhackers.net. Bu metin iki yana yaslanmıştır. memoryhackers.net. Bu metin iki yana yaslanmıştır. memoryhackers.net. Bu metin iki yana yaslanmıştır. memoryhackers.net. Bu metin iki yana yaslanmıştır. memoryhackers.net. Bu metin iki yana yaslanmıştır. memoryhackers.net. Bu metin iki yana yaslanmıştır. memoryhackers.net. Bu metin iki yana yaslanmıştır. memoryhackers.net. Bu metin iki yana yaslanmıştır. memoryhackers.net. Bu metin iki yana yaslanmıştır. memoryhackers.net. Bu metin iki yana yaslanmıştır. memoryhackers.net. </p>
    
    </body>
</html>
:resim:

Ekran Alıntısı2.PNG






 

Ekli dosyalar

Son düzenleme: