Merhabalar, r10 üzerinde HTML - CSS - XML incelerken CSS terimlerinin belirli bir konu üzerinde gösterilmediğini gördüm.Aslına bakarsanız benim CSS bilgim çok ileri değil ancak yinede burada bu konu ile yeni başlayanlar için CSS terimlerini tanımlayacağım.

Öncelikle sitemizin temelini oluşturan arka plandan bahis edelim.Daha sonrada diğer önemli terimlerden bahsedeceğim.İsterseniz bunları terim terim yazarak tanımlayalım ?

background-color: Arka plan rengini belirler, verdiğiniz renk değerleri ile arka planı renklendirebilirsiniz

Burada css dosyasını oluşturuken background-color: #000 transparent; kullanacağımızıda söyleyelim bilmeyenler olabilir.Neyse az önce background-color değerinden bahis ettim ancak resimde kullanabileceğim bu terimde resim kullanımını şu şekilde yapıyoruz;
background-image:url(https://www.r10.net/images/misc/vbulletin3_logo_white.gif) repeat-x;
Buradaki repeat terimini kullanarak resmi ister zemine yayar istersek olduğu gibi bırakırız.

repeat teriminin yanında yer alan "x" yada "y" harfleri ile dosyamızı görselleştirebiliriz.Bunların kullanım değerleri ise şu şekilde;

Alıntı
repeat-x : Resmin soldan-sağa doğru yayılmasını sağlar..
repeat-y : Resmin sol üstten-sol alta doğru yayılmasını sağlar.
no-repeat: Resmin olduğu gibi kalmasını sağlar.
Bunları kullanarak css ile arka plan ekleyebiliyoruz.Ancak body tagı ile sitemizin görsel bölümünü başlatıp bitirdiğimiz için sayfamızın en genel tasarımını burada bitiriyoruz.Bu yüzden body tagını CSS ile biçimlendirirken bu bahis ettiğim değerleri kullarana sitenizinde arka planını oluşturabilirsiniz.

CSS ile Link özelliklerini görselleştirmek.

<a href... gibi "a" tagı ile başlattığımız linki :hover, :linkin, :active yada : visited tanımlamaları ile linki kullanımına göre geliştirebilirsiniz.Bunun için bu kodları CSS dosyamıza yerleştirmemiz yeterli oluyor, örnek verecek olur isek;

Alıntı
a:link {
color:#000000;
background-color:#caff28;
text-decoration:none;}
a:hover {
color:#caff28;
background-color:#000000;
text-decoration:none;}
a:active {
color:#ffffff;
background-color:#f2f2f2;
text-decoration:none;}
a:visited {
color:#ffffff;
background-color:#000000;
text-decoration:none;}
Bu örnekteki terimleri açıklayarak tüm a:---- terimlerini açıklamış olacağız.

a:link kodunu kullanarak sayfaya linke tıklanmadan ve mouse üzerine gelmeden önce renginin #000000 arka plan renginin ise #caff28 olması komutunu verdim.


a:hover kodunu kullanarak sayfaya mousenin linkin üzerine gelince renginin #caff28 arka plan renginin ise #000000 olması komutunu verdim.

a:active kodunu kullanarak sayfaya mousenin linke tıklandığı an linkin renginin #ffffff arka plan renginin ise #2f2f2 olması komutunu verdim.

a:visited kodunu kullanarak sayfaya linke tıklandıktan sonra link renginin #ffffff arka plan renginin ise #000000 olması komutunu verdim.

CSS ile Metine görsellik kazandırmak

Css ile sayfadaki düzenini sağladığımız en önemli şeylerden biriside yazı boyuru, şekli şemalidir.Bunun için kullandığımız terimler ile yazının okuyucuların gözünde daha güzel görülmesini sağlayabiliriz.

Yazıyı tanımlarken şu şekilde bir kullanım yaparak en genel hatlarda yazımızı CSS ile tanımlamış oluruz.
Alıntı
#bydvtr10 {
font-size:12px;
font-family:"verdena";
font-style:normal
font-weight:bold
}
Buradaki değerleri açacak olursak font-size ile yazının boyutunu belirledik, font-family yazının türünü belirledik, font-style yazının normal kalmasını (eğik, vs.) sağladık ve font-weight ilede yazının kalın olmasını sayfaya emrettik.

"word-spacing:30px;" gibi bir ifadeyle kelimeler arasındaki boşluğu belirlersiniz.
"letter-spacing" gibi bir ifadeyle harfler arasındaki boşluğu belirlersiniz.
"text-decoration" gibi bir ifadeyle kelimenin altının çizili olup, olmayacağını belirlersiniz.none(normal), underline(çizili) vs.
"text-transform" gibi bir ifadeyle kelimelerin büyük yada küçük harflerden oluşmasını sağlayabilirsiniz.

Şimdilik benim söyleyeceklerim bunlar, biraz uykum var yazarken bile gözlerim kapanıyor.Bu arada en baştada söylediğim gibi bunun yeni başkayanlar için bir kaynak olmasına çalıştım.

Ancak ileri olmayan css bilgim ile hatalar yaptıysam lütfen konu altında belirtin ben düzelteyim.

------------------Üyelerin konu altından yarımları-----------------------------
Alıntı
teknolyo-->ileri css yazım tekniklerinin ilk kurallarından biri artık birçok özelliği birlikte yazmaktır ne gibi mesela background. bir background tanımlarken uzun uzadıya background-image , bg repeat, bg position gibi tekrar tekrar yazmak yerine ;
background:#renk url('resim adresi') pozisyon tekrar özelliği;

örnek vermek gerekirse ;

background: #ffffff url('logo.jpg') left top no-repeat;

aynı şekilde a tag'i için de sadece direk a ve a:hover belirlemen yeterli olur.

font tanımlarken de yine kısa yazım tekniklerini kullanabilirsin. bunda da şu şekilde :

font:genişlik punto font ailesi;

örnek olarak:

font: bold 12px arial;

burada 12px değerinden sonra "/" koyup bir değer daha verirseniz o tag'in satır yüksekliğini de ekstra kod yazmadan halletmiş olursunuz. yani:

font: bold 12px/24px arial;

yaptığınızda o elementin line-height değeri 24 px olur.
Alıntı
hrngndz-->
<style type="text/css">
h1{font-family:Arial;}
</style>


<h1>hrngndz</h1>
Alıntı
arno-->ie6 için özel bir kod yazacaksanız başına _ işareti
ie7 için özel bir kod yazacaksanız başına * işareti koyabilirsiniz.

Mesela bazı yerlerde ie6 için farklı bir padding değeri vermeniz gerekebilir:

.deneme {
padding-top: 4px;
_padding-top: 6px;
}

yukarıdaki tanımlama ile normalde 4 pixel olan padding, ie6da 6 pixel olarak uygulanır.

********

ie6 da iç içe float edilmiş elemanlarda margin iki kat değer alır bunu düzeltmek için o elamana " display: inline; " kodunu eklerseniz sorun düzelir. Diğer tarayıcılar bu kodtan etkilenmez.

*******

ie7 bazen çift padding değeri alıyor (sebebini bilmiyorum çok sık karşılaştığım bir problem değil) bunu düzeltmek için de " display: inline-block; " kodunu kullanabilirsiniz.

*******
Not: Yazı sadece r10.net üzerinden yazılmıştır, alıntı için lütfen kaynak gösteriniz.