Zingocan | jQuery, CSS, Wordpress Dersleri » Cascading Style Sheets http://zingocan.com Bir Başkadır bu Wordpress Sitesi Sat, 07 Jan 2012 00:01:17 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 jQuery ScrollTo Plugini Nasıl Kullanılır http://zingocan.com/jquery-scrollto-plugini-nasil-kullanilir.html http://zingocan.com/jquery-scrollto-plugini-nasil-kullanilir.html#comments Wed, 23 Jun 2010 11:49:49 +0000 admin http://zingocan.com/?p=4704 Continue reading →]]> Merhabalar.. Bugün sizlere, çoğu yabancı ve birkaç tane de türk blogunda yer alan, sonraki konu ya da yorumlara atla gibi jQuery ScrollTo Pluginini nasıl kullanırız onu göstereceğim.. Zaten şurada mevcut olan jQuery Pluginimizi öncelikle indirmemiz gerekiyor. Ve de jQuery scriptimizi şuradan indirebilirsiniz.

http://zingocan.com/wp-content/uploads/jquery-scrollto.png

Birazdan sizler için ekleyeceğim demo da bi sonraki , bir önceki, yorumlar ve yorum bırak diye 4 adet link yerleştireceğim. Linkleri dilediğimiz gibi çoğaltabileceğimizi ,kendimize ait bir katman oluşturup artık sizin yaratıcılığınızla farklı şeyler de elde edebiliriz. İlk olarak plugini ve ne anlatmak istediğimi anlamak için demoyu inceleyiniz.

http://zingocan.com/wp-content/uploads/demo1.pnghttp://zingocan.com/wp-content/uploads/download.png

2 jQuery scriptimizin yanında 3 adet bölümden oluşan bir ders anlatacağım. Bunlara artık bildiğiniz gibi HTML ile başalyalım;

HTML Kodları

Arkadaşlar, bu özellik genelde wordpress bloglarında işe yaradığı için sanki worpdress temasına entegre ediyormuş gibi anlatacağım, oysaki dilediğiniz yerde kullanabilirsiniz.. Örneğimizi açıklarken şöyle bir şey daha açıklayayım; düşünelim ki bir wordpress temamız var ve wordpress temasının bütün blog yazılar post sınıfına dahil olsun. Yani her blog başlamadan önce bir post sınıflı katman açılsın. Buna göre uygularsak HTML kodlarımız şu şekilde olacaktır;

<div class="post">
	içerik..
</div>

<div class="post">
	içerik...
</div>

<div class="post">
	içerik...
</div>

CSS Kodları

Arkadaşlar, CSS kodların yapmamız gereken tek değişiklik, yan tarafta duracak olan navigasyon panelimize, CSS derslerinde de bahsettiğim gibi, position:fixed değerini veriyoruz.

#navigasyon-cubuk {
	position: fixed;
	right: 15px;
	top: 35%;
}

Javascript

Zaten hali hazırda var olan plugine javascript kadlarıyla bir açıklık getirmemiz gerekiyor. Bunun için anonim fonksiyonlardan yararlanacağız.Tabi bundan önce her demo da olduğu gib, <head> etiketlerimizin arasına aşağıda verdiğim scriptlerin yollarını göstermemiz gerekiyor;

&amp;amp;lt;script type=&amp;amp;quot;text/javascript&amp;amp;quot; src=&amp;amp;quot;js/jquery-1.4.2.min.js&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/script&amp;amp;gt;
&amp;amp;lt;script type=&amp;amp;quot;text/javascript&amp;amp;quot; src=&amp;amp;quot;js/jquery.scrollTo-min.js&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/script&amp;amp;gt;
&amp;amp;lt;script type=&amp;amp;quot;text/javascript&amp;amp;quot;&amp;amp;gt;

Yukarıda son satırda bulunan kod birazdan ekleyeceğimiz anonim fonksiyonun başladığını gösteriyor.Scriptin amacı; ilk olarak kullanıcı sonraki butonuna tıkladığında, akordiyon şeklinde diğer yazıya yani diğer post sınıfına göderiyor bizi.

İkinci olarak;seçilen bölümün içeriği, pluginde var olan kodlar sayesinde bize thumb gösterimi ayarlıyor. Bu seçenek aslında sadece bir dahaki yazı gibi görünsede , blog içerisinde sadece sonraki ve önceki yazı olarak gösterilip ,yazı sayfalarında (single.php) yorumlar ve yorum yap diye iki adet daha eklenti kurulabilir. Örnekte hepsi bir arada gösterilmiştir.

