Css Eğitimi Ders 14-Transparan

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" width="200" /></a></div> Merhaba,<br /> Siteye güzel bir görüntü katan transparan resimler üzerinde bir konu işleyeceğiz. Bazı örnekler verip daha iyi anlamanızı sağlayacağım.<br /> <h3> Transparan Nedir?</h3> <div> Transparan saydamlık anlamına gelir. Resim üzerinde kullanılır. </div> <h3> Transparan</h3> <div> Transparanlık belirtmek için "opacity" kullanılır. </div> <div> <br /></div> img.transparanresim {<br /> <div> opacity: 0.6; </div> <div> filter: alpha(opacity=60); </div> <div> }</div> <div> <br /></div> <div> "opacity" ile 0.6 transparan oluşturduk. Ve bunu "filter" kullanarak tarayıcı uyumluluğuna bağladık. Bununla ilgili bir güzel örnek daha:</div> <div> <br /></div> img.transparanresim {<br /> <div> opacity: 0.6; filter: alpha(opacity=60); </div> <div> } </div> <div> img:hover.transparanresim { </div> <div> opacity: 1.0; filter: alpha(opacity=100); </div> <div> }</div> <div> <br /></div> <div> Bu kodu bir resim üzerinde önizlerseniz (class adı transparan resim) resim transparan olup üstüne gelince 1 yani düz transparanlığa dönüşecektir. Eğer herhangi bir class oluşturmayıp kullansaydık ozaman bütün resimlerde bu css stili uygulanacaktır.</div> <div> <br /></div> <div> <div 0.6="" 1.0="" alpha="" class="separator" filter:="" img:hover="" img="" opacity:="" opacity="100);" style="clear: both; text-align: center;"> </div> <br /></div>

Css Eğitimi Ders 14-Transparan

Merhaba, Siteye güzel bir görüntü katan transparan resimler üzerinde bir konu işleyeceğiz. Bazı örnekler verip daha iyi anlamanızı sağlay...

Devamı »

Css Eğitimi Ders 13-Kaydırma

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" width="200" /></a></div> Merhaba,<br /> Bugün büyük bir sorun olan otamatik olarak kaydırma özelliğini kaldırmayı ve anlamayı öğreneceğiz. Kısa bir ders olacak.<br /> <h3> Kaydırma Nedir?</h3> <div> Kaydırma html okunurken içinde bulunduğu kutu veya herhangi bir şeye sığmayınca aşağı atma veya başka seçeneklere sürüklemedir. Örneğin 3 adet resmi yan yana koyduğumuzda 1'isi aşağı kayıyorsa bunu düzelmek için resimlerin boyutunu düşürebilirsiniz. Ama daha kolay yolu da var:</div> <div> <br /></div> <div> .kaydırma {</div> <div> clear: both;</div> <div> }</div> <div> <br /></div> <div> Bu şekilde kaydırma adlı sınıfımıza kaydırma engellemesini koyduk.</div>

Css Eğitimi Ders 13-Kaydırma

Merhaba, Bugün büyük bir sorun olan otamatik olarak kaydırma özelliğini kaldırmayı ve anlamayı öğreneceğiz. Kısa bir ders olacak. Kaydı...

Devamı »

