16 Eylül 2013 Pazartesi

23.09.2013

bugün ki ödevim 4 ve 5. maddeler.

4-) buton3 ün yukrısındaki inputbox a yazdığımız değerle h1 in yazı boyutu aynı olacak.
5-) h1 in üstüne geldiğimde verdiğim tüm sınıf özellikleri kalkacak.

buyrun kodlar==>
<script type="text/javascript">
$(document).ready(function(){
$('#tikla').click(function(){

   $( this ).css("color","white");
   $(this).css("background-color","green");
   $(this).css("font","35px");
    $( "#isim").css("color","black");
   $( "#isim").css("background-color","pink");
   $( "#isim").css("font","35px");
 });
  $("#tb1").click(function ()     {         $("#button1").css("color",$(this).val());//"$(this).val()" menü degerini göstermemizi saglar...  
  });
  $("#tb2").click(function ()     {         $("#button2").css("background",$(this).val());//"$(this).val()" menü degerini göstermemizi saglar...  
  });
 $('#button1').click(function(){
$("#button1").css("color",$('select').val());
 $("#isim").css("color",$('select').val());
 });
 $('#button2').click(function(){
$("#button2").css("background",$('select').val());
$("#isim").css("background",$('select').val());
});

 $('#button3').click(function(){
 var bla = $('#text1').val();
 alert(bla)

  $("h1").css('fontSize',bla);

 });
 
  $('#isim').hover(function()
 {
 
     location.reload();
    
 });});

</script>
<title>Untitled Document</title>
</head>
<body>
<input id="tikla" type="button" value="tikla" /><br>
<h1 id="isim">Gülseher</h1>

<select id="tb1">
  <option value="red">Kirmizi</option>
  <option value="blue">Mavi</option> 
  <option value="grey">Gri</option>
  <option value="green">Yesil</option>
<option value="orange">Turuncu</option>
</select><br><br>
 <button id="button1">Ilk buton</button> <br><br>
 <select id="tb2">
 <option selected="selected">SARI</option>
  <option selected="selected">KIRMIZI</option>
  <option selected="selected">YESIL</option>
  <option selected="selected">TURUNCU</option>
</select>
<button id="button2">buton2</button><br>
<p>yazi boyutu : <input id="text1" type="text" name="user"></p>
<button id="button3">buton3</button><br>
</body>
</html>

 

 
H1 İN ÜZERİNE GELDİK SIFIRLADIK==>
 

 
 
 


 
Gönderen zaman: Hiç yorum yok:
20.09.2013

bugün ki ödevim 2 ve 3. maddeler.

2-) ilk butonun üstünden seçtiğimiz renk ilk butonun ve h1 in yazı rengini değiştirecek.
3-)buton ikinin solundan seçtiğimiz renk buton2 nin ve h1 in arkaplan rengini değiştirecek.

burun kodlar===> kırmızı ile yazılı kodlar 2 ve 3. buton için eklediğim kodlar.

<script type="text/javascript">
$(document).ready(function(){
$('#tikla').click(function(){

   $( this ).css("color","white");
   $(this).css("background-color","green");
   $(this).css("font","35px");
    $( "#isim").css("color","black");
   $( "#isim").css("background-color","pink");
   $( "#isim").css("font","35px");
 });
   $("#tb1").click(function ()     {         $("#button1").css("color",$(this).val());//"$(this).val()" menü degerini göstermemizi saglar...  
  });
  $("#tb2").click(function ()     {         $("#button2").css("background",$(this).val());//"$(this).val()" menü degerini göstermemizi saglar...  
  });
 $('#button1').click(function(){
$("#button1").css("color",$('select').val());
 $("#isim").css("color",$('select').val());
 });
 $('#button2').click(function(){
$("#button2").css("background",$('select').val());
$("#isim").css("background",$('select').val());
});
 });
 </script>
</head>
<body>
<input id="tikla" type="button" value="tikla" /><br>
<h1 id="isim">Gülseher</h1>
<select id="tb1">
  <option value="red">Kirmizi</option>
  <option value="blue">Mavi</option> 
  <option value="grey">Gri</option>
  <option value="green">Yesil</option>
