Kurs programı

CSS ileri düzey eğitim

• CSS Dış Kitap
• CSS Tanıtımı
• CSS Temel Gramer
• CSS İleri Gramer
• CSS Türev Seçiciler
• CSS id Seçicisi
• CSS Sınıf Seçicisi
• CSS Oluşturma
• CSS Arka Plan
• CSS Metin
• CSS Yazı Tipi
• CSS Listeler

CSS çerçeve modeli

• CSS Çerçeve Modeli Özeti
• CSS İç Kenar Boşluğu
• CSS Kenarlık
• CSS Kenar Boşluğu
• CSS Kenar Boşluğu Birleşimi

CSS konumlandırma

• CSS Konum Özeti
• CSS Göreceli Konum
• CSS Mutlak Konum
• CSS Yüzeysel Konum

CSS seçicileri

• CSS Element Seçicisi
• CSS Seçici Gruplama
• CSS Sınıf Seçicisi Ayrıntısı
• CSS ID Seçicisi Ayrıntısı
• CSS Özellik Seçicisi Ayrıntısı
• CSS Çocuk Seçicisi
• CSS Alt Element Seçicisi
• CSS Yakın Kardeş Seçicisi

İhtiyari dersler

Kurs tavsiyesi:

• CodeW3C.com Kıymetli Sandığı

CSS, saf renkleri arka plan olarak uygulamanıza ve oldukça karmaşık etkiler oluşturmak için arka plan resimlerini kullanmanıza izin verir.

CSS, bu konuda HTML'den çok daha fazla yeteneklidir.

Arka plan rengi

Kullanılabilir background-color özelliğiElemente arka plan rengi ayarlanır. Bu özellik, herhangi bir geçerli renk değeri kabul eder.

Bu kural, elementin arka planını gri olarak ayarlar:

p {background-color: gray;}

Arka plan rengi, elementdeki metne dışarıda az bir uzanış yapmasını istiyorsanız, sadece biraz iç kenar boşluğu eklemeniz yeterlidir:

p {background-color: gray; padding: 20px;}

Kişisel olarak deneyin

Tüm elementlere arka plan rengi ayarlanabilir, bu da body'den em ve a gibi iç içe yerleşik elementlere kadar geçerlidir.

background-color miras alamaz, varsayılan değeri transparenttir. Transparent, 'şeffaf' anlamına gelir. Yani, bir elementin arka plan rengi belirlenmemişse, arka plan şeffaftır ve böylece atalarının arka planı görünür hale gelir.

Arka plan resmi

Arka plana resmi eklemek için kullanmak gerekir background-image özelliği.background-image özelliğinin öntanımlı değeri none'dir, bu da arka plana herhangi bir görsel eklenmemesi anlamına gelir.

Arka plan görseli ayarlamak için, bu özelliğe bir URL değeri ayarlamak gerekir:

body {background-image: url(/i/eg_bg_04.gif);}

Çoğu arka plan body öğesine uygulanır, ancak sadece bu sınırlı değildir.

Aşağıdaki örnekte, bir paragrafa arka plan uygulanmış, ancak belgenin diğer kısımlarına arka plan uygulanmamıştır:

p.flower {background-image: url(/i/eg_bg_03.gif);}

Hatta sütun içi öğeler için arka plan görseli ayarlayabilirsiniz, aşağıdaki örnekte bir bağlantıya arka plan görseli ayarlanmıştır:

a.radio {background-image: url(/i/eg_bg_07.gif);}

Kişisel olarak deneyin

Teorik olarak, textareas ve select gibi değiştirilebilir öğelerin arka planına görsel uygulamak mümkündür, ancak tüm kullanıcı arayüzleri bu durumu iyi bir şekilde işlemeyebilir.

Ayrıca, belirtmek gerekirse, background-image de miras alınamaz. Aslında, tüm arka plan özellikleri miras alınamaz.

Arka plan tekrar

Arka plan görseline döşeme gerektiğinde, bu özelliği kullanabilirsiniz background-repeat özelliği.

Özellik değeri repeat, görselin dikey ve yatay yönde döşenmesini sağlar, bu da arka plan görsellerinin genellikle kullanılan yaygın yöntemidir. repeat-x ve repeat-y, görselin sadece dikey veya yatay yönde tekrarlanmasını sağlar, no-repeat ise görselin herhangi bir yönde döşenmesini engeller.

Öntanımlı olarak, arka plan görseli bir öğenin sol üst köşesinden başlar. Aşağıdaki örneği görün:

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

Kişisel olarak deneyin

Arka plan konumlandırma

Kullanılabilir background-position özelliğiGörselin arka plan içindeki konumunu değiştirmek.