Css Eğitimi Ders 12-Pozisyon

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" width="200" /></a></div> Merhaba,<br /> Şimdi önemli bir konu olan bazı elementlerin pozisyonlarını belirtmeyi göreceğiz. Bildiğimiz üzere tüm elementler top (üst), bottom(alt), right(sağ) ve left(sol) özelliklerine sahiptir. Anacak bu özellikler "position" özelliği kullanılmadıysa yarayacaktır.<br /> <div> <br /></div> <ul> <li>static : Hiçbir özellik belirtilmediyse</li> <li>fixed : Sabit, tarayıcıya göre hareket etmeyen element</li> <li>relative : Normal olması gereken pozisyona göre konum belirlemek</li> <li>absolute : Koordinat belirlemek</li> </ul> <h4> Static</h4> <div> Herhangi bir position belirmemek durumunda oluşan html etiketlerinin  top (üst), bottom(alt), right(sağ) ve left(sol) özelliklerine sahip olmamasıdır.</div> <h4> Fixed</h4> <div> Bu seçenek ile tarayıcı scroll (Kaydırma Çubuğu) oynatıldığında bile hareket etmeyen html tagları oluşturmaya yarar. Bunu yazı, resim gibi etiketlerde kullanabilirsiniz. Örneğin:</div> <div> <br /></div> <div> p{</div> <div> position: fixed;</div> <div> <br /></div> <div> bottom: 50px;</div> <div> right: 25px;</div> <div> }</div> <div> <br /></div> <div> Bu kodu çalıştırınca p tagının sabit bir şekilde altta 50px ve sağdan 25px olarak durduğunu göreceksiniz. Bu fixed özelliği diğer tagların önüne geçer.</div> <h4> Relative</h4> <div> Tag'a özel pozisyonundan farklı bir değer vermeyi sağlar. Sağ'a kaydırma, sola kaydırma gibi. Örneğin:</div> <div> <br /></div> <div> h4 {</div> <div> position: relative;</div> <div> <br /></div> <div> left: -15px;</div> <div> }</div> <div> <br /></div> <div> Bu kodu çalıştırdığımızda h4 etiketinin kullanıldığı kısımda 15px sola kayacaktır.</div> <h4> Absolute</h4> <div> Tag için herhangi bir konum belirlemeyi sağlar. Konumu her yer olabilir.</div> <div> <br /></div> <div> h1 {</div> <div> position: absolute;</div> <div> left: 50px;</div> <div> top: 100px;</div> <div> }</div> <div> <br /></div> <div> Bu şekilde h1 başlığının 50px solda 100px üstte olmasını sağladık. </div> <h4> z-index</h4> <div> Belirlenen etiketin katmanını belirler. Yani birden fazla belirtmiş isek hangisi önde hangisi arkada diye belirtmemiz de gerekir. Bunun için z-index kullanılır. Örneğin:</div> <div> <br /></div> <div> img.duyuru {</div> <div> position: fixed;</div> <div> <br /></div> <div> left: 0px;</div> <div> top: 0px;</div> <div> <br /></div> <div> z-index: 1</div> <div> }</div> <div> <br /></div> <div> Bu durumda img'ye özel "duyuru" adlı bir class içine fixed özelliği ile bir resim atadığımızı düşünelim. z-index belirtilmeyen taglar 0 olacağına göre resim öne geçecektir. Negatif sayılar ise arkasına geçmesine neden olur.</div>

Css Eğitimi Ders 12-Pozisyon

Merhaba, Şimdi önemli bir konu olan bazı elementlerin pozisyonlarını belirtmeyi göreceğiz. Bildiğimiz üzere tüm elementler top (üst), bot...

Devamı »

Css Eğitimi Ders 11-Sınırlama

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" width="200" /></a></div> Merhaba,<br /> Kutu modeli dersinden hatırlarsak width belirlemezsek tamamen yatay kaplıyordu. height belirlemezsek içine yazılanlara göre uzuyordu. İşte uzamasını belli bir sınıra koymak için css sınırlamaları kullanırız.<br /> <h3> Sınırlama</h3> <div> Sınırlamalarda en düşüğü belirlemek için "min" en yükseği sınırı belirlemek için "max" kullanırız. Yani "min-width, min-height, max-width, max-height" oluyor. Örneği inceleyelim:</div> <div> <br /></div> <div> .kutu {</div> <div> //width belirmeyip tam kaplamasını sağlıyacağız</div> <div> max-height: 500px;</div> <div> }</div> <div> <br /></div> <div> Bu şekilde kutu başta içindeki kadar büyüyecek ve 500px'e gelince duracaktır. Bunu aynı şekilde min olarak da belirtebiliriz:</div> <div> <br /></div> <div> <div> .kutu {</div> <div> //width belirmeyip tam kaplamasını sağlıyacağız</div> <div> min-height: 100px;</div> <div> max-height: 500px;</div> <div> }</div> </div>

Css Eğitimi Ders 11-Sınırlama

Merhaba, Kutu modeli dersinden hatırlarsak width belirlemezsek tamamen yatay kaplıyordu. height belirlemezsek içine yazılanlara göre uzuy...

Devamı »

