Wolder King: Css Eğitimleri

Css Eğitimleri 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 9-Kutu Modeli (Videolu Anlatım)

<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 yapmanızı öneririm. 1. Video 2. Video 3. Video …

Devamı »

May 18, 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 6-Bağlantı Özellikleri

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 bazı özelliklerle yönetilir. a:link - Normal Görünüm a:visited - Ziyaret edilmiş Görünüm a:hover - Fare İle Üzerinde Durulduğunda Görünüm a:active - Tıklanılan Anda Gö…

Devamı »

May 05, 2014

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 ama biraz farklı yazı rengi belirleyelim. Örneğin: a { color: white; } Bu stil ile bütün a kümelerinin beyaz olmalarını sağladık. Yazı Hizası Normalde kullandığımız…

Devamı »

May 05, 2014

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 renklerin nasıl kullandığını anlatmak isterdim fakat bu bilindik bir şey. Bunu kullanarak öğreniceksiniz. Zaten ccs'nin temeli renklerdir. Bir örnek yapalım: body { backg…

Devamı »

May 05, 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

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. Hiç uzatmadan başlayalım. Class 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 ö…

Devamı »

Apr 30, 2014

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ı öğretmeyi düşünüyoruz. Neyse uzatmadan başlayalım. Css Nedir? Ne İşe Yarar? Nereye Yazılır? Css kodu Html ile yazılmış bir siteyi düzenlemeye yarar. Örneğin "h1" etiketinin …

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 9-Kutu Modeli (Videolu Anlatım)

Css Eğitimi Ders 8-Tablolar

Css Eğitimi Ders 7-Listeler

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

Css Eğitimi Ders 5-Yazı

Css Eğitimi Ders 4-Arkaplan

Css Eğitimi Ders 3-Birkaç Bilgi

Css Eğitimi Ders 2-Class ve ID

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

Popüler

Arşiv