CSS dolgusu, bir HTML kodlayıcısının bir HTML öğesinin dışındaki varsayılan dolguyu veya ölü alanı ayarlamasını sağlar. Bunu yapmanın yararı, kodlayıcıyı, söz konusu öğenin her bir örneği için bu doldurma kodunu tekrar etmekten kurtarması ve sayfada daha kolay bir tutarlılık oluşturmasıdır. Doldurulacak HTML öğesi, paragraf, tablo veya başlık gibi istediğiniz sayıda şey olabilir.
CSS'de doldurma oluşturmak için önce doldurmak istediğiniz HTML öğesini tanımlamanız gerekir. Dolgu yapmak istediğiniz bu eleman, seçici olarak bilinir. Ardından uygun dolgu değerlerini belirtmek isteyeceksiniz. CSS'de beş farklı tipte dolgu özelliği vardır - bir elementin dört tarafı için bir defada ve elemanın her bir tarafı için dört kişi (örneğin, sol taraf, sağ taraf, üst taraf veya alt taraf) ). Programcının bir HTML öğesinin dört tarafı için bir kerede değerleri belirtmesine izin veren bir özelliğe kısayol özelliği denir.
Bir CSS dolgusu bildirimi belirtmek için kullanılan kodlama dili basitçe "dolgu" kelimesidir. Bu etiketin ardından, dolgunun ilgili "değerleri" veya istenen boşluk miktarı hakkındaki bilgiler genellikle pikseller veya yüzde. Dolgu ve değerler küme parantezleri veya küme parantezleri içine yazılır (yani, "{" ve "}"). Hepsinden önce, doldurulacak HTML öğesi (örneğin, paragraf için "p" ya da seviye 2 başlıkları için "H2").
Değerin nasıl ifade edildiğine bakıldığında, değerler pikseller (örneğin, 1px veya 5px), noktalar (örneğin, 1pt veya 5pt) veya inç (örneğin, 1in veya 5in) veya santimetre (örneğin, 1 cm veya 5 cm) olarak gösterilebilir. . Değerler, stillendirilen HTML öğesinin yüzdesi olarak da bildirilebilir. Eğer değer% 50 ise, örneğin, dolgu elemanı elemanın yarısına eşit olacaktır.
Aşağıdaki örnekler, sırasıyla bir yüzde ve uzunluk olarak yansıtılan değerler aracılığıyla bir HTML öğesini doldurmak için HTML kodudur. Yalnızca bir değer atanırsa, web tarayıcıları bu dolguyu HTML öğesinin dört tarafına da atar.
dolgu:% 10;
dolgu: 100 piksel;
Yukarıdaki doldurma bildirimi türüne daha fazla değer eklemek, web tarayıcılarının bunları belirli bir şekilde yorumlamasına neden olur. Eğer iki değer atanırsa, ilki sola ve sağa karşılık gelirken, ilki üste ve alta karşılık gelir. Üç değer, ilki, ikincisi sol ve sağ tarafları, üçüncüsü HTML öğesinin dibine başvurmasına neden olur. En fazla dört değerin atanması, birinci, ikinci, üçüncü ve dördüncü değerlerin, HTML öğesinin üst, sağ, alt ve soluna karşılık gelmesine neden olur. Birden fazla değer sağlandığında, bunlar boşluklarla ayrılmalı ve noktalı virgül ile bitmelidir, örneğin:
dolgu maddesi: 10px 20px 10px 20px;
CSS’de dolgu işlemi bir seferde bir tarafta yapılabilir. Bu bağlamda, dört farklı dolgu özelliği daha vardır. Bunlar doldurma üstü, doldurma sağ, doldurma alt ve doldurma sol. CSS'de bu şekilde daha hassas bir şekilde dolguyu oluşturmak için, özellikleri yukarıdaki kısa açıklamalarla aynı sözdizimiyle etiketlemeniz gerekir. Bu dolgu özelliklerinin her biri, uzunluk veya yüzde cinsinden yalnızca bir değer alır. Örneğin:
dolgu üstü: 10px;
padding-right: 20px;
dolgu dipli: 10px;
dolgu-sayısı: 20 piksel;
Aşağıdaki kod bir web sayfası oluşturur, stil etiketleri arasındaki dolgu özelliklerini bildirir ve ardından p etiketi tarafından belirtilen bir paragraf öğesinde kullanır. / * Ve * / arasındaki metin, kullanılan dolgu tipini açıklayan ve CSS dolgu koduna dahil edilmeyen notlardır.
<Html>
<Head>
<style type = "text / css">
p.example1 {padding: 10px;} / * Dört tarafın tümü için kısa el dolgu * /
p.example2 {dolgu: 50px 30px;} / * Üst ve alt için kısa elle doldurma, ardından sol ve sağ * /
p.example3 {
dolgu üstü: 10px;
dolgu dipli: 20 piksel;
dolgu dipli: 10px;
dolgu-sayısı: 20 piksel;
} / * bireysel dolgu. * /
</ Style>
</ Head>
<Body>
<p class = "example1"> Bu metin, her iki tarafta aynı dolguya sahip. Her iki taraftaki dolgu 10 piksel. </p>
<p class = "example2"> Bu metnin 50px üst ve alt dolgusu ve 30px sol ve sağ dolgusu vardır. </p>
<p class = ”example3”> Bu metin, 10 piksel üst dolgu, 20 piksel sağ dolgu, 10 piksel alt dolgu ve 20 piksel sol dolgu içerir. </p>
</ Body>
</ Html>
Yukarıdaki örnekte, “example1” vb., Bir sınıfa atanan ve daha sonra paragraflarda başvurulan adlardır. P etiketi ile kodun başlangıcındaki sınıf adları arasındaki süre, paragrafa atanan bir sınıfın ilanını belirtir. Dolgu özellik değeri atamalarını içeren sınıf bildiriminden sonra parantezlere dikkat edin.
Bu çok fazla iş gibi görünse de, her bir paragraf için dolgu kullanmaktan daha az emek gerektirir. Yukarıdaki örnekte p etiketi olan istediğiniz öğe için bir dolgu özelliği tanımlayabilir ve öğeyi sayfanın gövde etiketleri arasında kullandığınızda sınıfa başvurabilirsiniz. Tüm paragraflar için yalnızca bir tür dolgu gerekiyorsa, sınıfları hiç kullanmanıza gerek yoktur. Stil etiketleri arasında yalnızca aşağıdaki kodu kullanın ve ardından herhangi bir sınıf belirtmeden paragrafları kodlayın. Bu kod, yukarıdaki örnekte yer alan kod yerine gövde etiketlerinin arasına gider.
p {dolgu: 10px 20px 10px 20px;}
Bunun yarattığı CSS dolgusu, sınıf belirtilmemiş olsa bile tüm paragrafları etkiler.