Css Eğitimi Ders 10-Gruplama

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" width="200" /></a></div> Merhaba,<br /> Şimdi Css'yi daha kolay kullanmak için bir kaç şey göreceğiz.<br /> <h3> Gruplama</h3> <div> Şu kodu inceleyelim:</div> <br /><br /> h2 { color: orange; } <div> h4 { color: orange; } </div> <div> h6 { color: orange; }</div> <div> <br /></div> <div> Hepsinin özellikleri aynı ve bunları tek hamlede yazma ihtimalimiz yok mu? Tabiki var. İşte buna gruplama diyoruz. Gruplama şu şekilde yapılır:</div> <div> <br /></div> <div> h2, h4, h6 {</div> <div> color: orange;</div> <div> }</div> <div> <br /></div> <div> Bu şekilde daha kısa bir css kodu kullandık.</div> <div> <br /></div> <h3> Özel Classlar</h3> <div> Şu kodu inceleyelim:</div> <div> <br /></div> <div> <p> 1. Paragraf </p></div> <div> <p> 2. Paragraf </p></div> <div> <br /></div> <div> Ben 1.'sini normal ve 2.'sini kırmızı istiyorum. O halde css kodum 2 class şeklinde yazmam gerekiyor. Yani bir normal yapan class ve birde kırmızı yapan class. Bunun yerine özel classları kullanırız. Yani bir etiket için özel classlar vardır. Bunlar:</div> <div> <br /></div> <div> p.kirmizi {</div> <div> color: kirmizi;</div> <div> }</div> <div> <br /></div> <div> Bu şekilde p etiketine özel bir paragraf oluşturduk. Bunu kullanırsak:</div> <div> <br /></div> <div> <p class="kirmizi"> Kırmızı Paragraf </p></div> <div> <br /></div> <div> Sadece "kirmizi" yazdık. "p.kirmizi" değil!</div> <div> <br /></div>

Css Eğitimi Ders 10-Gruplama

Merhaba, Şimdi Css'yi daha kolay kullanmak için bir kaç şey göreceğiz. Gruplama Şu kodu inceleyelim: h2 { color: orange; }  h4...

Devamı »

Css Eğitimi Ders 9-Kutu Modeli (Videolu Anlatım)

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" width="200" /></a></div> Merhaba,<br /> Css için önemli bir konu olan kutu modeli'ni uzun uzun bir örnek ile anlattım. Websitesi örneği ile gösterdim. Ve sizin yapmanızı öneririm.<br /> <br /> <br /> <br /> <br /> <h3> 1. Video</h3> <iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/GaVO-tsaCrg" width="560"></iframe><br /> <br /> <h3> 2. Video</h3> <br /> <iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/UiCZtSrbrBI" width="560"></iframe> <br /> <h3> 3. Video</h3> <br /> <iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/UWohStIeOKk" width="560"></iframe>

Css Eğitimi Ders 9-Kutu Modeli (Videolu Anlatım)

Merhaba, Css için önemli bir konu olan kutu modeli'ni uzun uzun bir örnek ile anlattım. Websitesi örneği ile gösterdim. Ve sizin yapm...

Devamı »

Css Eğitimi Ders 8-Tablolar

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" width="200" /></a></div> Merhaba,<br /> Şimdi uzun ve önemli bir konu göreceğiz. Tablolar! Bu konu önemli bir konudur. Çünkü tablo ile yapılan tasarımlar tablo özelliklerine dayanır. Başlayalım.<br /> <h3> Tablolar</h3> <h4> Kenarlık:</h4> <div> Stil belirtmek için "border-style" kullanılır. Özelliklerine göz atalım:</div> <div> <ul> <li>dotted: Çizgili</li> <li>dashed: Kısa Çizgili</li> <li>solid: Çizgi</li> <li>double: Çift Çizgili</li> <li>grove, ridge, inset, outside: Kalın Çizgi (Hepsi Olabilir)</li> </ul> <div> Örnek verelim:</div> </div> <div> <br /></div> <div> .tablo {</div> <div> border-style: double;</div> <div> }</div> <div> <br /></div> <div> Şimdi bir kenarın kalınlığını belirtelim. Kesinlikle önceden bir "border-style" belirtmemiz gerekir. Aksi takdirde çalışmaz. Örneğin:</div> <div> <br /></div> <div> <div> .tablo {</div> <div> border-style: solid;</div> <div> border-width: 2px;</div> <div> }</div> </div> <div> <br /></div> <div> Şimdi de kenarlık rengini belirtelim. Bunda da aynı şekilde önceden "border-style" belirtmemiz gerekir. Örneğin:</div> <div> <br /></div> <div> <div> .tablo {</div> <div> border-style: solid;</div> <div> border-width: 2px;</div> <div> border-color: #FF8000;</div> <div> }</div> </div> <div> <br /></div> <div> Bu şekilde tüm öğrendiğimiz stilleri pekiştirdik.</div> <h4> Genişlik-Yükseklik:</h4> <div> Bu yöntem ile tablonun her hücresine ayrı bir büyüklük veya yükseklik verebiliriz. Örneğin:</div> <div> <br /></div> <div> td.hücre1 {</div> <div> width: 100px;</div> <div> height: 100px;</div> <div> }</div> <div> td.hücre2 {</div> <div> <div> width: 100px;</div> <div> height: 200px;</div> </div> <div> }</div> <h4> Yazı Özellikleri:</h4> <div> Tablonun içindeki yazı özellikleridir. Yine her hücrede tek tek kullanılabilir. "text-aling" yani hiza, "color" yani renk, "background-color" arkaplan rengi gibi özellikleri vardır. Örneğin:</div> <div> <br /></div> <div> <div> .tablo {</div> <div> border-style: solid;</div> <div> border-width: 2px;</div> <div> border-color: #FF8000;</div> <div> text-aling: center;</div> <div> color:  #FF8000;</div> <div> background-color: #EEEEEE;</div> <div> }</div> </div> <div> <br /></div> <div> Bu derslik bu kadar ve önemli bir konuyu atlattık ve daha önemli bir konu olan kenarlıklara geçeceğiz. Zor olsada eğlenceli olacak. Kolay gelsin. Çalışmayı unutmayın.</div>

