merhabalar yine ben 
:clap
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
ş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:
ile styleımızı oluşturduk.HTMLde bu şekilde kullanacağız:
şeklinde. (denemeyin, css özelliklerini yazmadık)
Ö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
gibi kullanabiliriz. px boyutu ile yazının büyüklüğünü ayarlar.
font-weight
gibi kullanabiliriz. normal, small gibi değerler alır.Yazının genişliği (kalınlığı)dir.
font-family
gibi kullanabiliriz. yazı tipini belirler.
color
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.
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:
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.
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:
alıntı deil alın teridir
:claphemen 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
}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:
<style type="text/css">
#deneme {
özellikler
}
.hackhell {
özellikler
}
silverday {
özellikler
}
</style>
HTML:
<span id="deneme">Deneme yazı</span>
<span class="hackhell">HH</span>
<silverday> Enes İnkaya </silverday>şeklinde. (denemeyin, css özelliklerini yazmadık
)Ö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:
font-size: 12px;font-weight
HTML:
font-weight: bold;font-family
HTML:
font-family: Arial;color
HTML:
color: #000000;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:
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:
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:
#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:
<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>alıntı deil alın teridir
