Wolder King: Css Eğitimi

Css Eğitimi etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Css Eğitimi Ders 14-Transparan

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ğlayacağım. Transparan Nedir? Transparan saydamlık anlamına gelir. Resim üzerinde kullanılır. Transparan Transparanlık belirtmek için "opacity" kullanılır. img.tran…

Devamı »

May 23, 2014

Css Eğitimi Ders 13-Kaydırma

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ırma Nedir? 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 …

Devamı »

May 23, 2014

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), bottom(alt), right(sağ) ve left(sol) özelliklerine sahiptir. Anacak bu özellikler "position" özelliği kullanılmadıysa yarayacaktır. static : Hiçbir özellik belirtilm…

Devamı »

May 23, 2014

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

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 uzuyordu. İşte uzamasını belli bir sınıra koymak için css sınırlamaları kullanırız. Sınırlama Sınırlamalarda en düşüğü belirlemek için "min" en yükseği sınırı belirle…

Devamı »

May 22, 2014

Css Eğitimi Ders 10-Gruplama

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 { color: orange; } h6 { color: orange; } Hepsinin özellikleri aynı ve bunları tek hamlede yazma ihtimalimiz yok mu? Tabiki var. İşte buna gruplama diyoruz. Gruplama şu şe…

Devamı »

May 22, 2014

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 özelliklerine dayanır. Başlayalım. Tablolar Kenarlık: Stil belirtmek için "border-style" kullanılır. Özelliklerine göz atalım: dotted: Çizgili dashed: Kısa Çizgili solid:…

Devamı »

May 09, 2014

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 Madde Şekli: 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ı yapa…

Devamı »

May 09, 2014

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 Dosyasını Çağırma 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 "" ve…

Devamı »

Apr 30, 2014

Load more posts

Css Eğitimi Ders 14-Transparan

Css Eğitimi Ders 13-Kaydırma

Css Eğitimi Ders 12-Pozisyon

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

Css Eğitimi Ders 10-Gruplama

Css Eğitimi Ders 8-Tablolar

Css Eğitimi Ders 7-Listeler

Css Eğitimi Ders 3-Birkaç Bilgi

Popüler

Arşiv