CSS Kaydırma (CSS Float)

23 Haziran 2017

Float, Css ile web sayfası tasarımı yaparken en çok kullanılan değerlerin başında gelir. Elementi akışın dışına çıkarmak için kullanılan yöntemdir. Bu özellikler ile nesnelerin pozisyonları belirlenir. <! DOCTYPE html> <html> &nbsp; <head> <title>CSS Float</> <style> .resim { float: right; } </style> </head> <body> <img class="resim" src="../klasor/resim.png" /> </body> </hmtl> Yukarıdaki örnekte tanımladığım "float" içine "right" değerini verdim. "float" değerini atamamış olsaydık tarayıcıda çalıştırdığımızda resim sol tarafta görünecekti. Ancak "right" konumlandırmasını yaptığımızdan ...

CONTINUE READING

CSS Kutu Modeli (CSS Box Model)

23 Haziran 2017

Merhaba şimdi sıra geldi CSS Kutu Modeli Nedir? (CSS Box Model Nedir?) sorumuzu cevaplandırmaya :D CSS'de her bir öğe bir kutu oluşturur. Eğer konu CSS'de tasarım ve düzense "Kutu Modeli" terimi kullanılır. CSS Kutu Modeli HTML bileşenlerini saran margin (kenar mesafesi), border (sınır) ,padding (boşluk) ve content (içerik) elemanlarından oluşur. Kutu Modeli, elemanların etrafına sınır (border) eklememize ve elemanlar arasındaki boşluğu ...

CONTINUE READING

CSS Kalıtım (Inheritance)

22 Haziran 2017

CSS ve HTML kodları ile çalışırken tüm elementlere tek tek stil atamak yorar ve zaman kaybına neden olur. Bu uzun yolu tercih etmemek ve gereksiz kodlardan uzaklaşmak için elementlere atayacağımız değerin tüm child elementlere uygulanmasını sağlayacağız. İşte bu özelliğe katılım adı veriliyor. Tıpkı anne ve babanın özelliklerinin çocuklara geçmesi gibi bir parent (ebeveyn)'a atanan stil değerleri ...

CONTINUE READING

CSS Important Özelliği

22 Haziran 2017

Bir stil üzerinde yaptığınız değişiklikle uygulanmadığında bu stil değerlerini işaretleyebilirsiniz. İşaretlediğinizde yaptığınız değişiklik gerçekleşmiş olacaktır. <! DOCTYPE html> <html> <head> <title></title> <style> <div { background-color: blue !important; } </style> </head> <body> <div>Css Dersleri</div> </body> </html> Yukarıdaki örnekte "style" içerisinde tanımladığım important etiketi ne olursa olsun aynı öğeye etki eden diğer stilleri ezer ve önüne geçer. Diğer tanımlamalar iptal edilir ve bu değişiklik uygulanmış olur. important'ı öğrendik diğer CSS derslerinde görüşmek ...

CONTINUE READING

İç İçe Element Kullanımı

21 Haziran 2017

Html'in bazı elementleri kendi içerisinde diğer elementleri ve öğeleri barındırabilir. Tanımlanan bu elementler hiyerarşik yapıdadır. Kısacası "ebeveyn-çocuk" ilişkisi söz konudur. Örneğin; <Ornek1> <Ornek2></Ornek2> </Ornek1> Yukarıda yer alan örnekte "Ornek1" elementinin içerisinde "Ornek2" elementinin yer aldığını görüyoruz. Bu durumda "Ornek2" elementi "Ornek1" elementinin çocuk (child) elementi oluyor.  

CONTINUE READING

CSS Class Kullanımı

4 Haziran 2017

Class seçicisi tıpkı ID seçicisi gibi etikete ulaşmamızı sağlayan bir yoldur. Fakat ID alanı gibi benzersiz bir tanımlamaya sahip olmak zorunda değildir. Örneğin bir div sayfası içerisinde birde fazla html elementi olabilir. Bu html elementleri div içerisinde olacağı gibi dışında da yer alabilir. Bu gibi durumlarda class özelliği bize kolaylık sağlıyor. Nasıl mı? Hemen inceleyelim. ID ...

CONTINUE READING

CSS ID Kullanımı

4 Haziran 2017

ID, tek bir element için kullanılan tanımlamaya verilen isimdir. Verilen ID değeri tek ve benzersiz olmalıdır. Tek bir elemente tanımlandığı için class gibi birden fazla elementte kullanılamaz. Örnek verecek olursak; <div id="merhaba">dünya</div> İlgili div'e bir ID tanımladık. Artık div'in ID değeri merhaba'dır. *ID değerleri rakamla başlamaz harfle başlamak zorundadır. Şimdi yukarıdaki tanımlamamız için örnek bir css yazalım. #merhaba { Color : Blue; Font-Family ...

CONTINUE READING

HTML Sayfasına Css Ekleme

2 Haziran 2017

Bir Html sayfası kodladınız ve henüz CSS kullanımına başlamadınız. Önce CSS tanımlaması için HTML sayfanıza "HEAD" etiketleri arasına style tanımlaması yapmalısınız. <head> <style> a { text-align:center; float: left; color: #ffffff } </style> </head> Yukarıda örnekte style içerisine yazdığımız kodlar sayfasının stilini değiştirmiştir. Burada a elementine müdahale etmiş olduk. Sayfanın içinde istediğiniz kümeye bu şekilde müdahale edebilirsiniz. Fakat biz burada CSS'i HTML'in içine bütünleştirdik. Kodlar arttıkça ...

CONTINUE READING