Hazır Site Kodları Web Siteniz İçin Hazır Site Kodları

  • Onur YURT
  • iletisim@hazirsitekodlari.com
  • 57

    Makale

  • 3

    Yorum

  • 8

    Kategori

Webmaster adına tüm bilgi ve paylaşım platformudur.

Senin Kodun

Ana Sayfa / Css / CSS Zemin Özellikleri Ders#4

Css | 13 Mayıs 2020 | 0 | 161
CSS Zemin Özellikleri Ders#4

CSS zemin özellikleri, bir elemanın zemin özel tanımlamak için kullanılır.

Bu özellikler;

  • Zemin rengi,
  • Zemin görseli,
  • Zemin tekrarı,
  • Zemin ekleri,
  • Zemin pozisyonu’dur.

Zemin rengi

Bir elemanın zemininin rengini belirler. Sayfanın zemin rengi, body kısmında tanımlanır.

body {

    background-color: #c0d5fe;

}

CSS ile zemin rengi aşağıdaki biçimlerden biriyle belirlenir:

  • Bir HEX değeri: “#de0420”
  • Bir RGB değeri: “rgb(100,50,220)”
  • Bir renk adı: red, blue vb.

 

h1 {
    background-color: #6005fd;
}

p {
    background-color: #e23fde;
}

div {
    background-color: #cdef00;
}

Başka bir örneğe bakalım:

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background-color: #c2c5ff;
            }
        </style>
    </head>

    <body>
        <h1>CSS SAYFASI</h1>
        <p>GELCEGI YAZANLAR</p>
    </body>

</html>

Zemin resmi

Zemin resmi özelliği, elemanın zeminini oluşturacak görseli belirler. Normal olarak görsel zeminde tekrarlanır yani tüm zemini kaplar. Zemin resmi aşağıdaki gibi atanır:

body {
    background-image: url("gy.png");
}
<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background: #ff0ccc url("https://seninkodun.com/resim/arkaplan.png") no-repeat left top;
                padding-right: 150px;
            }
        </style>
    </head>

    <body>
        <h1>TURKIYE CUMHURIYETI</h1>
        <p>ISTANBUL</p>
        <p>ANKARA</p>
    </body>

</html>

No-repeat özelliği kaldırılınca zemin resmi sayfa boyunca tekrarlanır.

Aşağıdaki kodda no-repeat özelliğinin kaldırılmasını görebilirsiniz:

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background: #ff0ccc url("https://seninkodun.com/resim/arkaplan.png")  left top;
                padding-right: 150px;
            }
        </style>
    </head>

    <body>
       
        <h1>TURKIYE CUMHURIYETI</h1>
        <p>ISTANBUL</p>
        <p>ANKARA</p>
       
    </body>
</html>

Zemin resminin yatay ve dikey tekrarı

Varsayılan olarak zemin resmi özelliği (background-image property) bir görseli sayfa içinde hem yatay hem de dikey olarak tekrarlar. Bazı resimlerin sadece yatay ya da dikey olarak tekrarlanması istenebilir. Eğer zemin resmi yatay olarak tekrarlanacaksa aşağıdaki gibi bir kod yazılmalıdır:

body {
    background-image: url("https://seninkodun.com/resim/arkaplan.png");
    background-repeat: repeat-x;
}

Zemin resminin pozisyonu ve tekrarı

Zemin resmi pozisyonu background-position özelliği ile belirlenir. Aşağıdaki kod örneğinde, zemin resmi arkaplan.png’nin tekrar ve pozisyon örneklerini görebilirsiniz:

body {

    background-image: url("https://seninkodun.com/resim/arkaplan.png");

    background-repeat: no-repeat;

}

 

body {

    background-image: url("https://seninkodun.com/resim/arkaplan.png");

    background-repeat: no-repeat;

    background-position: right top;

}

Zemin kısayol (background shorthand) özelliği

Yukarıda bahsedilen çeşitli özellikleri sadece background sözcüğü ile kısa ve toplu bir şekilde ifade etmek de mümkündür:

body {
    background: #fffeee url("https://seninkodun.com/resim/arkaplan.png") no-repeat left top;
}

Shorthand özelliği kullanıldığı zaman, özellik değerlerinin sırası aşağıdaki gibidir:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

 

Aşağıdaki tabloda zemin özelliklerinin tümü listelenmiştir:

Özellik Açıklama
background Bütün zemin özelliklerini tek bir bildiride gerçekleştirir.
background-attachment Zemin resmi sabit mi yoksa sayfanın diğer kısmında hareket edecek mi bunu belirler.
background-color Bir elemanın zemin rengini belirler.
background-image Bir eleman için zemin resmini belirler.
background-position Zemin resminin başlangıç pozisyonunu belirler.
background-repeat Zemin resminin nasıl tekrarlanacağını belirler.

 

BENZER KONULAR

Css | Kategorisine Ait Yazıların Daha Fazlası...

KONU HAKKINDA (Yorum Yapılmamış) | SENDE YORUM YAP DESTEK OL!

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

BEN KİMİM?

Onur YURT

Web Developer And Coder

Merhaba arkadaşlar Adım Onur YÜRT Bursada doğdum ve yaşıyorum 2009 yılından itibaren web hayatına adım attım ve şuanda bulunduğum sayfayı açtım amaçım sizlere birşeyler öğretmek ve kazandırmak Web tasarım konusunda kendimi yeterince geliştirdiğime inanıyorum bu bilgileri zamanla siz değerli takipçilerime sunmak yeterince bildiğim kodlama diller Css3, Html5, Javascript ve Php dir.

POPULER KONULAR

Hazır Site Kodları Web Siteniz İçin Hazır Site Kodları...