<option value="orange">Turuncu</option>
</select><br><br>
 <button id="button1">Ilk buton</button> <br><br>
 <select id="tb2">
 <option selected="selected">SARI</option>
  <option selected="selected">KIRMIZI</option>
  <option selected="selected">YESIL</option>
  <option selected="selected">TURUNCU</option>
</select>
<button id="button2">buton2</button><br></body>
 

 
Gönderen zaman: Hiç yorum yok:
19.09.2013

 
bugün ki konum yukarıdaki görselin hazırlanıp şu işlevleri gerçekleştirmesi=
 
1-) tıkla butonuna bastığımda butonun ve h1 kısmınının hem arkaplan rengi hemde yazı renkleri değişecek.
 
2-) ilk butonun üstünden seçtiğimiz renk ilk butonun ve h1 in yazı rengini değiştirecek.
 
3-)buton ikinin solundan seçtiğimiz renk buton2 nin ve h1 in arkaplan rengini değiştirecek.
 
4-) buton3 ün yukrısındaki inputbox a yazdığımız değerle h1 in yazı boyutu aynı olacak.
 
5-) h1 in üstüne geldiğimde verdiğim tüm sınıf özellikleri kalkacak.
 
 
ilk gün tıkla butonunun işlevini gerçekleştirdim.
 buyrun kodları==>
 
<script type="text/javascript">
$(document).ready(function(){
$('#tikla').click(function(){

   $( this ).css("color","white");
   $(this).css("background-color","green");
   $(this).css("font","35px");
    $( "#isim").css("color","black");
   $( "#isim").css("background-color","pink");
   $( "#isim").css("font","35px");
 });
 });
 </script>
</head>
<body>
<input id="tikla" type="button" value="tikla" /><br>
<h1 id="isim">Gülseher</h1>
</body>
 

tıklamadan önce

 
 

tıkladıktan sonra

 
 

Gönderen zaman: Hiç yorum yok:
18.09.2013
 
Stop
 
 
 
Seçilen hareket halindeki animasyonları durdurmak için kullanılır.
 
kodlar :
$(document).ready(function(){
   $("#start").click(function(){
    $("div").animate({height:300},3000);
    $("div").animate({width:300},3000);
  });
  $("#stop").click(function(){
    $("div").stop();
  });

});
</script>
</head>
<body>
<p>
<button id="start">ANIMASYONA BASLA</button>
<button id="stop">ANINDA DURDUR</button>
</p>
<div style="background:#98bf21;height:100px;width:100px">
</div>
</body>
 
 

Gönderen zaman: Hiç yorum yok:
17.09.2013

VAL
 
Kod kısmında değişkene atadığımız değeri çağırdığımızda geri getirir.
 
buyrun kodlarım ve görseli ====>
 
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("input:text").val("al sana deger ;)");===> inputuma verdiğim değer.  });
});
</script>
</head>
<body>
 <input type="text" name="user">
<button> Giris alaninin degerini göster </button>
</body>
 
tıklamadan önce
 
 tıkladıkdan sonra
 

Gönderen zaman: Hiç yorum yok:
16.09.2013

EACH( )
 
 
Bu yöntem  her eşleşen öğe için ayrı bir fonksiyonu belirtir.mesela bu örneğimde liste elemanları olarak 3 ayrı nesne belirlerim kahve,süt,soda diye butona bastığımda bu üç nesnenin isimlerini ayrı yarı bildirdi.

buyrun koladr ve görseli =====>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
 
});
</script>
</head>
<body>
<button>Tüm liste elemaninin adini SIRASIYLA göster </button>
<ul>
<li>Kahve</li>
<li>SÜT</li>
<li>Soda</li>
</ul>
</body>

 
 

 





Gönderen zaman: Hiç yorum yok:

11 Eylül 2013 Çarşamba

13.09.2013

SLİDEUP-SLİDEDOWN
 
 
SLİDEUP :  Bu yöntemle istediğimiz unsurları sayfamızda gizeleybiliriz.
 
SLİDEDOWN: Bu yöntemle ise gizlediğimiz unsurları geri getirebiliriz. Genelde slideup la birlikte kullanılır.
 

buyrun kodlar ve görseller =====>

<script>
$(document).ready(function(){

  $(".btn1").click(function(){
    $("p").slideUp();
  });
  $(".btn2").click(function(){
    $("p").slideDown();
  });
 
});
</script>
</head>