Css Eğitimi Ders 8-Tablolar

Merhaba, Şimdi uzun ve önemli bir konu göreceğiz. Tablolar! Bu konu önemli bir konudur. Çünkü tablo ile yapılan tasarımlar tablo özellikl...

Devamı »

Css Eğitimi Ders 7-Listeler

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" width="200" /></a></div> Merhaba,<br /> Bu derste listeleme yaparken özellikleri kullanmayı öğreneceğiz. Şekillendirme, değiştirme vs. Hemen Başlayalım.<br /> <h3> Listeler</h3> <h4> Madde Şekli:</h4> <div> Madde şekillerini 2 yerde kullanırız. Numaralı ve şekilli listeler. Yani "ol" ve "ul". Bir örnek ile madde şekillerini daire, sayıları roman rakamları yapalım:</div> <div> <br /></div> <div> ul {</div> list-style-type: disc;<div> }</div> <div> ol {</div> list-style-type: upper-roman;<div> }</div> <div> <br /></div> <div> Bu stili kullanırsak tüm madde listelerinin başında daire, sayı listelelerinin başında roman rakamları listelenir. Buna pek çok örnek verilebilir.</div> <h4>      Ul Stilleri</h4> <div> <ul> <li>circle: İçi boş daire</li> <li>disc: Daire</li> <li>square: Kare</li> <li>none: Boş</li> </ul> <h4>      Ol Stilleri</h4> </div> <ul> <li>armenian</li> <li>decimal</li> <li>decimal-leading-zero</li> <li>lower-alpha</li> <li>lower-greek</li> <li>lower-latin </li> <li>lower-roman</li> <li>none </li> <li>upper-alpha</li> <li>upper-latin</li> <li>upper-roman</li> </ul> <div> Not: Bunları yazamadım çünkü çoğunu hatırlamıyorum ve alıntı yaptım. Orada da yoktu. Size ödev öğrenin gelin :)</div> <div> <br /></div> <div> Madde şekli yerine resim de kullanabiliriz. Örneğin:</div> <div> <br /></div> ul { <div> list-style-image: url('resim.png'); </div> <div> }</div> <div> <br /></div> <div> Not: Resim yerine gif'de kullanılabilir.</div> <h4> İnside-Outside</h4> <div> Madde işaretinin içinde mi dışında mı olacağıdır. Örneğin:</div> <div> <br /></div> <div> ul { <div> list-style-position: inside; </div> <div> }</div> </div> <div> <br /></div> <div> Bu şekilde madde işareti içeri kısımda başta olacaktır.</div> <div> <br /></div> <div> Bu derslik bu kadar. Çalışın ve ödevi unutmayın. Bu arada tüm "ol" özelliklerini bulana bir süprizim var ;)</div>

Css Eğitimi Ders 7-Listeler

Merhaba, Bu derste listeleme yaparken özellikleri kullanmayı öğreneceğiz. Şekillendirme, değiştirme vs. Hemen Başlayalım. Listeler Ma...

Devamı »

