DERS] Tasarım İçin Öğrenmeniz gereken CSS bilgileri..

hemen css derslerimize başlayalım..
css'te kullanılan değerler
ya # ile başlar ya . yada direk değer girilir.Yani ?
#deneme {
}
olarak başlayabilir
.deneme olarak başlayabilir
veya direk
deneme {
}
olarak başlayabilir.

Ne demek oluyor bu ? CSS te kodlar yazılırken
kodu bir yere atamak için özelliklerden önce bir parametre atanır.
yani

Kod:
#hackhell {özellikler}
şeklinde.

CSS'i nasıl Kullanabilirim?

CSS'i iki şekilde kullanabiliriz.Ya html içinde, yada html içine .css dosyası linki vererek.
.css dosyası ile arasında CSS farkı yoktur.Sadece .css'ye HTML'de kullandığımız
<style> tagını kullanmayız.

Kısa bir bilgi daha

CSS'i yazıyoruz ama nasıl aktif hala getireceğiz ?
az önce bahsettiğim # ve . ile ilgili olarak,
# id parametresini getirir
. class parametresini getirir
null direk tag içerisini etkiler (null dediğim # veya . kullanmadan)

mesela:

HTML-Kodu:
<style type="text/css">#deneme {özellikler}.hackhell {özellikler}silverday {özellikler}</style>
ile styleımızı oluşturduk.HTMLde bu şekilde kullanacağız:

HTML-Kodu:
<span id="deneme">Deneme yazı</span> <span class="hackhell">HH</span> <silverday> Enes İnkaya </silverday>
şeklinde. (denemeyin, css özelliklerini yazmadık DERS] Tasarım İçin Öğrenmeniz gereken CSS bilgileri.. W00t

)

Özelliklerimiz:

csste özellikler { } arasına yazılır.Özellik adı yazıldıktan sonra iki noktanın ardından
özellik değeri atanır.Ve bir sonraki özellik yazılırken noktalı virgül ile geçiş yapılır.

FONT Özellikleri

font-size

HTML-Kodu:
font-size: 12px;
gibi kullanabiliriz. px boyutu ile yazının büyüklüğünü ayarlar.

font-weight

HTML-Kodu:
font-weight: bold;
gibi kullanabiliriz. normal, small gibi değerler alır.Yazının genişliği (kalınlığı)dir.

font-family

HTML-Kodu:
font-family: Arial;
gibi kullanabiliriz. yazı tipini belirler.

color

HTML-Kodu:
color: #000000;
gibi kullanabiliriz. Hex moddaki renklerle veya red,navy,green gibi belli renkler kulanılır..

Arka Plan Kullanımı

background
en kapsamlı koddur.
background: #FFFFFF;
olarak kullanılabilir.

arka plana resim koymak:
background: #FFFFFF url(resimlinki);

background fonksiyonları:
repeat-x veya repeat-y: koyulan resmin x kordinatında mı
y kordinatında mı tekrar etmesini sağlar.
no-repeat: koyulan resmin devam etmemesini sağlar.
bottom: koyulan resmi en aşağı yaslar
top: koyulan resmi en yukarı yaslar
middle: koyulan resmi y kordinatında ortalar
center: koyulan resmi x kordinatında ortalar
left: resmi sola yaslar
right: resmi sağa yaslar.

nası kullanırız?
msela koyduğumuz resmi tekrar ettirmeden, sağa yaslayalım, ve y kordinatında ortada olsun.

HTML-Kodu:
background: url(resimlinki) no-repeat middle center;

Bordür :

bordür 5 şekilde kullanılır.
border, border-left, border-right, border-top, border-bottom.
yani border'i her yön için kullanabilir veya sadece sol,sağ,üst,alt şeklinde tek kullanabiliriz.
örnek:

HTML-Kodu:
border: 2px solid #000000;
bordür düz renkte siyah ve 2pixel kalınlığında 4 yönde de olur.
fonksiyonlar

dotted : noktalı noktalı bordür
dashed : çizgili
solid : düz
double : çiftli
groove
ridge
inset : içe doğru bordür
outset : dışa doğru bordür

margin ve padding:
htmlde de olan margin ve padding, sayfalarda satırlar ve sütunların arasındaki boşluktur.
prof. tasarımcıların çoğu güzel görüntü için margin ve paddingi 0 yaparlar.

HTML-Kodu:
#deneme {margin: 0;padding: 0;}
isterseniz margin: 5px; gibi değerler verebilrsiniz.

Güzel Bir Örnek yapalım öğrendiklerimizle..

style.css:

html {
margin: 0;
padding: 0;
}
#logo {
background: #FFFFFF url(logo linki) no-repeat;
}
.icerik {
font-family: Tahoma;
font-size: 12px;
font-weight: bold;
color: #444444;
}
copyright {
background: #cacaca;
color: #444444;
font-weight: bold;
font-size: 10px;
font-family: Arial;
text-align: center;
}

sayfa.html:

HTML-Kodu:
<html> <head><title>Deneme sayfa</title> <link href="style.css" rel="stylesheet"> </head> <body> <div id="logo" width="500" height="100"> </div><br /><br /> <span class="icerik">Hackhell CSS Dersleri</span><br><br> <copyright>Tüm hakkı saklıdır</copyright> </body></html>