<body>
<p>gülseher yildirim</p>
<button class="btn1">havali gizle (slide up)</button>
<button class="btn2">havali göster (slide down)</button>

slideup yani gizle butonuna tıklandığında :

 
 
 
 slidedown yani göster butonuna tıklandığında :



 




Gönderen zaman: Hiç yorum yok:
12.09.2013
REMOVE
 
 
Bu yöntem tüm metin ve alt düğümlerini kaldırır. Yani sayfayı tamamen boşaltır.
 
remove classtan farkı remove tüm herşeyi kaldırı removeclass ise sadece sınıf yani css özelliklerini sıfırlar.

 

buyrun kodlar ve gorseli=====>

 

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").remove();
  });


});
</script>
</head>

<body>
<p>gülseher</p>
<p>yildirim</p>
<button>tikla hepsi gitsin</button>

</body>
</html>

tıklamadan önce ekranda yazılar var :

 

 

tıklandıktan sonra işlemi gerçekleştiren buton dışında her şey sıfırlanıyo:





Gönderen zaman: Hiç yorum yok:
11.09.2013

REMOVE CLASS
Seçilen elemanlardan daha önce verilen sınıf özelliklerini geri alma metodudur. Bir önceki konuda sınıf eklemiştik bu metodla eklediğimiz sınıf özelliğini geri çekeceğiz.

buyrun kodlar ve görseli===>

< script>
$(document).ready(function(){
$("button").click(function(){
$("p").removeClass("intro");
});

});
</script>
<style type="text/css">
.intro
{
font-size:120%;
color:red;
}
</style>

< /head>

< body>
<h1>remove class</h1>
<p class="intro">gülseherrrr</p>
<p class="intro">yildirimm</p>

< button> eklenen tüm sinif özelliklerini kaldir </button>


</body>
</html>

TIKLAMADAN ÖNCE :

 

 

 TIKLADIKTAN SONRA :

 
Gönderen zaman: Hiç yorum yok:
10.09.2013
 
ADD CLASS
 
 
Bu eleman sayesinde seçtiğimiz elemanlara sınıf özellikleri verebiliriz.Yani css özelliği falan.

kodlarda ve resimlerde inceleyelim======>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p:first").addClass("intro");
  });
});
</script>
<style>
.intro
{
font-size:150%;
color:red;
}
</style>
</head>
<body>
<h1>ADD CLASS</h1>
<p>BU PARAGRAFA ÖZELLIK EKLENECEK</p>
<p>BU PARAGRAF DEGISMEYECEK</p>
<button>Ilk paragrafa sinif /özellik ekle</button>
</body>
</html>
 
 

 
Gönderen zaman: Hiç yorum yok:
09.09.2013
ATTR
 
 
Bu eleman nesneyi bizim kodlarda verdiğimiz değerlere yani özniteliğine çevirir.
 

 

buyrun kodlar ve resimler=====>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("img").attr("width","500");
  });
});
</script>
</head>
<body>
<img src="abc.jpg" alt="Manzara" width="284" height="213">
<br>
<button>TIKLA GÖR</button>
</body>
</html>
 

tıklamadan önce

 

 tıkladıktan sonra


Gönderen zaman: Hiç yorum yok:
06.09.2013
 
SİZE
 
Belirttiğimiz eleman sayısını belirtir.Mesela ben burada meyve isimlerini listeledim ve size ile sayısını istedim.

kodlara ve göresel bakalım====>

<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("li").size());
  });
});
</script>
</head>
<body>
<button> listedeki eleman sayisi </button>
<ul>
<li>Elma</li>
<li>Armut</li>
<li>Muz</li>
</ul>
</body>
</html>
 
 


Gönderen zaman: Hiç yorum yok:
05.09.2013
MOUSE HOVER
 
 
 
Hover üzerinde anlamına gelir mousehover ise mouse üzerine geldiğinde anlamına gelir.Biz mouse hover a özellik vererek mousemumuz nesne üzerindeyken yaptırmak istediğimiz işlemleri yaptırabilirz.
ben bu örneğimde bir parağraf tanımladım ve mouse yazının üzerine geldiğinde parağrafın arka plan rengi sarı olsun istedim
Kodlarıma ve görseline bakalım..
 
