İçeriğe geç

Etiket: dersleri

CSS Dersleri Bölüm 13 Padding

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;
Yorum Bırak

CSS Dersleri Bölüm 10 – Border / Çerçeve – kenar

CSS Border Özelliği

CSS border özelliği bir elementin dış hatlarının rengini ve stilini belirlemeye olanak sağlar.

Border Style

border-style özelliği nasıl bir kenarlığın gösterileceğini tanımlamamızı sağlar.

Not;  border-style özelliğini belirtmediğiniz sürece hiçbir border tanımlaması işe yaramaz!

border-style değerleri:

none: Çerçevesiz hal

dotted: Noktalı bir çerçeve

dashed: Tirelenmiş kenarlık

solid: Sade, tek renk ve tek çizgi halinde olan kenarlık

double: Çift kenarlık. border-width değerindeki genişlik değeri ile aynı değere sahip iki çerçeve de.

groove: 3 boyutlu oluklu kenarlık. Efektler border-color değerine bağlıdır.

ridge:3D kabarık çizgi. border-color değerine bağlı.

inset: 3d ilave kenar. border-color değerine bağlı.

outset: 3d ilave kenar. border-color değerine bağlı.

Kendiniz deneyin: Kenarın değerini ayarlama


Kenar genişliği

border-width kenarların genişliğini ayarlamak için kullanılır.

Genişlik piksel olarak veya thin, medium ve thick olarak 3 tanımlı kenar genişliğini kullanabilirsiniz.

Not: The “border-width”tek başına kullanıldığında çalışmaz. “border-style” özelliği ile kenarlar ayarlanmalı ilk önce.

Örnek

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

Kendiniz deneyin »

 


Kenar rengi

border-color kenarlara renk vermek için kullanılır. Renkler de:

  • name -belirli bir renk adı ile,mesela “red”
  • RGB – belirli bir rgb değeri ile, mesela “rgb(255,0,0)”
  • Hex – belirli bir hex değeri ile,mesela “#ff0000”

Kenar renklerini transparan/”transparent” da yapabilirsiniz.

Yorum Bırak

CSS Dersleri Bölüm 9 –Kutu modeli

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

Yorum Bırak

CSS Dersleri Bölüm 8 –Tabloları Stillendirme

Temamın tablo stilleri uygun olmadığı için göstermek istediğim tablo biçimini şuradan görebilirsiniz buraya tıklayarak.

Ek açıklama da; 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…

Table Borders(tablo kenarları)

border özelliği kullanılarak tablo kenarları css ile biçimlendirilir.

Aşağıdaki örnek siyah bir kenar oluşturur table, th ve td elementleri için:

Örnek

table, th, td
 {
 border: 1px solid black;
 }
 Kendiniz deneyin! »

Örnekteki tablonun kenarlarının çift olduğuna dikkat edin. Bu table ve th/td elementlerinin ayrı olarak kenar özelliğine sahip olduğunun göstergesidir.

Tablo kenarında tek bir çizgi göstermek için border-collapse özelliğini kullanın.

Yorum Bırak