Css Eğitimi Ders 6-Bağlantı Özellikleri

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" width="200" /></a></div> Merhaba,<br /> Yazı stillerini belirledikten sonra şimdi bağlantılarla oynayalım.<br /> <h3> Bağlantılar</h3> <div> Bağlantılar ziyaret edilmiş, edilmemiş gibi bazı özelliklerle yönetilir.</div> <br /> <ul> <li>a:link - Normal Görünüm</li> <li>a:visited - Ziyaret edilmiş Görünüm</li> <li>a:hover - Fare İle Üzerinde Durulduğunda Görünüm</li> <li>a:active - Tıklanılan Anda Görünüm</li> </ul> <div> Örneğin:</div> <div> <br /></div> a:link {color: blue;} /*Normal*/<br /> <div> a:visited {color: red;} /*Ziyaret Edilmiş*/ </div> <div> a:hover {color: red;} /*Fare Üzerindeyken*/ </div> <div> a:active {color: orange;} /*Aktif İken*/</div> <div> <br /></div> <div> Bunları  kullanırken şunlara dikkat etmeliyiz:</div> <div> <br /></div> <div> <ul> <li>a:hover her zaman a:link ve a:visited'den sonra gelmeli.</li> <li>a:active her zaman a:hover'dan sonra gelmeli.</li> </ul> </div>

Css Eğitimi Ders 6-Bağlantı Özellikleri

Merhaba, Yazı stillerini belirledikten sonra şimdi bağlantılarla oynayalım. Bağlantılar Bağlantılar ziyaret edilmiş, edilmemiş gibi b...

Devamı »

Css Eğitimi Ders 5-Yazı

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" width="200" /></a></div> Merhaba,<br /> Bir önceki ders ile arkaplanınızı belirttiyseniz şimdi biraz yazılarla oynayalım.<br /> <h3> Yazı Rengi</h3> <div> Aynı arkaplanda yaptığımız gibi ama biraz farklı yazı rengi belirleyelim. Örneğin:</div> <div> <br /></div> a {<br /> <div> color: white; </div> <div> }</div> <div> <br /></div> <div> Bu stil ile bütün a kümelerinin beyaz olmalarını sağladık.</div> <h3> Yazı Hizası</h3> <div> Normalde kullandığımız sağda, solda ve ortada özelliklerini kullanalım. Örneğin:</div> <div> <br /></div> a {<br /> <div> text-align: justify; </div> <div> }</div> <div> <br /></div> <div> Bu sayede bütün a kümelerinin tam sağ ve sola dayanmasını sağladık. Bütün özellikleri görelim:<br /> <ul> <li>left : Sol</li> <li>right : Sağ</li> <li>center : Orta</li> <li>justify : Tam</li> </ul> <h3> Yazı Dekorasyonu</h3> </div> <div> Bir yazıdaki dekorasyonları kaldırmak için kullanılır. "none" değeri hayır anlamındadır. Örneğin:</div> a {<br /> <div> text-decoration: none; </div> <div> }</div> <div> <br /></div> <div> Bu şekilde tüm dekorasyonlar kalkar.</div> <h3> Yazıda İndent</h3> <div> İndent özelliği başlamadan önce başta bırakılan boşluktur. Örneğin:</div> <div> <br /></div> p {<br /> <div> text-indent: 50px; </div> <div> }</div> <div> <br /></div> <div> Bu sayede paragraf başlamadan 50px boşluk bırakabiliriz.</div> <div> <br /></div> <div> <h3> Yazıda Spacing</h3> <div> Yazıda spacing kelime ve harf arasında boşluk oluştumak amaçlı kullanılır. 2'ye ayrılır.</div> <h4>      Letter-Spacing</h4> <div> Harfler arasında boşluğu belirtir. "px" olarak belirtilebilir.</div> <h4>      Word-Spacing</h4> <div> Kelimeler arasında boşluğu belirtir. "px" olarak belirtilebilir.<br /> <h3> Yazı Fontu</h3> </div> </div> <div> Font belirlemek için font-family özelliği kullanılır. Örneğin:</div> <div> <br /></div> <div> a {</div> <div> font-family: Times New Roman;</div> <div> }</div> <div> <br /></div> <div> Bu şekilde yazının "Times New Roman"  olmasını sağladık.</div> <h3> Yazı Büyüklüğü</h3> <div> Yazı büyüklüğü belirlerken font-size özelliği kullanılır. Örneğin:</div> <div> <br /></div> <div> a {</div> <div> font-size: 12pt;</div> <div> }</div> <div> <br /></div> <div> Burada punto dışında büyüklük şekilleri kullanabiliriz. Örneğin "px".</div> <h3> Yazı Özellikleri</h3> <div> Yazı özelliği kullanarak yazıyı bold, italik yapabiliriz. Örneğin:</div> <div> a {</div> <div> font-style: italic;</div> <div> font-weight: bold;</div> <div> }</div> <div> <br /> Yazıları normal haline getirmek için ise "normal" ifadesini kullanırız.<br /> <br /></div> <div> Daha pek çok örnek verilebilir fakat şimdilik bunları bilmeniz yeterli.</div>

