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ı »