Aşağıdaki örnekte, body öğesinde bir arka plan görseli ortada yerleştirilir:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: center;
  }

background-position özelliğine değer sağlamak için birçok yöntem vardır. İlk olarak, bazı anahtar kelimeler kullanılabilir: top, bottom, left, right ve center. Genellikle, bu anahtar kelimeler çift olarak ortaya çıkar, ancak her zaman böyle değildir. Ayrıca, uzunluk değerleri, örneğin 100px veya 5cm gibi kullanılabilir, en son olarak da yüzdelik değerler kullanılabilir. Farklı türdeki değerler, arka plan görselinin yerleştirilmesinde biraz farklılık gösterir.

Anahtar kelimeler

Resim konum anahtar kelimeleri anlaşılması en kolay olanlarıdır, adlarının da gösterdiği gibi çalışırlar. Örneğin, top right, resmin elemanın iç dolgu bölgesinin sağ üst köşesine yerleştirir.

Norme göre, konum anahtar kelimeleri herhangi bir sırayla出现olabilir, ancak iki anahtar kelime - biri yatay yönde, diğeri dikey yönde - iki anahtar kelimeyi aşmayacak şekilde olmalıdır.

Sadece bir anahtar kelime görünüyorsa, diğer anahtar kelime center olarak kabul edilir.

Bu nedenle, her paragrafın orta üstüne bir resim çıkmasını sağlamak istiyorsanız, şu şekilde ifade edebilirsiniz:

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

Aşağıda eşdeğer konum anahtar kelimeleri verilmiştir:

Yüzdelik değer

Yüzdelik değerlerin ifadesi daha karmaşıktır. Resmi elemanın içinde merkeze yerleştirmek için yüzdelik değer kullanmak istiyorsanız, bu oldukça basittir:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

Bu, resmin uygun bir şekilde yerleştirilmesini sağlar ve merkezi elemanın merkezi ile hizalanır.Diğer bir deyişle, yüzdelik değerler hem eleman hem de resim için aynı anda uygulanır.Yani, resimde 50% 50% olarak tanımlanan nokta (merkez noktası) elemanda 50% 50% olarak tanımlanan nokta (merkez noktası) ile hizalanır.

Resim 0% 0% konumunda ise, sol üst köşesi elemanın iç dolgu bölgesinin sol üst köşesine yerleştirilir. Resim konumu 100% 100% ise, resmin sağ alt köşesi sağ dolgu bölgesinin sağ alt köşesine yerleştirilir.

Bu nedenle, bir resmi yatay yönde 2/3, dikey yönde 1/3 konumuna yerleştirmek istiyorsanız, şu şekilde ifade edebilirsiniz:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

Yalnızca bir yüzdelik değer sağlanırsa, sağlanan bu değer yatay değeri olarak kullanılır, dikey değeri 50% olarak varsayılır. Bu, anahtar kelimelerle benzerdir.

background-position'un varsayılan değeri 0% 0% olup, işlevsel olarak top left'e eşittir. Bu, arka plan resminin neden her zaman elemanın iç dolgu bölgesinin sol üst köşesinden döşendiğini açıklar, aksi takdirde farklı bir konum değeri ayarlamazsanız.

Uzunluk değerleri

Uzunluk değerleri, elementin iç kenar boşluğu sol üst köşesinin kayması anlamına gelir. Kayma noktası, görselin sol üst köşesidir.

Örneğin, ayar değeri 50px 100px ise, görselin sol üst köşesi, elementin iç kenar boşluğu sol üst köşesinden sağa 50 piksel, aşağıya 100 piksel olacak şekilde yerleştirilir:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

Dikkat edin, bu, yüzdelik değerlerle farklıdır, çünkü kayma sadece bir sol üst köşeden diğerine. Yani, görselin sol üst köşesi background-position ifadesinde belirtilen noktaya hizalanır.

Arka Plan Bağlantısı

Belge uzunsa, belge aşağı kayarken arka plan görseli de aşağı kayar. Belge, görselin konumunu aşarsa, görsel kaybolur.

Aracılığıyla background-attachment özelliğiBu tür kaymayı önlemek için. Bu özellikle, görsel görsel alanına göre sabit (sabit) olarak ilan edilebilir, bu nedenle kayma etkilenmez:

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

Kişisel olarak deneyin

background-attachment özelliğinin varsayılan değeri scroll'dır, yani varsayılan olarak, arka plan belge kayarken kayar.

CSS Arka Plan Özellikleri

Araç Çuvalı

CSS Kaynak Kılavuzu

CSS Örnekleri

CSS Testleri

CSS Dersleri

Sponsor Bağlantıları