Css Eğitimi Ders 5-Yazı

Merhaba, Bir önceki ders ile arkaplanınızı belirttiyseniz şimdi biraz yazılarla oynayalım. Yazı Rengi Aynı arkaplanda yaptığımız gibi...

Devamı »

Css Eğitimi Ders 4-Arkaplan

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjltbWtZqeFa5pWOUTV-FTkP24u1GNrNR8FcyETtPlNEvEUCBJA69lLP5il7xx8SIOFdhaZ26AYZ6czdlNo9GCHgAabJO_68c-wqiRjdwZ2YI_hDFXazeYVA5ze96ziAazjdy7FcefsrVTL/s1600/5035a79ebf516.preview-620.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjltbWtZqeFa5pWOUTV-FTkP24u1GNrNR8FcyETtPlNEvEUCBJA69lLP5il7xx8SIOFdhaZ26AYZ6czdlNo9GCHgAabJO_68c-wqiRjdwZ2YI_hDFXazeYVA5ze96ziAazjdy7FcefsrVTL/s1600/5035a79ebf516.preview-620.jpg" width="200" /></a></div> Merhaba,<br /> Şuan itibariyle css kullanım örneklerine başlıyoruz. İlk olarak arkaplan ile başlayalım.<br /> <h3> Arkaplan Rengi</h3> <div> Normalde şimdi renklerin nasıl kullandığını anlatmak isterdim fakat bu bilindik bir şey. Bunu kullanarak öğreniceksiniz. Zaten ccs'nin temeli renklerdir. Bir örnek yapalım:</div> <div> <br /></div> body { <div> background-color: yellow; </div> <div> }</div> <div> <br /></div> <div> Burada arka plan renginin yellow (sarı) olmasını sağladık. Bunun yerine kodlama kullanabiliriz. #'den sonra gelen renk kodları da burada kullanılabilir.</div> <h3> Arkaplan Resmi</h3> <div> Eğer arkaplana bir resim eklemek istiyorsak bu işlemi kullanırız. Ve zaten genellikle bu kullanılır. Ya adres yoluyla ya da hosting'te resim adı ile bağlantı kurulur Örneğin:</div> <div> <br /></div> <div> body { <br />background-image: url('image.jpg'); <br /><div> }</div> </div> <div> <br /></div> <div> Bu şekilde "url" ile ya köprü bağlantısı ya da "image.jpg" kısmı ile sitede bulunan bir resmi ekleyebiliriz.</div> <h3> Arkaplan Repeat (Döşeme)</h3> <div> Yüklediğiniz arkaplan resmi eğer tam arka plana sığmıyor ise o zaman repeat özelliğine başvurulur. Yani resim tekrar ederek döşenir. Örneğin:</div> <div> <br /></div> body {<div>  background-image: url('image.jpg'); </div> <div> background-repeat: no-repeat; </div> <div> }</div> <div> <br /></div> <div> Repeat özelliğinin değerleri:</div> <div> <ul> <li>no-repeat : Tekrar edilmeyecektir</li> <li>repeat : Tekrarlanacaktır / döşenecektir</li> <li>repeat-x : Sadece sağa doğru tekrar edecektir</li> <li>repeat-y : Sadece aşağı doğru tekrar edecektir</li> </ul> <div> Bundan da anlayacağımız gibi repeat özelliği küçük arkaplan resimleri için önemlidir.</div> <h3> Arkaplan Attachment (Sabitlik)</h3> <div> Bir arkaplan resminin sabitliğini belirlemek istiyorsak bu özelliğe fixed değeri veririz. Örneğin:</div> <div> <br /></div> body { </div> <div> background-image: url('image.jpg');</div> <div> background-attachment: fixed; </div> <div> }<h3> Arkaplan Position</h3> <div> Eğer arkaplanı "no-repeat" yani tekrar etmeyecek özelliği kattıysak bu resmin nereye hizalancağını belirleyebiliriz. Örneğin:</div> <div> <br /></div> body { </div> <div> background-image: url('image.jpg'); </div> <div> background-repeat: no-repeat; </div> <div> background-position: left top; </div> <div> }</div> <div> <br /></div> <div> Burada left: sol, top: üst yani sol üst anlamındadır.</div> <h3> Arkaplan Belirmenin Kısa Yolu</h3> body { <div> background: #000000 veya url('image.jpg') no-repeat left top; </div> <div> }<div> <div> <br /></div> </div> </div> <div> Bu şekilde uzun bir kodu kısaltabilirsiniz.</div>