<script>
$(document).ready(function(){
  $("p").hover(function(){
    $("p").css("background-color","yellow");
    },function(){
    $("p").css("background-color","white");
  });
});
</script>
</head>
<body>
<p>paragrafin üzerine gelin sari arkaplan sari olsun...</p>
</body>
</html>

mouse üzerinde değilken

 mouse üzerindeyken

 
Gönderen zaman: Hiç yorum yok:

10 Eylül 2013 Salı

04.09.2013
Bugün önceden de ne işe yaradığını bildiğimiz css i jquery de basit örnekle kullandık.
hatırlamaya çalışırsak css stil özellikleri vemek için kullanılırdı ben bu örneğinde bir parağraf yazıp arkaplan rengini değiltirdim ve yazı boyutunu büyüttüm.
buyrun kodlarına bakalım======>
<script type="text/javascript">
$(document).ready(function(){
  $("p").css({"background-color":"yellow","font-size":"200%"});
});

</script>
yukarıda ki kısım da parağrafımın css özelliklerini tanımladım.
aşağıdaki kodda ise body bölümünde parağrafı oluşturdum..
<body>
<b> bu alanda csss yok aşağıda var </b>
  <p>Bu bölümde daha önceden bilgi sahibi olduğumuz css i jquery ile kullandık...</p>
</body>
 


Gönderen zaman: Hiç yorum yok:
03.09.2013
ANİMATE ( )
 
 
 
 
Jquery animate( ) metodu ile özle animasyonlar yapabilirz. ben en basit örneğiyle anlatmaya çalıştım.
Bir div oluşturup stil kodlarını içide tamamlayarak bir şekil oluşturdum sonra animate komutuyla bu şekli hareket ettirdim.

şimdi kodlarıma bakalım:

$(document).ready(function(){
$('#id').click(function(){
   $(this).animate({left:"200px"},2000);
 });  
});

</script>
<title> JQUERY ANIMATE </title>
</head>
<body>
<div id="id" style="width:250px;height:100px;position:relative;background:#f99;"> gulseher </div>
 

</body>
 
 

resimlerle daha iyi anlarız bence bakalım :) bun bu kodlarla oluşturduğum şekli girdiğim değerlerle sola kaydırdım. daha farklı şeyler de deneyebiliriz.

 
 

 
 

 



 
 
 
 
 

Gönderen zaman: Hiç yorum yok:
02.09.2013
 
 
 
SHOW( )
 
Gizlenen nesneleri göstermede yardımcı olur.
buyrun kodlar
$(document).ready(function(){
 $("#gizle").click(function () {
$("p").hide();
            });
  $("#göster").click(function () {
$("p").show();
  });


 });
 </script>
<title>GÖSTER</title>
</head>
<body>
<input id="gizle" type="button" value="gizle" />
<input id="göster" type="button" value="göster" />
<p> gülseher yildirim</p>
</body>
 
 
resimlere bakınn
show butonundan önce gizle butonuna bastık
 
 
sonra göster butonuna baktık

 
 
 

Gönderen zaman: Hiç yorum yok:
29.08.2013
FADEOUT( )VE FADEİN( )
 
 
 
 
 
 
FADEOUT: Bu yöntemle seçilen elemanlar yavaşça donuklaşır. yaptığım araştırmada bu tanım çıktı ama ben fadein ve faadeout u hide ve showdan ayırt edemedim.
 

 
FADEİN: Bu yöntemle ise belirginleşir.
 
 
 
 
buyrun kodlar
$(document).ready(function(){
$('.gizle').click(function(){
 $('.p').fadeOut();
});
$('.goster').click(function(){
 $('.p').fadeIn();
});
});
</script>
</head>
<Body>
<a href="#" class="gizle">SIMDI YAZIYI GIZLE BAKALIM</a><br/>
<div class="p">
Bilgisayar
 Bilgisayar, belirli komutlara göre veri isleyen ve depolayan bir makinedir. Bilgisayarlar çok
 farkli biçimlerde karsimiza çikabilirler. 20. yüzyilin ortalarindaki ilk bilgisayarlar büyük bir
 oda büyüklügünde olup, günümüz bilgisayarlarindan yüzlerce kat daha fazla enerji tüketiyorlardi.
 21. yüzyilin basina varildiginda ise bilgisayarlar bir kol saatine sigacak ve küçük bir pil ile
 çalisacak hâle geldiler.