$(function() {

 function scroll(direction) {

 var scroll, i,
 positions = [],
 here = $(window).scrollTop(),
 collection = $('.post');

 collection.each(function() {
 positions.push(parseInt($(this).offset()['top'],10));
 });

 for(i = 0; i &amp;amp;lt; positions.length; i++) {
 if (direction == 'ileri' &amp;amp;amp;&amp;amp;amp; positions[i] &amp;amp;gt; here) { scroll = collection.get(i); break; }
 if (direction == 'geri' &amp;amp;amp;&amp;amp;amp; i &amp;amp;gt; 0 &amp;amp;amp;&amp;amp;amp; positions[i] &amp;amp;gt;= here) { scroll = collection.get(i-1); break; }
 }

 if (scroll) {
 $.scrollTo(scroll, {
 duration: 750
 });
 }

 return false;
 }

 $(&amp;amp;quot;#ileri,#geri&amp;amp;quot;).click(function() {
 return scroll($(this).attr('id'));
 });

 $(&amp;amp;quot;.scrolltoanchor&amp;amp;quot;).click(function() {
 $.scrollTo($($(this).attr(&amp;amp;quot;href&amp;amp;quot;)), {
 duration: 750
 });
 return false;
 });

});

http://zingocan.com/wp-content/uploads/demo1.pnghttp://zingocan.com/wp-content/uploads/download.png

]]> http://zingocan.com/jquery-scrollto-plugini-nasil-kullanilir.html/feed 0 CSS Pseudo Sınıfları – Özel Efektler http://zingocan.com/css-pseudo-siniflari-ozel-efektler.html http://zingocan.com/css-pseudo-siniflari-ozel-efektler.html#comments Fri, 11 Jun 2010 18:14:00 +0000 admin http://zingocan.com/?p=4602 Continue reading →]]> CSS pseudo-classes bazı seçicilere özel efekt vermemizi sağlayan bir sınıftır. Bu verilen adın Türkçe açıklaması olmadığı ya da tam karşılanmadığı için orjinal ismini yazdım.. CSS içerisinde bazen özel efektlere ihtiyac duyarız.. Bunlar pseudo sınıfları içerisinde XHTML’e atayacağımız bazı seçicilerin kendi özelliklerinin dışına vurulmuş halidir.

Söz Dizimi

pseudo-classes söz dizimi şu şekilde oluşturulur;

seçici:pseudo-class {özellik:değer;}

Sınıflar da pseudo-classes içerisinde şu şekilde kullanılır;

seçici.sınıf:pseudo-class {özellik:değer;}

Anchor Pseudo-classes

Sayfa içerisindeki linkler farklı tarayıcılara göre farklı gösterimleri mevcuttur.. Linklere özel anonim değerler eklenmedikçe şu şekilde CSS özelliği katılabilir;