Css Eğitimi Ders 4-Arkaplan

Merhaba, Şuan itibariyle css kullanım örneklerine başlıyoruz. İlk olarak arkaplan ile başlayalım. Arkaplan Rengi Normalde şimdi renkl...

Devamı »

Css Eğitimi Ders 3-Birkaç Bilgi

<div class="separator" style="clear: both; text-align: center;"> <a href="http://saltun.net/wp-content/uploads/2013/10/css.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="117" src="http://saltun.net/wp-content/uploads/2013/10/css.jpg" width="200" /></a></div> Merhaba,<br /> Bir önceki derste Class ve ıd yapısını öğrenmiştik ve şimdi nereye eklenir? Dosyası nasıl çağrılır? Onu öğreneceğiz.<br /> <h3> Stil Dosyasını Çağırma</h3> <div> Stil dosyası çok uzun olduğundan index dosyası çöplüğe dönmektedir. Bunu önlemek için ise dosyası başka yerden çağırma yöntem kullanılır. Ayrıca "<head>" ve "</head>" etiketleri arasına konur. İşte böyle çağırılır;</div> <div> <br /></div> <link href="stil.css" type="text/css" rel="stylesheet"/><br /> <div> <br /></div> <div> Bu şekilde index'i kısaltabiliriz. Ve işimiz kolaylaşır.</div> <h3> Css Nereye Yazılır?</h3> <div> Aslında bunu 2 sefer öğrendik ve hala tekrar ediyoruz. Ama önemli bir konu. Yine de söyle dediğinizi duyar gibiyim;</div> <div> <br /></div> <html><br /> <div> <head> </div> <div> <title>MinikUzman</title></div> <div>  <style type="text/css"> </div> <div> body { </div> <div> background-color:grey; </div> <div> color:white; </div> <div> } </div> <div> p { </div> <div> font-family: Arial, Verdana; </div> <div> font-size: 16px;</div> <div>  } </div> <div> <div> h1 { </div> <div> font-family: Arial, Verdana; </div> <div> font-size: 26px;</div> <div> color:orange;</div> <div>  } </div> </div> <div> </style> </div> <div> </head> </div> <div> <body> </div> <div> <h1>Wolder King</h1></div> <div> <p>Merhaba, Blog'uma Hoşgeldiniz.</p> </div> <div> </body> </div> <div> </html></div> <div> <br /></div> <div> Aslında burada büyük bir tekrar yaptık. Burayı iyice bir anlamaya çalışın. Eğer anlarsanız bu konuyu çözdünüz demektir. Bir sonraki derste örnekler vermeye devam edeceğiz. Kolay gelsin.</div>

Css Eğitimi Ders 3-Birkaç Bilgi

Merhaba, Bir önceki derste Class ve ıd yapısını öğrenmiştik ve şimdi nereye eklenir? Dosyası nasıl çağrılır? Onu öğreneceğiz. Stil Dosy...

Devamı »

Css Eğitimi Ders 2-Class ve ID

<div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="http://saltun.net/wp-content/uploads/2013/10/css.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="117" src="http://saltun.net/wp-content/uploads/2013/10/css.jpg" width="200" /></a></div> Merhaba,<br /> Şimdi Css'de çok önemli bir konuya değineceğiz. Bu konu class ve Id hakkında. Çok fazla kullanılırlar ve bu yüzden önemli. Hiç uzatmadan başlayalım.<br /> <h3> Class</h3> <div> Class yapısı bir tür sınıfı oluşturmaya yarar. Yani bir sınıf oluşturup ad koyarsınız. Sonra özellikleri içine koyarsınız. Sonrada bu özelliklere uymasını istediğiniz kodu sınıfa koyarsınız. İşte bu class özelliği buna yarıyor. Örneğin bir class oluşturalım;<br /> <br /> .yazı {<br /> font: 12pt Arial, Verdana;<br /> color: black;<br /> text-aling: left<br /> }<br /> <br /> Burada "." ile başlayıp bir isim oluşturduğumuzu görüyorsunuz. "." ile başlayan isimler class oluşturduğumuz anlamındadır. Peki bu sınıfa bir kodu nasıl sokarız;<br /> <br /> <div class="yazı">MinikUzman</div><br /> <br /> Bunun yerine yine class"yazı" özelliğini kodlara koyarak kullanabiliriz.<br /> <h3> ID</h3> </div> <div> ID ise class'tan farklı olarak sadece bir koda verilebilir. Yani tek elementte kullanılır. Ve bir ID oluşturmak istiyorsan başına # getiririz. Örneğin;</div> <div> <br /></div> <div> #yazı {</div> <div> font: 12pt Arial, Verdana;<br /> color: black;<br /> text-aling: left<br /> }<br /> <br /> Burada gördüğünüz gibi bir ID oluşturmak için # işareti kullandık. Peki bunu bir element yani koda nasıl uygularız;<br /> <br /> <div id="yazı">MinikUzman</div><br /> <br /> Burada da tek fark olarak "ıd" özelliği kullandık. Ve diğer class gibi kodlarda da özellik olarak kullanabiliriz.<br /> <br /> Bu derslik bukadar ve bir sonraki derste Css hakkında bir kaç şey daha öğretip artık özellik anlatımlarına geçeceğiz. Kolay Gelsin. Çalışmayı Unutmayın.</div> <div> <br /></div> <div> <br /></div> <div> <br /></div>

