yazilim
09-01-2008, 17:25 PM
Tüm anlatımlarda “sayfa” web sayfası(dokümanı) manasında, “eleman” web sayfasındaki bir nesne(textbox,table vs.) manasında, “nitelik” elemanın özelliği(attribute) manasında kullanılmıştır. Ayrıca aksi belirtilmedikçe tüm örnekler Cross-Browserlar ile çalışır biçimde anlatılacaktır.
Tarayıcılara Özgü Standartlar:
Netscape Navigator 4.x
Cross-Browser
Internet Explorer 4.x
JSS (JavaScript Style Sheets)
Katmanlar CSS1
CSS2
CSS Positioning
JavaScript Görsel Filtreler
Dinamik CSS
CSS-P Özellikleri: Öncelikle elemanın pozisyon niteliği belirtilmelidir. (absolute yada relative)
left – elemanın sol pozisyonu
top – elemanın üst pozisyonu
visibility – eleman görünür mi görünmez mi
z-index – elemanın istif sırası
clip – elemanı belli yerlerinden kesme
overflow – içerik taşmaları kontrolü
Filtreler: Filtreler ile yazılarınıza ve resimlerinize çeşitli efektler verebilirsiniz. Bu özelliği kullanmak istediğiniz elemanın genişliğini(width) mutlaka belirtin. Bazı filtreler background-color özelliği transparent olarak ayarlanmadıkça çalışmayacaktır.
Filtre
Argüman
Açıklama
Örnek
alpha
opacity
finishopacity
style
startx
starty
finishx
finishy
Elemanın opaklığını ayarlamanızı sağlar
filter:alpha(opacity=20, finishopacity=100, style=1, startx=0,
starty=0, finishx=140, finishy=270)
blur
add
direction
strength
Elemanın netliğini ayarlamanızı sağlar
filter:blur(add=true, direction=90, strength=6);
chroma
color
Belirtilen rengi transparan yapar
filter:chroma(color=#ff0000)
fliph
yok
Elemanı yatay döndürür
filter:fliph;
flipv
yok
Elemanı dikey döndürür
filter:flipv;
glow
color
strength
Elemana glow efekti verir
filter:glow(color=#ff0000, strength=5);
gray
yok
Elemanı siyah-beyaz hale getirir
filter:gray;
invert
yok
Elemanın renklerini ve aydınlığını ters çevirir
filter:invert;
mask
color
Elemanı belirtilen arkaplan rengyile ve transparan ön plan rengiyle kaplar.
filter:mask(color=#ff0000);
shadow
color
direction
Elemana gölge ekler
filter:shadow(color=#ff0000, direction=90);
dropshadow
color
offx
offy
positiv
Elemana dropshadow ekler
filter:dropshadow(color=#ff0000, offx=5, offy=5, positive=true);
wave
add
freq
lightstrength
phase
strength
Elemanı dalgalı hale getirir
filter:wave(add=true, freq=1, lightstrength=3, phase=0, strength=5)
xray
yok
Elemanı ters renk ve aydınlıkla siyah-beyaz hale getirir
filter:xray;
DOM(Doküman Obje Modeli): Sayfadaki her elemana erişebilmemizi sağlar. Cross-Browserlar için ortak bir DOM modeli kullanılmaktadır. (NS 4.x ve IE 4.x için farklı yöntemlerle sayfa elemanlarına erişilebiliriz. Yeri geldiğinde bunlardan bahsedeceğim.) İstediğimiz elemana erişebilmek için o elemana bir “id” belirtmeliyiz tabi ki birde bu elemana erişmek için kullanılacak bir script dili ki biz javascript kullanacağız. Ufak bir örnek vereyim:
<html>
<head>
<span id="text">Deneme Yazısı</span>
<script type="javascript">
document.getElementById('text').style.color="red"
</script>
</body></html>
HTML 4.0 Event-Handlerları (Event Handlar = Olay tutucusu yada yöneticisi)
Aşağıda belirtilen olaylar yardımıyla sayfadaki elemanlar denetlenebilir yada istediğimiz olay(tetikleme) gerçekleştiğinde bunu kontrol edebiliriz. Bu eventler tüm cross-browserlar tarafından desteklenir.
Event (Olay)
...... olduğunda olur
onabort
sayfa yüklenmesi iptal edilirse
onblur
eleman terk edilirse
onchange
elemanın değeri değiştirilirse
onclick
elemana tıklanırsa
ondblclick
elemana çift tıklanırsa
onfocus
eleman aktive edilirse
onkeydown
tuşa basılı tutulursa
onkeypress
tuşa basılırsa
onkeyup
tuşa basıp bırakılırsa
onload
sayfa yüklendikten sonra Not: Netscape bu olayı sayfa yüklenirken gerçekleştirir. Tam yüklenmesini beklemez.
onmousedown
fare butonuna basılırsa
onmousemove
fare imleci bir elemanın üzerinde hareket ederse
onmouseover
fare imleci bir elemanın üzerine gelirse
onmouseout
fare imleci bir elemanın üzerinden ayrılırsa
onmouseup
fare butonuna basılıp bırakılırsa
onreset
form resetlenirse
onselect
sayfadan bir içerik seçilirse
onsubmit
form gönderilirse
onunload
sayfa kapatılırsa
Tarayıcılara Özgü Standartlar:
Netscape Navigator 4.x
Cross-Browser
Internet Explorer 4.x
JSS (JavaScript Style Sheets)
Katmanlar CSS1
CSS2
CSS Positioning
JavaScript Görsel Filtreler
Dinamik CSS
CSS-P Özellikleri: Öncelikle elemanın pozisyon niteliği belirtilmelidir. (absolute yada relative)
left – elemanın sol pozisyonu
top – elemanın üst pozisyonu
visibility – eleman görünür mi görünmez mi
z-index – elemanın istif sırası
clip – elemanı belli yerlerinden kesme
overflow – içerik taşmaları kontrolü
Filtreler: Filtreler ile yazılarınıza ve resimlerinize çeşitli efektler verebilirsiniz. Bu özelliği kullanmak istediğiniz elemanın genişliğini(width) mutlaka belirtin. Bazı filtreler background-color özelliği transparent olarak ayarlanmadıkça çalışmayacaktır.
Filtre
Argüman
Açıklama
Örnek
alpha
opacity
finishopacity
style
startx
starty
finishx
finishy
Elemanın opaklığını ayarlamanızı sağlar
filter:alpha(opacity=20, finishopacity=100, style=1, startx=0,
starty=0, finishx=140, finishy=270)
blur
add
direction
strength
Elemanın netliğini ayarlamanızı sağlar
filter:blur(add=true, direction=90, strength=6);
chroma
color
Belirtilen rengi transparan yapar
filter:chroma(color=#ff0000)
fliph
yok
Elemanı yatay döndürür
filter:fliph;
flipv
yok
Elemanı dikey döndürür
filter:flipv;
glow
color
strength
Elemana glow efekti verir
filter:glow(color=#ff0000, strength=5);
gray
yok
Elemanı siyah-beyaz hale getirir
filter:gray;
invert
yok
Elemanın renklerini ve aydınlığını ters çevirir
filter:invert;
mask
color
Elemanı belirtilen arkaplan rengyile ve transparan ön plan rengiyle kaplar.
filter:mask(color=#ff0000);
shadow
color
direction
Elemana gölge ekler
filter:shadow(color=#ff0000, direction=90);
dropshadow
color
offx
offy
positiv
Elemana dropshadow ekler
filter:dropshadow(color=#ff0000, offx=5, offy=5, positive=true);
wave
add
freq
lightstrength
phase
strength
Elemanı dalgalı hale getirir
filter:wave(add=true, freq=1, lightstrength=3, phase=0, strength=5)
xray
yok
Elemanı ters renk ve aydınlıkla siyah-beyaz hale getirir
filter:xray;
DOM(Doküman Obje Modeli): Sayfadaki her elemana erişebilmemizi sağlar. Cross-Browserlar için ortak bir DOM modeli kullanılmaktadır. (NS 4.x ve IE 4.x için farklı yöntemlerle sayfa elemanlarına erişilebiliriz. Yeri geldiğinde bunlardan bahsedeceğim.) İstediğimiz elemana erişebilmek için o elemana bir “id” belirtmeliyiz tabi ki birde bu elemana erişmek için kullanılacak bir script dili ki biz javascript kullanacağız. Ufak bir örnek vereyim:
<html>
<head>
<span id="text">Deneme Yazısı</span>
<script type="javascript">
document.getElementById('text').style.color="red"
</script>
</body></html>
HTML 4.0 Event-Handlerları (Event Handlar = Olay tutucusu yada yöneticisi)
Aşağıda belirtilen olaylar yardımıyla sayfadaki elemanlar denetlenebilir yada istediğimiz olay(tetikleme) gerçekleştiğinde bunu kontrol edebiliriz. Bu eventler tüm cross-browserlar tarafından desteklenir.
Event (Olay)
...... olduğunda olur
onabort
sayfa yüklenmesi iptal edilirse
onblur
eleman terk edilirse
onchange
elemanın değeri değiştirilirse
onclick
elemana tıklanırsa
ondblclick
elemana çift tıklanırsa
onfocus
eleman aktive edilirse
onkeydown
tuşa basılı tutulursa
onkeypress
tuşa basılırsa
onkeyup
tuşa basıp bırakılırsa
onload
sayfa yüklendikten sonra Not: Netscape bu olayı sayfa yüklenirken gerçekleştirir. Tam yüklenmesini beklemez.
onmousedown
fare butonuna basılırsa
onmousemove
fare imleci bir elemanın üzerinde hareket ederse
onmouseover
fare imleci bir elemanın üzerine gelirse
onmouseout
fare imleci bir elemanın üzerinden ayrılırsa
onmouseup
fare butonuna basılıp bırakılırsa
onreset
form resetlenirse
onselect
sayfadan bir içerik seçilirse
onsubmit
form gönderilirse
onunload
sayfa kapatılırsa