a:link {color:#FF0000;}      /*ziyaret edilmemiş link */
 a:visited {color:#00FF00;}  /* ziyaret edilmiş link */
 a:hover {color:#FF00FF;}  /*mouse over linki */
 a:active {color:#0000FF;}  /* seçilen link */

Daha önceki derslerimizden de bildiğiniz gibi mouse over, linkin üzerine mouse ile gelinmesi demekti.

[message type="info"] a:hover özelliği , a:link ve a:visited CSS tanımlamalarından sonra gelmelidir.

a:active özelliği, a:hover CSS tanımlamasından sonra gelmelidir.

Pseudo-class isimleri büyük küçük harf duyarlısı değildir.[/message]

Pseudo-sınıfları ve CSS Sınıfları

Pseudo-sınıfları CSS sınıfları ile kombine edilebilir;

a.kirmizi:visited {color:#FF0000;}

<a href="css-dersleri.html">CSS Dersleri</a>

Yukarıdaki örnekte olan link eğer daha önce ziyaret edilmişse, link kırmızı görünecektir.

CSS First-chlild Pseudo-sınıfı

First-child den kastımız belirlenen seçici arasındaki ilk elemandır..Şöye bir örnekleme düşünülebilir, eğer iki adet paragraf elemanınız varsa ve bunların hergangi bir sınıfı yoksa, first-child özelliği ile ilk p elemanına etki edebilir, bu elemana çeşitli CSS özellikleri katabiliriz.Örnek;



 


 

 

jQuery ve CSS Dersleri.

jQuery ve CSS Dersleri.

Yukarıda iki adet p tag’i bulunuyor, lakin ilk p elemanı mavi renkte diğeri ise default değerindedir.

Şimdi de Bütün <p> elemanlarının ilk <i> elemanına etki edelim;



 


 

 

jQuuery ve CSS dersleri. jQuery ve  CSS dersleri

jQuuery ve CSS dersleri. jQuery ve   CSS dersleri

Yukarıdaki örneği göze alacak olursak birinci cümledeki CSS <i> tag’i mavi değeri almış fakat ikinci cümlelerdeki almamıştır.. Bu da yukarıda bahsedilen sadece <p> tag’leri içerisindeki ilk <i> elemanlarına etki ettiğimiz için oluşmuştur.

Şimdi de ilk <p> elemanının bütün <i> elemanlarına etki edelim;



 


 

 


jQuuery ve CSS dersleri. jQuery ve   CSS dersleri




jQuuery ve CSS dersleri. jQuery ve   CSS dersleri

Gördüğünüz gibi bu defa da ilk <p> elemanının bütün <i> elemanlarına etki etmiş olduk.. Yukarıda verdiğim örnekleri bir not defterinde .html kalıbında tarayıcınızda açarsanız daha iyi anlayacağınızı umuyorum.

Bütün Pseudo sınıflarına ait tablo aşağıdadır.

Pseudo-classes

Pseudo ismi Açıklaması
:active Eleman aktif olduğunda verilebilecek stil.
:first-child Bir elemanın başka bir ilk elemanına stil verir.
:focus Klawye odaklı bir stil ekler.
:hover Belirlenen elemanın mouse ile üzerine gelindiğinde verilen stil.
:lang Bir elemana belirlenen bir lang özelliği ekler.
:link Ziyaret edilmemiş linklere stil verir.
:visited Ziyaret edilmiş linklere stil verir.
]]> http://zingocan.com/css-pseudo-siniflari-ozel-efektler.html/feed 4 CSS Align – Hizalama http://zingocan.com/css-align-hizalama.html http://zingocan.com/css-align-hizalama.html#comments Wed, 09 Jun 2010 22:17:36 +0000 admin http://zingocan.com/?p=4598 Continue reading →]]> Merhaba arkadaşlar.. Bu CSS dersimizde de CSS Align olarak birkaç bölüme ayıracağım Yüzey alanı parametresini daha önce gördüğümüz CSS margin özelliği ile birlikte kullanıp, backgorund  – color özelliklerini göstereceğim.

CSS içerisinde bazı özellikler yatay elemanları hizalamak için kullanılır. Align bunlardan biridir.

Blok Elemanlarını Hizalama

Blok elemanlarından kastımız sayfa boyunca ilerleyen ve Default ayarlarında herhangi bir kısıtlama ya da hizalama kullanmayan elemanlardır.Bunlara örnek verecek olursak;

  • <h1>
  • <p>
  • <div>

gibi elamanlardır. Text align (yazı hizalama) özelliği için CSS Yazı başlığımızı inceleyebilirsiniz.

Bu bölümde birkaç CSS özelliğini kullanarak elemanları hizalamayı göstereceğim

Margin Özelliğini Kullanarak Orta Hizalama

Blok elemanları sağ ve sol margin özelliğini kullanarak yatay hizalama kullanılabilir.

margin:auto özelliği Eğer !DOCTYPE bilgisi yoksa İnternet Explorer’da çalışmaz.

Ayarları margin:auto içerisine gömüp, belirlediğimiz alana farklı değerler de atayabiliriz. Ufak bir örnek verelim ne dersiniz;


.center
 {
 margin-left:auto;
 margin-right:auto;
 width:70%;
 background-color:#b0e0e6;
 }

Yukarıda center sınıfına ait bölgeyi sayfanın ortasında yatay boşluğun %70 ini kullanarak oluşturduk.

Hizalama genişlik %100 olduğu zaman bir anlam oluşturmayacaktır.

Position Özelliğini Kullanarak sağ ve sol Hizalama

Position absolute özelliği ile hizalama yöntemi kullanılır.


.sag
 {
 position:absolute;
 right:0px;
 width:300px;
 background-color:#b0e0e6;
 }

Yukarıda sag sınıfını bir paragraf elemanı ile birlikte kullandığımızda paragrafın sap tarafa dayalı olarak oluşturduk.

Crossbrowser Tarayıcı Uyumluluğu

margin, paddin ve position özelliklerini kullanırken belki deneme yaptığımız tarayıca gözümüze güzel görünsede sayfamız, farklı tarayıcılarda farklı görünümler oluşabilir.

Bir de internet explorer derdimiz mevcut. Diyelim ki biz bir id’nin position değerini belirledik ve !DOCTYPE bilgilendirmesini girmedik. Bu defa internet explorer 17px değerinde bir margin (boşluk değeri) bırakacaktır. !DOCTYPE bilgisi verip aşağıdaki yazım şeklini kullanırsak hergangi bir boşluk değeri oluşmayacaktır;


body
 {
 margin:0;
 padding:0;
 }
 .container
 {
 position:relative;
 width:100%;
 }
 .right
 {
 position:absolute;
 right:0px;
 width:300px;
 background-color:#b0e0e6;
 }

Float özelliğini kullanarak sağ ve sol Hizalama

Float sağ ya da sol özelliğini kullanarak aşağıdaki gibi hizalama yapılabilir;


.right
 {
 float:right;
 width:300px;
 background-color:#b0e0e6;
 }

Buda float kullanılarak yaptığımız bir hizalama şekliydi. Yukarıda dediğim gibi birçok şekilde hizalama (align) sistemi  yazılabilir.. Float için de aşağıdaki gibi tarayıcı uyumu oluşturulabilir;


body
 {
 margin:0;
 padding:0;
 }
 .right
 {
 float:right;
 width:300px;
 background-color:#b0e0e6;
 }
]]> http://zingocan.com/css-align-hizalama.html/feed 0 CSS Floating – Sabit Olmayan Nesneler http://zingocan.com/css-floating-sabit-olmayan-nesneler.html http://zingocan.com/css-floating-sabit-olmayan-nesneler.html#comments Wed, 09 Jun 2010 21:45:44 +0000 admin http://zingocan.com/?p=4595 Continue reading →]]> Merhaba arkadaşlar.. CSS Advanced kategorisinde CSS Floating adındaki WordPresste bir nevi Thumb olarak da adlandırılabilecek olan resimlerimizi yazılarımız ile bir kullanabileceğimiz ve bununla da sınırlı olmayan birkaç CSS float özelliğini göstereceğim.

CSS Float Nedir?

CSS Float özelliği ile birlikte, bir elemanı diğerlerinden bağımsız olarak sağ ya da solda gösterip, elemanın gerisinde kalan alanları (aşağı ya da yukarı gibi) boşluk olarak değerlendirip oaralarıda kullanabileceğimiz sayfalar yapabiliriz.

Elemanlar Nasıl Float Edilir?

Bir eleman yatay (horizontal) olarak kullanılır, eleman yalnız sağ ya da sol tarafta float edilebilir, aşağı  ya da yukarı float kabul edilmez.Yukarıda da bahsettiğim gibi sayfanın içerisine bir resim gömmeyi planladığımız vakit resmin sağ ya da sol taraflarına tam olarak yazı sığdırılamamakta yalnızca resmin en alt bölgesinde bir satırlık yazı gösterilebilmekteydi. Float özelliği sayesinde yazıları resimlerin etrafını dolduracak şekilde gösterebiliriz.

Eğer bir eleman sağ tarafa float edilmişse, yazılar sol tarafta sağ tarafa float edilmişse yazılar sağ tarafta kalacaktır.Örnek olarak;


img
 {
 float:right;
 }

Yukarıda resmi sağ tarafta kullanıp ondan sonra gelecek yazılar ise sol tarafta kalacaktır.

Sonraki Elemanları Floatlamak

Eğer birden fazla float eleman kullanacaksanız art arda gelecek bütün resimleri floatlayabilirsiniz.

Örnek için;


.resimler
 {
 float:left;
 width:110px;
 height:90px;
 margin:5px;
 }

Floatı Kapatmak

Eğer daha önce bir float özelliği kullandıysanız ve bu float edilmiş öğeye etki eden ya da yakınlarında olan diğer elemanları floatın etkisinden kurtarmak isterseniz CSS clear özelliğini kullanabilirsiniz;


.yazilar
 {
 clear:both;
 }

Yukarıda verdiğim örneğin işleyebilmesi için bir üstteki örnekte bulunan CSS floatında CSS özellikleri içerisinde olması gerekir.. Yoksa birşey ifade etmeyecektir.. Daha geniş kapsamlı hem de daha önce öğrendiğimiz konuları işleyerek bir örnek kod oluşturacak olursak;

horizonral menu (float ile birlikte)


&lt;html&gt;
&lt;head&gt;
&lt;style type=&quot;text/css&quot;&gt;
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Mwnu 3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Menu 4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;
Bu örnekte CSS Float özelliği ile birlikte henüz görmediğimiz hover efektini kullandık.
Yukarıda CSS float kullanılarak yatay menü yaptık..&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;

Bu dersten sonraki yazılarımda bolca örnekleme yapmya çalışıp, daha önce gördüğümüz CSS özelliklerini birlikte kullanmayı öğreneceğiz.. Hepinizin ilgisi için çok teşekkür ederim.. Güneşli günler..

]]> http://zingocan.com/css-floating-sabit-olmayan-nesneler.html/feed 3 CSS Grup ve Yuva Seçicileri http://zingocan.com/css-grup-ve-yuva-secicileri.html http://zingocan.com/css-grup-ve-yuva-secicileri.html#comments Sat, 05 Jun 2010 19:38:48 +0000 admin http://zingocan.com/?p=4574 Continue reading →]]> Merhaba arkadaşlar.. CSS Stilleme ve CSS Kutu Modelleme derslerinden sonra son şimdi de CSS İleri Seviye derslerine başlıyoruz..

