Bugün şu hasta halimle, Hürriyet bumerang sayesinde bu güzel anket sitesi ile karşılaştım. Çok da makul gözüken ödülleri var. Mesela;"fikirmetre üyesi olduktan sonra dolduracağın her anket için puan kazanacaksın. Kazandığın puanları ister e-ticaret sitelerinde isterseniz sosyal sorumluluk organizasyonlarında kullanabilirsin.Bunun için yapman gereken fikirmetre’ye giriş yaptıktan...
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ı:
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.
Ö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
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…
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:
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.
Css’in liste özelliği size şunları verir:
HTML’de iki tip listeleme vardır:
CSS’le, listeler de şekillendirilebilir ve resimler de liste işaretçilerinin yerine kullanılabilir.
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
Kendiniz deneyin! »Bir kısmı sırasız liste için bir kısmı sıralı liste için.
ul
{
list-style-image: url('sqpurple.gif');
}
Kendiniz deneyin »Yukarıdaki örnek tüm tarayıcılarda düzgün gözükmemekte. IE ve Opera; Firefox, Chrome ve Safari’dekilerden biraz daha büyük gösterecektir resmi.
Tüm tarayıcılarda düzgün gözükmesini istiyorsanız aşağıdaki çözümü uygulamanız gerekmekte.
Linkler herhangi bir CSS özelliği ile biçimlendirilebilir, color, font-family, background gibi.
Linklerin özelliği, bulundukları duruma göre stillendirilebilmeleri. Yani; bir link normal durumda(ilk durum), ziyaret edilmiş durum, linkin üzerine gelindiği durum, linkin aktif olduğu yani o anlık tıklanma durumu diye dört halde bulunur. Ve her bir durum ayrı ayrı stillendirilir.
a:link {color:#FF0000;} /* ziyaret edilmemiş link */
a:visited {color:#00FF00;} /* ziyaret edilmiş link */
a:hover {color:#FF00FF;} /* fare üzerinde link */
a:active {color:#0000FF;} /* seçilen link */Deneme adresiniz için tıklayabilirsiniz!
Fakat farklı durumları stillendirmede birtakım kurallar mevcut;
Yukarıdaki örnekte link, durumuna göre renk değiştirmekte.
Linkleri stillendirmenin diğer yolları da aşağıda:
text-decoration özelliği linklerin altındaki çizgileri kaldırmak için kullanılır çoğunlukla. Örnek;
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}Deneme adresiniz için tıklayabilirsiniz!
background-color özelliği linkler için arkaplan atar: Örnek;
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’te 2 tür font ailesi adı vardır;
| 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 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!
Çoğunlukla yazıyı yatık yani italik yapmak için kullanılır.
Renk özelliği yazının rengini değiştirebilmek için kullanılır.
CSS ile bir renk;
CSS renk değerlerine ait referans Css derslerinin bitiminde verilecektir.
Sayfanın varsayılan rengi body seçicisinde tanımlanır. Misal;
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}W3C’nin css bildirisine göre; Color özelliğini verdiyseniz, background-color özelliğini de vermek zorundasınız.
text-align özelliği yazının yatay hizalamasının ayarını tanımlar.
Yazı merkeze alınabilir veya sağa/sola hizalanabilir ve yahut iki tarafa hizalanabilir.
text-align, justify olarak belirlendiğinde ,her satır genişler iki yana yaslanmak için satır genişliğince ve sol ve sağ margin düz olur dergilerdeki ve gazetelerdeki gibi.
text-decoration özelliği ile yazı süslemelerinin ekleyebilir ya da kaldırabilirsiniz.
CSS arkaplan özellikleri bir elementin arkaplan efektlerini tanımlamak için kullanılır.
Arkaplan efektleri için css özellikleri;
background-color özelliği bir elementin arkaplanını değiştirmek için kulanılır.
body seçicisi ile sayfanın arkaplanını değiştiririz. Misal;
body {background-color:#b0c4de;}CSS ile; renk değiştirebilmek için değerleri,
Bunun üzerinde sonra tekrar duracağım.
background-image özelliği bir elementin arkaplan resmini değiştirmeye ya da oluşturmaya yarar.
Varsayılan olarak resim tekrar eder ve böylece tüm sayfayı kaplar.
Bir sayfanın arkaplan resmi şöyle olur;
body {background-image:url('paper.gif');}Arkaplan resmi belirlediğinizde yazıların okunabilir olmasına dikkat edin.
Genelde, background-image özelliği hem yatay hem de dikey olarak tekrar eder.