</div>
<a href="#" class="goster">AAAA GIZLENDI TIKLADA GERI GELSIN</a><br/>
</body>


Gönderen zaman: Hiç yorum yok:
28.08.2013
HİDE( )  METODU
HİDE( ) :Bu metodla seçilen elemanları gizleyebiliriz.Bu metod gizlemenin en kolay şeklidir,genellikle show yani göster metoduyla kullanılır kodlara bakalım:
 
$(document).ready(function(){
 $("#gizle").click(function () {
$("p").hide();
            });


 });
<body>
<input id="gizle" type="button" value="gizle" />
<p> gülseher yildirim</p>
 
buyrun görselineee
butona tıklamadan önce




butona tıkladıktan sonra
 
 
 

 
 

Gönderen zaman: Hiç yorum yok:

9 Eylül 2013 Pazartesi

27.08.2013
MOUSELEAVE( ) VE MOUSEOUT( )
Mouseleave: Fare işaretçisi seçilen elemenın üzeinden ayrıldığında istediğimiz işlemi geçekleştirir.
buyrun kodalrı ve resimleri====>
$(document).ready(function(){
$("p").mouseleave(function(){
  $("p").css("background-color","gray");
 });
 });
<body>
 <p> deneme gülseher gülseher <p>
</body>
ilk şekli mouse muz üzerindeki hali
 ikinci şeklimizde ise mouse üzerinden ayrıldığı hali
mouseout: Mouseleave ile aynı işlevde ben bir farkını göremedim :)

Gönderen zaman: Hiç yorum yok:
26.08.2012
APPEND( ) VE  PREPEND( )
APPEND( ) :  Bu fonksiyonla seçilen bir öğenin sonuna eklemeler yapabiliriz.
buyrun kodlar ve resim ====>>>>
 
$(document).ready(function(){  
  $('div.isim b').append(' *YILDIRIM*'); 
 });
 </script>
<title>Untitled Document</title>
</head>
<body>
<div class="isim"> <b>GÜLSEHER </b>
</body>
append den önce ======>>>>
 append den sonra ====>










PREPEND( );
Bu fonksiyonla ise seçilen öğenin başına eklemeler yapılabilir.
 $(document).ready(function(){  
  $('div.isim b').prepend(' --GÜLSEHER--'); 
 });
 </script>
<title>Untitled Document</title>
</head>
<body>
<div class="isim"> <b>YILDIRIM </b>
</body>
prepend den önce ===>>>
 prependden sonra ===>>>
 


Gönderen zaman: Hiç yorum yok:

8 Eylül 2013 Pazar

23.08.2013
CLİCK( ) VE HOVER( )
Dün ki ödevim javascript ve jquery araştırmasıydı.Bugünde jquery nin tagı olan click( ) ve hover( ) olayını inceleyeceğim.Bunun için ilk önce jquery de çalışma yapmak için jquery i kurmam lazım ve bunu dünki araştırmamla çok kolay yaptım. 
CLİCK( ) :Click  tıklama manasına gelir.Jquery de click olayı bir tıklama meydana geldiğinde verdiğimiz görevi yerine getirir.Mesela ben bu örneğimde yazının üzerine tıklandığında "parağrafa tıklandı" mesajını vermesini istiyorum.
jquery kurduktan sonra şu kodları yazdım.
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>// jquery nin çalışması için gerekli kod bölümü<script type="text/javascript">

$(document).ready (function(){
$("p").click(function(){
  alert("paragrafa tiklandi");
 });

});
</script>
<title> Click </title>
</head>
<body>
<font color="red" size="24"><p><u>:) TIKLA VE MESAJI GÖR :)</u></p></font>
</body>
</html>
resimlerle inceleyelim ==>

 
 HOVER ( ) : Fare işaretcisini nesnelerin üzerine getirdiğimizde yapmasını istediğimiz işlemleri bu kodla gerçekleştirebilirim...
işte kodlarımmmm