İlk konumuz CSS içerisinde kullanabileceğimiz yuvalama ve gruplama işlemidir..İlk önce grup seçicilerinden bahsedelim

CSS Grup Seçicileri

CSS derslerimiz boyunca aşağıda gördüğünüz şekilde CSS stil kodlarıını oluşturuyorduk;

<pre>

h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

</pre>

Bu stil kodlarını daha az kod kullanarak css grup seçicileri sayesinde yapabiliriz.Bu işlem aşağıda gördüğünüz üzere, her seçici arasına bir virgün koyarak gerçekleştirilir,

h1,h2,p
{
color:green;
}

Buradaki yazım ile yukarıdaki yazım arasında fark yoktur.. Daha az kod kullanmak için aynı değişkenleri içeren seçicileri bir tutmak için grup seçicilerini kullanabilirsiniz.

CSS Yuvalama İşlemi

Yuvalama işlemi ise, bir seçicinin herhangi bir id ya da sınıfına farklı özellikler yüklemek için daha kısa kod kullanmak adına tekrar seçiciyi girmemek için yapılan bir yöntemdir.. Aşağıdaki örnekte olduğu gibi yapılan kod diziminde normalden daha az kod kullanılmıştır,


p
{
color:blue;
text-align:center;
}
.marked
{
background-color:blue;
}
.marked p
{
color:white;
}

