Top

px Tag

  • All
  • Dijital medya
  • Dijital reklam
  • Dijital strateji
  • Eğitim
  • Growth hacking
  • Haber
  • İnceleme
  • Kişisel
  • Kurumsal
  • Markalar
  • Medya
  • Rehber
  • Teknoloji

Not: Bu içerik ve içerikler dizisi, Css’in doğru kaynaklardan öğrenilmesi ve Türkçe kaynak sıkınıtısının giderilmesi adına w3schools’tan çevirilmiştir. Online yani çevrimiçi editör de w3schools’a aittir. Herhangi bir sorunuz için aşağıya yazabilirsiniz!

Padding

Element ve elementin içeriği arasındaki boşlukları ifade eder padding.


Padding

Bir elementin içeriğinin etrafının temizlenmesini sağlar. Elementin arkaplan renginden etkilenir.

Farklı özellikler kullanarak, alt, üst, sağ sol farklı olarak ayarlanabilir. Tüm özelliklerin yazımı yerine kısayazım özelliği ile de belirlenebilir tüm çevre.

Mümkün olan değerler

Değer Tanım
length Sabit bir iç boşluk (in pixels, pt, em, etc.)
% Elementin yüzdesel boşlukları

 


Padding – Tekil kenarlar

CSS’te, farklı kenarlara farklı iç boşluklar verilebilir:

Örneğin

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

Kendiniz de deneyebilirsiniz»

 


Padding – Kısayazım özelliği

Kodu kısaltmak için,tek bir özellikte tüm değerler verilebilir. Bu kısayazım özelliğidir.

“padding” İç bşoluklar için kısayazım özelliği taşıyan özelliktir:

Örneğin

padding:25px 50px;

Kendiniz deneyin »

Padding  özelliği birden dörde kadar değer alabilir.

  • padding:25px 50px 75px 100px;
    • üst boşluk 25px
    • sağ boşluk 50px
    • alt boşluk 75px
    • sol boşluk 100px
  • padding:25px 50px 75px;
    • üst boşluk 25px
    • sağ ve sol boşluk 50px
    • alt boşluk 75px
  • padding:25px 50px;
    • üst ve alt boşluk 25px
    • sağ ve sol boşluk 50px
  • padding:25px;

Bu derslerin çoğu bir çeviridir w3schools.com’dan ve kendi tecrübelerimi de içerir. Örneklerin çoğunu kendiniz uygulayabildiğiniz gibi daha önce açıkladığım şekilde, w3schools.com’a ait örneklerde verdiğim online editör’den de yararlanabilirsiniz. Yararlı olması dileğiyle…


Tüm HTML elemanları kutu olarak düşünülebilir. CSS’te, “box model”(kutu modeli) terimi  tasarım ve düzen hakkında konuşulduğunda kullanılır.

CSS box model HTML elementlerini saran bir kutu aslında ve margin’e(dış boşluk), border’a(kenar/çerçeve), padding’e(iç boşluk, içeriğin uzaklığı)ve asıl içeriğe(content) dayanır.

Box model elementlerin etrafına sınır çekmemize izin verir ve ilgili elementlere yakın konumlarına boşluklar koymamızı sağlar.

Alttaki resim kutu modelini anlatmaktadır:

Farklı bölümlerin açıklaması:

  • Margin – border’ın yani çerçevenin etrafını temizler ya da boşluk bırakır-boşaltır- da denilebilir. Margin arkaplan rengine sahip değildir, tamamen transparandır. Bizler okulda kompozisyon yazarken A4 kağıdın her tarafında 5 cm boşluk bırakırız ve içerik o boşluklarda yer almaz. İşte o boşluk margin’dir.
  • Border – Bir border padding(içeriği uzaklaştıran boşluk) ve content.(içerik) i de içine alan bir sınırdır. Border kutunun arkaplan renginden etkilenir.
  • Padding – Content’in yani içeriğin çevresindeki alanı boşaltır ya da temizler. Padding kutunun arkaplan renginden etkilenir.
  • Content – Kutunun içeriğidir yazılar ve resimler burada görünür.

Tüm tarayıcılarda doğru bir şekilde gözükmesini sağlayabilmeniz için box model’in nasıl işlediğini bilmeniz gerekmektedir.


Bir elementin Width ve Height değerleri(Genişlik ve yükseklik)

Önemli:Css ile bir elementin genişlik ve yükseklik değerlerini belirttiğinizde sadece içeriğin yer alacağı alanın genişlik ve yüksekliğini belirtmiş oluyorsunuz. Bir elementin tam kapladığı alanı bilebilmek için padding, border ve margin değerlerini de eklemelisiniz.

Aşağıdaki örmekte bir elementin toplam genişliği 300px’dir:

width:250px;
 padding:10px;
 border:5px solid gray;
 margin:10px;

Şimdi ölçelim:
250px (width yani genişlik)
+ 20px (sol ve sağ padding yani iç boşluk)
+ 10px (sol ve sağ çerçeve yani border)
+ 20px (sol ve sağ margin yani dış boşluk)
= 300px toplamda

CSS font özelliği font ailesini, kalınlığını, boyunu ve yazı stilini tanımlamanızı sağlar.

Şerif ve Sans-şerif fontların arasındaki farklar;

Şerif fontu tırnaklı olur kırmızı alanlarda görüldüğü gibi. Sans-şerif ise tırnaksız olandır. Sans-şerif daha çok başlıklarda ve başlık niteliği taşıyan ciddi karakterli yazılarda kullanılır. Tırnaklı olan şerif ise, paragraf özelliği gösteren ve açıklama niteliğindeki yazılarda kullanılır, küçük fontlarda kullanımı yaygındır.

CSS Font Ailesi

CSS’te 2 tür font ailesi adı vardır;

  • generic family – Şerif veya tek aralıklı bir grup font ailesi
  • font family – Belirli bir font ailesi Times New Roman veya Arial gibi…
Generic family Font family Tanım
Serif Times New Roman
Georgia
Serif fontlar karakterlerin sona eren kısımlarında çıkıntılara sahiptir.
Sans-serif Arial
Verdana
Sans’ın anlamı onsuz, yani şerifsiz(tırnaksız/çıkıntısız) anlamındadır.
Monospace Courier New
Lucida Console
Hepsi aynı genişliğe sahip tüm tek aralıklı karakterler.

Font Family

Font ailesi bir yazıdır/yazı tipidir,  font-family özelliği ile ayarlanan.

Font-family özelliği birkaç font adını da tutmalı ki sistem kayıplarına karşı korunsun. Yani yazdığınız font kullanıcının sisteminde yoksa yedekteki font seçeneğini kullanmalı. Veya sizin yazdığınızı tarayıcı desteklemeyebilir ikinci yazdığınızı.

İstediğiniz font ile başlayın,  generic ailesi ile bitirin ve böylece tarayıcının, benzer font seçmesini sağlayın generic family’ye benzer olarak tabi eğer diğer fontlar uygun değilse.

Not: Font ailesindeki isim bir kelimeden fazla ise tırnak işaretleri arasında yer almalı, tıpkı “Times New Roman”‘da olduğu gibi.

Örnek;

p{font-family:"Times New Roman", Times, serif;}

Deneme adresiniz için tıklayınız!

Font Style

Çoğunlukla yazıyı yatık yani italik yapmak için kullanılır.

Buradan resmin büyük hallerini görebilirsiniz tıklayarak. Ya da resimler menüsü için resime bir defa tıklayın sonra tekrar tıkladığınızda orjinal boyutları ile açılacaklardır.

Photoshop’u açıyoruz. (üst fotodan itibaren)Ardından ctrl+o ile ya da üst menüden File>Open yolu izlenerek üzerinde işlem yapmayı istediğimiz dosyayı çağırıyoruz. Ve resim photoshop’un çalışma sahnesinde yerini alıyor. Ardından;

 

Image>Image Size yolu ile ya da ALT+CTRL+I ‘ya basarak(Bu basış yöntemi ilk önce Alt’a basılı tutarak ve bırakmadan ctrl’ye onları da bırakmadan I’ya basarak tamamlanır.) işlem gerçekleştirilir. Böylelikle resmimizi boyutlandırmak için bir menü çıkacak karşımıza. Ardından;

Menüdeki ilk kısım pixel dimensions piksel boyutu yani belirtilmiş ilk önce. Böylelikle resimin ne kadar boyuta sahip olduğunu öğrenebiliriz. Resimin boyutu en boy olarak ne kadar değişirse piksel boyutu da o kadar değişir. Yalnız resim düşük boyutlu piksele sahip iken büyütür iseniz resim bozulmaya uğrayabilir. Ama küçültmekte sorun yaşamazsınız. Resmin boyutu piksel olarak çok fazla ise bir raddeye kadar büyültmeniz resme zarar vermez tabi.

Bu resimde ben küçültme yapacağım. Siz de ihtiyacınız oranında Width ve Height değerlerini değiştirebilirsiniz. Ama bu da resmin tuhaf görünmesine neden olduysa Bu menünün altındaki kutucuklarda Constrain işaretli değil ise işaretleyin. Zaten işaretli olarak geldi ise, width ve height’ın hemen yanında, iki oranı da sabitlediğini ifade eden bir kilit resmi olur. Bu sayede genişliği 800 yaptığınızda bozulmayı azaltmak için orjinal resmin en*boy oranını koruyarak yüksekliği de otomatik olarak ayarlar.