$(document).ready(function(){
 $(".kutu1").hover(function () {
 $(".yazi").show(); },
  function(){$(".yazi").hide()}
 );
});
</script>
<style >
.kutu1 { width:250px; height:100px; background:#CCCC00 ; color:#0033FF;font-size:36px;}
.yazi { font-size:36px; color:pink;}
</style>
<title>HOVER</title>
</head>
<body>
<div class="kutu1">KUTUNUN ÜZERINE GEL</div>
<div class="yazi"><p>HOVER ÖZELLIGINI GÖR;)</p></div>
</body>


ve şimdi de resimlerle bakalım.
ilk hali =====>

sonraki hali===>
 

 

 

Gönderen zaman: Hiç yorum yok:

2 Eylül 2013 Pazartesi

22.08.2013

                JAVASCRİPT VE JQUERY NEDİR ? JQUERY KODLARI ÇALIŞTIRMAK İÇİN YAPILMASI GEREKEN İŞLEMLER NELERDİR?

JAVASCPRİT

Javascript HTML kodalrı ile bir bütündür.Yazılan kodalr web browser tarafından yorumlanır.Yani server tarafından değil de kullanıcı tarafından çalıştırılır.Dolayısıyla javascript ile program yazmaktaki amaç HTML kodları arasına javascript kodları yerleştirmektir.Ayrıca javascript kodları ayrı bir dosya haline getirilerekte kullanılabilir.Yazılma amacı HTML in sahip olmadığı bazı özelliklerin web sayfalarında kullanılmak istenmesidir.
Java ile javascprit birbiriyle karıştırılmamalıdır.Javascript java değildir.Java nesne yönelimli bir programlama dilidir.Javascript bir nesne yönelimli komut sistemi oluşturma dilidir.Java sanal makinede veya tarayıcıdan çalışan uygulamalar olıuşturulur.Javascript sadece sunucuda çalışır.Hareketli animasyonlar ve matematiksel işlemler html kullanışarak yapılabilir.Kontroller yüklenebilir üzerinde değişiklik yapılabilir.
kulanabilmemiz için <script language="javascript"></script> bu kodlar yazılmalıdır..
 
JQUERY
Jquery bir javascript kütüphanesidir.Daha çok sayfalardaki animasyonlar için flash alternatifi olarak kullanılır.jquery teknolojisi ile slaytlar,foto galeriler,tab menüler yapmak oldukça kolaydır.Jquery ile css iç içedir.CSS de yaptığımız statik siteleri jquery yardımı ile bir adım ilerleterek görsel açıdan zengin animasyonlu bir site haline getirebilir.
Jquery yalnızca 1 dosyadan oluşan .js uzantılı bir dosyadır.
JQUERY ANİMATE :Tüm sayısal css komutları ile animasyon oluşturmamızı sağlayan bir jquery komutudur.

.animate( )metodunun  .css( ) metodundan farkı

.animate( ) metodu ile tüm css değişiklikleri belli bir süre içerisinde gerçkeleşir..css( ) metodu ile width değeri değişikliği anında gerçeklerşir..animate( ) metodu ile belli bir süre tanımlarsınız ve değer değişikliği o süre içinde gerçekleşir.sonuç olarakta bu animasyon haline
dönüşür.

JQUERY KURULUMU

İlk önce masaüstünde default isimli bir klasör oluşturalım.Bu klasör içinde de css ve js isimli başka iki klasör daha oluşturalım.Jquery.comdan jqueryi indirelim.js isimli klasör içine kaydedelim.html sayfası oluşturup notpad++ la birlikte açalım.meta komutları altına
<script type="text/javascript" src="js/ js dosya adı.js"> </script>
<script type="text/javascript "$document).ready(function(){
...
});
yazdıktan sonra kurulum tamamlanmış olur .
 



Gönderen zaman: Hiç yorum yok:

29 Ağustos 2013 Perşembe

21.08.2013          
               DİSPLAY NEDİR? NASIL KULLANILIR?