grup ve yuva işlemleri bu kadar.. Diğer dersimizde görüşürüz.

]]> http://zingocan.com/css-grup-ve-yuva-secicileri.html/feed 5 CSS Padding Özelliği http://zingocan.com/css-padding-ozelligi.html http://zingocan.com/css-padding-ozelligi.html#comments Thu, 03 Jun 2010 13:16:39 +0000 admin http://zingocan.com/?p=4545 Continue reading →]]> CSS Margin e bir alternatif olarak düşünülen fakat aslında bambaşka bir özellik olan padding ise kullanımı margin gibi olan fakat bu çerçevede ayıracağımız boşluğu, çerçeve, başka bir katmandan uzaklaşma, bir nesneye olan uzaklık olarak değer katılır.. Padding özelliği ile, örneğin; bir yazınınza çerçeve eklediyseniz yada background color özelliği verdiyseniz, bu background’unuzu ya da çerçeveyi dilediğiniz kadar uzatma, ya da o belirlediğiniz çerçeveyi yazıdan uzaklaştırma işlevi gibi düşünülebilir.

Olası Değerler

Değer Açıklama
length pixex, pt, em gibi değerler kullanılır.
% Değer % olarak kullanılır.

Bireysel Paddin Özellikleri

Padding özelliği de margin de olduğu gibi bireysel şemalar kullanılabilir.. Bu ayarlar top, left, right ve bottom şeklinde yön belirtirler.Örnek;


padding-top:25px;
 padding-bottom:25px;
 padding-right:50px;
 padding-left:50px;

Farkındaysanız margin özelliği ile tıpa tıp aynı gibi görünüyor.. Fakat buradaki değişkenimiz padding olarak ayarlı.. Yukarıda padding açıklamasını yaptığım için daha fazla irdelemiyorum.

Margin de olduğu gibi padding içerisinde de kısa kodları kullanabiliriz ve bu kodlara ancak 4 değere kadar atama yapabiliriz.Bunlar top, left, right ve bottom şeklindedir.

Top: yukarıdan alacağı değer

left: soldan alacağı değer

right: sağdan alacağı değer

bottom: aşağıdan alacağı değer.

Örnek;


p.ex1 {padding:2cm;}
p.ex2 {padding:0.5cm 3cm;}

Yukarıda ex1 sınıfının tüm padding değerleri 2cm iken, ex2 sınıfının sağ ve sol değeri 3cm, aşağı ve yukarı değerleri ise 0,5cm ‘dir.

padding:1px 2px 3px 4px şeklinde yapılacak sıralama da

top, right, bottom ve left sıralaması hakimdir.

Bütün CSS Padding Özellikleri

Özellik Açıklama Değerler
padding Bütün shorthand padding özellikleri tek bir kodla oluşturulur. padding-top
padding-right
padding-bottom
padding-left
padding-bottom Elemetin aşağı kısmından alacağı padding değeri length
%
padding-left Elemetin sol kısmından alacağı padding değeri length
%
padding-right Elemetin sağ kısmından alacağı padding değeri length
%
padding-top Elemetin yukarı kısmından alacağı padding değeri length
%
]]> http://zingocan.com/css-padding-ozelligi.html/feed 3 CSS Margin Özelliği http://zingocan.com/css-margin-ozelligi.html http://zingocan.com/css-margin-ozelligi.html#comments Thu, 03 Jun 2010 12:51:17 +0000 admin http://zingocan.com/?p=4542 Continue reading →]]> Margin özelliğini çoğunuz duymuş olmalısınız.. Bilindiği gibi margin bir elementin etrafını temizlemeye yarar.. Bu ne demek? Şöyle bir örnek ile açıklayalım; eğer bir katman ya da her hangi bir objeniz mevcut.. Bu objeyi diğer objelerden ayrı tutmak, yukarı da yada aşağıda boşluk bırakmak  yada diğer bir elementten uzaklaştırmak için kullanılır..

top, right, bottom, ve left Margin özellikleri, sizin isteğinize göre dıştan, içten, sağ ve soldan belirleyeceğiniz alanları destekler.. Ayrıca margin özelliğinde negatif değerler kullanılarak boşluk verme özelliğini tam ters fonksiyonda gerçekleştirebilirsiniz..İlk olarka olası değerlere bir göz atalım;

Olası Değerler

Değer Açıklaması
auto Tarayıcı margin değerini belirler.
Bu ayardaki değer tarayıcının özelliğine bağlıdır.
length Sabir bir margini tanımlar. ( pixels, pt, em, vb.)
% Margin özelliğini % (yüzde) değeri ile oluşturur.