Css Eğitimi Ders 2-Class ve ID

Merhaba, Şimdi Css'de çok önemli bir konuya değineceğiz. Bu konu class ve Id hakkında. Çok fazla kullanılırlar ve bu yüzden önemli....

Devamı »

Css Eğitimi Ders 1-Başlangıç

<div class="separator" style="clear: both; text-align: center;"> <a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLRAin51t86T4CDt7WHnyeBN2s_idNWGX9ZT1kES7dIW774GIo" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: justify;"><img border="0" height="117" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLRAin51t86T4CDt7WHnyeBN2s_idNWGX9ZT1kES7dIW774GIo" width="200" /></a></div> <div style="text-align: justify;"> Merhaba,</div> <div style="text-align: justify;"> Bugün Css eğitimlerimize başlıyoruz. Çok uzun bir eğitim olacak. Çünkü Css'nin yaklaşık olarak bütün fonksiyonlarını öğretmeyi düşünüyoruz. Neyse uzatmadan başlayalım.</div> <h3 style="text-align: justify;"> Css Nedir? Ne İşe Yarar? Nereye Yazılır?</h3> <div style="text-align: justify;"> Css kodu Html ile yazılmış bir siteyi düzenlemeye yarar. Örneğin "h1" etiketinin düzenlenmesini sağlar. Şunu gibi;</div> <div> <ul> <li style="text-align: justify;">Rengi Şöyle Olcak</li> <li style="text-align: justify;">Arkaplanı Şöyle Olcak</li> <li style="text-align: justify;">Yeri Burası Olcak</li> </ul> <div style="text-align: justify;"> gibi... Buna daha çok şey ekleyebiliriz. Bu arada Css kodları "<head>" etiketleri arasına "<style>" etiketleri arasına yazılır. Şuan Css ile pek çok şey yapılabiliyor. Ayrıca Css olmazsa site yok demektir. Siyah beyaz bir fotoğraf gibidir. Ondan dolayı Css sitede önemli ve çok uzun bir yer kaplar. Css kodları çok uzun kodlardır. Örnek olarak;</div> </div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> h1 {</div> <div style="text-align: justify;"> color: red;</div> <div style="text-align: justify;"> aling: center;</div> <div style="text-align: justify;"> }</div> <div style="text-align: justify;"> /*Bu Bir Açıklama*/</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Burada "h1" etiketi için bazı özellikler koyduk. "color" yani rengini değiştirmek isteyip "red" yani kırmızı yaptık. Sonra da yerini belirledik. "aling" ile yerini belirledik. Ve "center" yani ortada olmasını istedik. Ve sonuna bir açıklama koyduk. "/*" ve "*/" toplulukları arasına yazdık. Bu herhangi bir etki etmiyecektir. Öğrendiklerimiz;</div> <div style="text-align: justify;"> <ul> <li>Css kodları "<head>" etiketleri arasına "<style>" etiketleri arasına yazılır</li> <li>Her özellikten sonra ; işareti konur</li> <li>Açıklamalar /* ve */ arasına konur</li> </ul> <div> Evet şimdilik bu kadar. Daha sonra "class" ve "ıd"yi kullanacağız. Çalışmayı unutmayın.</div> </div> <div style="text-align: justify;"> <br /></div>

Css Eğitimi Ders 1-Başlangıç

Merhaba, Bugün Css eğitimlerimize başlıyoruz. Çok uzun bir eğitim olacak. Çünkü Css'nin yaklaşık olarak bütün fonksiyonlarını öğret...

Devamı »