Seçili elemanların tasarımının akışında nasıl etkiler vereceğimizi belirlememizi sağlar.
Aldığı değerlerè
Display:none : Bir elemanın display özelliğine none değeri verdiğimizde  eleman görünmez olur.
Display:inline : Bu değerde elemanlar blok elemanı olarak davranır. Örneğin paragraflar yan yana sıralanır.
Display:block : Bu değerde elemanlar blok elemanı olarak davranır.
Display:listitem : HTML<li> elementleri gibi blok halinde bulunan satır içi öğeler barındıran öğeler üretmek için kullanılır.
Display:inline-block : Bu özellikle ise aynı anda hem blok hem satır içi öğeler üretmek için kullanılır.
Display:run-in :  Bu kodumuz satır bitişini en üste taşır ama tarayıcılıarda çok fark gösterir.
POZİTİON NEDİR?  NASIL KULLANILIR?
CSS aynı zamanda HTML elementlerinin diğer elementlere göre konumunu belirlemenizi sağlar. Bir HTML elementini diğerinin altına ya da üstüne alabilir ve bir HTML elementi fazla büyükse ne yapılacağına kararverebilirsiniz.

Tüm elementler üst (top), alt (bottom), sağ (right) ve sol (left) özelliklerine sahiptir. Ancak bu özellikler CSS'deki position özelliği belirtilmemişse işe yaramayacaktır. Ayrıca birbirinden farklı dört pozisyon belirleme yöntemi vardır. Bunlar:
  • static - Hiçbir özellik belirtilmediyse
  • fixed - Sabit, tarayıcıya göre hareket etmeyen element
  • relative - Normal olması gereken pozisyona göre konum belirlemek
  • absolute - Koordinat belirleyerek sayfada bir yere yerleştirmek
static: Olması Gerektiği Gibi Bırakmak
Eğer position CSS kodunu hiç kullanmadıysak HTML nesneleri olduğu gibi sıralanacaktır. Bu şekilde olursa HTML elementinin alt, üst, sağ ve sol özellikleri belirlenemez.
fixed: Sabitlemek
Bir HTML elementini tarayıcı ekranına sabitlemek. Kaydıracı (scroll) kullansanız bile o element orada yer alacaktır (hareket etmez).
 p.fixed
{ position: fixed;
top: 30px;
right: 5px;
}

Yukarıdaki kod çalıştırılırsa "fixed" özelliğine sahip P elementinin sağdan 5 piksel üstten 30 piksel noktasında sabit bir şekilde kaldığını göreceğiz.

Bu tarz elementler bir diğerinin üzerine geçebilir ve diğerini kapatabilir.
relative: Normal Pozisyona Göre Konumlama
Bir HTML elementini sahip olduğu pozisyondan yukarı, aşağı, sağa ve sola doğru ayarlamamızı sağlar. Elementin kapladığı alan tarayıcı tarafından tutulmuştur, dolayısıyla bunda bir değişiklik olmaz. Ancak biz sağ, sol, alt ve üst tarafa doğru hareket ettirebiliriz.
 h2{position: relative;
                     left: -20px;
          }

Yukarıdaki örnekte H2 elementi kullanıldığı yerden 20 piksel sola kayacak ve oradan başlayacaktır. Bu durumda diğer elementlerin alanına girebilecektir.
absolute: Herhangi Bir Konum Belirleme
Herhangi bir elemente göre ya da element belirtilmediyse tüm HTML sayfasına göre yer alacağı konum piksel olarak ifade edilir. Örneğin H2 elementinin sayfanın başlangıç noktasının (0, 0) 100 piksel sağında ve 150 piksel altında (100, 150) olmasını istiyorsak:
 h2 {position: absolute;  
left: 100px;  top: 150px;}

Bu tarz belirlenen pozisyonlar RELATIVE'den farklı olarak alan kaplamazlar. Yani sayfamızdan soyutlanmışlardır. Bağımsız hareket eden ve sadece tek bir başlangıç noktasını dikkate alan elementler gibi düşünülebilir.

"Absolute" özellikli elementler diğer elementlerin üzerine geçebilir ve onları kapayabilir.
Z-İNDEX NEDİR? NASIL KULLANILIR?
z-index, konumlandırma elementleri uygulanmış katmanların z-eksenindeki konumu belirlemek için kullanılır.
z-index tüm elementlere uygulanamaz sadece konumlandırma değeri atanmışelementlere uygulanır. Bunun anlamı eğer bir elementi aynı z-ekseni üzerinde üste veya alt sıraya atmak istiyorsanız ilk olarak konumlandırma değeri atamalısınız.
img
   {
      position: absolute
      left: 0px;
      top: 0px;
 
      z-index: -1;
   }
 
 

Gönderen zaman: Hiç yorum yok:
Kaydol: Kayıtlar (Atom)