Margin için Bireysel Taraflar – Margini Kişiselleştirme

CSS içerisinde, Margin kullanımı farklı alanlar için farklı margin özellikleri içerir.Bir örnekle daha iyi anlayacaksınız;


margin-top:100px;
 margin-bottom:100px;
 margin-right:50px;
 margin-left:50px;

Bu örnekte belirlenen elementin sağ ve sol taraflarından 50px, yukarı ve aşağı kısımlarından ise 100px boyutunda bir boşluk bırakıldı.

Margin Kısa kod Özelliği

Diğer tüm CSS özelliklerinde olduğu gibi marginde de kısa kodları kullanarak istediğimiz boşluğu oluşturabiliriz. Aşağıda gösterdiğim örnekte bütün margin özelliklerini tek bir margin değişkeniyle atadık;

margin:100px 50px;

Margin özelliğine atayaağımız değerler 1 -4 değer arasında olmalıdır.Bunlar sırasıyla top, right, bottom ve left’tir.

  • margin:25px 50px 75px 100px;
    • top margin: 25px
    • right margin:50px
    • bottom margin : 75px
    • left margin: 100px
  • margin:25px 50px 75px;
    • top margin: 25px
    • right ve left margin: 50px
    • bottom margin: 75px
  • margin:25px 50px;
    • top ve bottom margin: 25px
    • right ve left margin: 50px
  • margin:25px;
    • tüm dört margin: 25px

Şimdi birkaç margin değişkeni nasıl kullanılır tablo halinde görelim;

All CSS Margin Properties

The number in the “CSS” column indicates in which CSS version the property is defined (CSS1 or CSS2).

Özellik Açıklaması Değerleri
margin shorthand diye geçen biraz önce bahsettiğim tüm margin özelliklerini kapsayan tek kod. margin-top
margin-right
margin-bottom
margin-left
margin-bottom Elementin alt kısmında oluşacak margin auto
length
%
margin-left Elementin sağ tarafında oluşacak margin auto
length
%
margin-right Elementin sol tarafında oluşacak margin auto
length
%
margin-top Elementin üst kısmında oluşacak margin. auto
length
%
]]> http://zingocan.com/css-margin-ozelligi.html/feed 7 CSS Tablo Stilleri http://zingocan.com/css-tablo-stilleri.html http://zingocan.com/css-tablo-stilleri.html#comments Mon, 31 May 2010 12:14:11 +0000 admin http://zingocan.com/?p=4412 Continue reading →]]> CSS Stillerinin Son başlığı olan tablo stillerinden bahsedeceğim.. Bu konu bir kaç başlıktan oluşacaktır, her başlık CSS Tablo Stillerinin bir parçası olarak düşünülebilir.

Tablo Kenarlıkları

CSS Tablo Stillerinin Kenarlıklarını ayarlarken CSS border özelliği kullanılır.Aşağıda bir örnek göstererek border özelliğini açıklayalım;


table, th, td
 {
 border: 1px solid black;
 }

Yukarıda çoklu CSS özelliğini kullanarak; table, th ve td taglarına 1px boyutunda solid black özelliği katarak siyah bir çerçeve (kenarlık) özelliği girdik.. Fakat örnekte oluşturduğumuz kenarlık, tablo üzerinde denediğimiz zaman iki kat çerçeve olduğunu göreceksiniz. Bunun sebebi HTML default ayarlarında tablo stillerine kenarlık katarken iki katmandan oluşan bir kenarlık özelliği olmasıdır.. Buna engel olmak için Collapse Border özelliğini kullanmalıyız;

Collapse Borders (Çökük Kenarlıklar)

Collapse Border özelliği CSS üzerinde border-collapse bileşeni ile gerçekleşir;


table
 {
 border-collapse:collapse;
 }
 table,th, td
 {
 border: 1px solid black;
 }

Şimdi ki örneğimiz ile başta gösterdiğimiz örnek arasındaki fark; collapse-border özelliğini kullanarak tabloya tek katlı bir kenarlık vermiş olmamızdır. Geri kalan bütün özellikleri aynıdır.

Tablo Genişlik ve Yüksekliği

Tablo genişlik ve yükseklik stilleri CSS üzerinde width ve height özellikleri ile oluşturulur, fakat bir farkı vardır ki bunlar aşağıdaki örnekte de göreceğiniz gibi, sayfanın % olarak kaplayacağı alan tarzı ile belirtilir;


table
 {
 width:100%;
 }
 th
 {
 height:50px;
 }

Gördüğünüz üzere, tablo yüksekliği sayfanın yarısını kaplarken, genişlik bütün sayfa alanına hitap etmektedir.

Tabloda Yazı Hizalama

Bu özellik Yazı stillerinde de gösterdiğim CSS Text özelliği olan text-align yöntemi ile oluşturulabilir;


td
 {
 text-align:right;
 }

Bu özelliğin yanı sıra, vertical (dikey) hizalama yöntemi ile birlikte de kullanılabilir. vertical-align değişkeni içerisine atayabileceğimiz değerler; ike top, bottom, ya da middle olarak ayarlanabilir;


td
 {
 height:50px;
 vertical-align:bottom;
 }

Tablo Dolguları

Tablo dolgularından kastım, padding ayarıdır. Padding ayarı bir CSS elemanın içerisinde oluşturulacak olan boşluk ya da anti boşluk olarak açıklanabilir.. Aşağıda vereceğim örneği kendi demonuzda kullanarak ne demek istediğimi anlayabilirsiniz;


td
 {
 padding:15px;
 }

Bu örnekte padding kullanarak her satır da 15px’lik bir boşluk değeri verilmiştir.

Tablo Rengi

Aşağıda göstereceğim örnekte, tablo renginin CSS background-color özelliği ile gerçekleştiğini göreceksiniz;


table, td, th
 {
 border:1px solid green;
 }
 th
 {
 background-color:green;
 color:white;
 }

Yukarıdaki örnek daha da özelleştirilebilir.

Arkadaşlar CSS Stil özelliklerini hemen hemen tamamladığımı düşünüyorum.. Bir dahaki dersimizde CSS kutu Modellerinden bahsedeceğim..

]]> http://zingocan.com/css-tablo-stilleri.html/feed 1 CSS Listeleme Stilleri http://zingocan.com/css-listeleme-stilleri.html http://zingocan.com/css-listeleme-stilleri.html#comments Sun, 30 May 2010 13:32:19 +0000 admin http://zingocan.com/?p=4391 Continue reading →]]> CSS Listeleme özellikleri aşağıdaki maddeleri sağlar;

  • Sıralı listeler için Farklı liste öğesi şeklinde gösterim
  • Sırasız listeler için farklı listeleme öğeleri
  • Listeleme işlemini küçük resimlerle gösterebilme

Liste

Listeleme işlemi HTML içerisinde iki ayrı biçimde kullanılır:

  • Sırasız listeler – liste öğeleri mermi ile işaretlenir
  • Sıralı  listeler – liste öğeleri sayı veya harf ile işaretlenir

CSS ile bu listeleme işini mermi yada sayıların dışında dilediğimiz bir resmi de girebiliriz.

Farklı Listeleme İşaretleyicileri

Aşağıda vereceğim örnekte işaretleyicilerin nasıl kullanılacağına dair kodlar mevcuttur;


ul.a {list-style-type: circle;}
 ul.b {list-style-type: square;}

 ol.c {list-style-type: upper-roman;}
 ol.d {list-style-type: lower-alpha;}

Arkadaşlar yukırda bahsettiğim gibi, işaretleyiciler aslında HTML içerisinde harf, sayı ve mermi (büyük nokta) işaretiyle listelenir. Fakat yukarıda verdiğim örnekte olduğu gibi kendiniz deneme yaparsanız, farklı işaretleyicileri de kullanabileceğimizi görürsünüz.

Sırasız Listelerin İşaretleme Stilleri

Değer Açıklama
none işaretleyici yok
disc Default. Daire şeklindeki noktalama
circle Nokta işareti
square Kare işareti

Yukarıdaki Değerleri kullanarak Örnekteki gibi durumlar atayabilirsiniz.

Sıralı Listelerin İşaretleme Stilleri

Değer Açıklama
armenian Geleneksel Ermeni Numaralama Sistemi
decimal Numaralar
decimal-leading-zero 01, 02 , 03 şeklinde numaralandırma
georgian Gürcü Numaralama Sistemi
lower-alpha Alfabe harfleri sıralı olarak
lower-greek Yunan Alfabesi (alpha, beta, gamma, vs.)
lower-latin Latin alfabesi (a, b, c, d, e, vs.)
lower-roman Roma Rakamları (i, ii, iii, iv, v,vs.)
upper-alpha Büyük Alfabe Harfleri (A, B, C, D, E, vs.)
upper-latin Büyük Harflerle latin alfabesi (A, B, C, D, E, vs.)
upper-roman Büyük Roma Alfabesi (I, II, III, IV, V, vs.)

Liste Başlarına Resim Ekleme

Listelere Resim ekleme işlemi aslında çok basit bir işlemdir.CSS de var olan ist-style-image özelliğini kullanarak bu işlemi gerçekleştirebiliriz;

ul
 {
 list-style-image: url('resim.gif');
 }

Yukarıdaki stili kullanırken İE ve Operada, Firexfox gibi tarayıcılardan daha büyük resimler görünür.Bunun yanında hepsinde aynı görünmesini istetseniz aşağıdaki gibi bir formatı kullanabilirsiniz;


ul
 {
 list-style-type: none;
 padding: 0px;
 margin: 0px;
 }
 li
 {
 background-image: url(resim.gif);
 background-repeat: no-repeat;
 background-position: 0px 5px;
 padding-left: 14px;
 }

Bu kodlar ile daha da ayrıntılı bir listeleme şekli oluşturabilir, resimlerinizin tüm tarayıcılarda aynı şekilde görünmesini sağlayabilirsiniz.. Fakat tabi daha fazla kod kullanmakve tarayıcıyı daha fazla yormasına sebep olmaktadır.. Eee sonuçta sizin seçiminiz.. Yukarıdaki örnekte bulunan kodları açıkalyacak olursak;

Ul için;

  • list-style-type:none,  özelliğini kullanarak zaten var olan işareti kaldırıyoruz.
  • padding ve margin ayarlarını sıfırlayarak cross-browser özelliğini sağlıyoruz.

Li için;

  • Resmimizin URL adresini giriyoruz
  • Tekrar etmemesi için no-repeat özelliğini ekliyoruz.
  • Pozisyonunu belirliyoruz ve Sol taraftan ne kadar boşluk bırakılacağını emrediyoruz.

Stenografi Özelliğiyle Listeleme

Aynı şekilde tekbir kod atayarakta bu özellikleri kullanabiliriz;


ul
 {
 list-style: square url(&quot;resim.gif&quot;);
 }

Stenografi özelliği ile birlikte kullanabileceğimiz değerler şunlardır;

  • list-style-type
  • list-style-position (açıklama için CSS Derslerimizi ziyaret edin)
  • list-style-image

Bütün CSS Listeleme Özellikleri;

CSS kolonu CSS1 ve CSS2 de kullanım ayarlarlamalarına göre listelenmiştir.

Özellik Açıklama Değer CSS
list-style Bir liste içerisindeki bütün deklerasyonları kapsayan özelliklerdir. list-style-type
list-style-position
list-style-image
inherit		 1
list-style-image Listeleme biçiminde kullanılan işaretleri resim olarak kullanma URL
none
inherit		 1
list-style-position Listenin Pozisyonunu belirlemek için iç taraftan ya da dış taraftanvereceğimiz boşluklar gibi özellikleri. inside
outside
inherit		 1
list-style-type Liste elemanlarının tipini belirler. Sırasız listeler için kullanılır. none
disc
circle
square
decimal
decimal-leading-zero
armenian
georgian
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
lower-roman
upper-roman
inherit
]]> http://zingocan.com/css-listeleme-stilleri.html/feed 4 CSS Link Stilleri http://zingocan.com/css-link-stilleri.html http://zingocan.com/css-link-stilleri.html#comments Sun, 30 May 2010 12:37:39 +0000 admin http://zingocan.com/?p=4387 Continue reading →]]> CSS Link stilleri diğer yazı stillerinden ayrıcalıklı olarak CSS stillendirmeleri alabilir.. (örneğin;color, font-family, background-color)

Özel durumlar olmadıkça, anonim bir değer atanmayan bir HTMl link tagına 4 ayrı özellik eklenebilir. Bunlar;

  • a:link – a normal, ziyaret edilmemiş link
  • a:visited – a linki ziyaret edilmiş linkleri
  • a:hover – a linkine mouse ile üzerine gelince oluşacak stil
  • a:active – a linkine seçildiğinde oluşacak stil

Hemen bir örnek yapalım;


a:link {color:#FF0000;}      /*ziyaret edilmemiş */
 a:visited {color:#00FF00;}  /* ziyaret edilmiş */
 a:hover {color:#FF00FF;}  /* mouse ile üzerine gelindiğinde */
 a:active {color:#0000FF;}  /* link seçilince */

Arkadaşlar bu stilleri oluştururken uymanız gereken bir takım kuralları var. Bunlar;

  • a:hover a:link ve  a:visited ‘ ten sonra kullanılır.
  • a:active a:hover ‘ dan sonra kullanılır.

Ortak Link Stilleri

Ortak link stilleri birazdan göstereceğim örnekte de olduğu gibi, bir takım linke ortak özellik katma durumudur.


a:link {text-decoration:none;}
 a:visited {text-decoration:none;}
 a:hover {text-decoration:underline;}
 a:active {text-decoration:underline;}

ArkaPlan Rengi

Bazı web sayfalarında gördüğünüz gibi, kimi linklere daha belirgin olması açısından, hem de yukarıda belirttiğim gibi background-color özelliği eklenerek link’e arkaplan rengi katabilir, ve yukarıdaki proerty’leri de bununla birlikte kullanabiliriz.Örnek verelim;


a:link {background-color:#B2FF99;}
 a:visited {background-color:#FFFF85;}
 a:hover {background-color:#FF704D;}
 a:active {background-color:#FF704D;}

Gördüğünüz üzere, background-color özelliği hemen hemen tüm CSS elemanlarında önemli yer tutan bir CSS Property’sidir.Bu şekilde örnekleri çoğaltabiliriz. Ben sizlere bir kaç örnek daha vereyim;


a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}

Yukarıda verdiğim örnekleride kendiniz deneyerek farkları görebilirsiniz.

İlginiz için teşekkür ederim.

]]> http://zingocan.com/css-link-stilleri.html/feed 4