Yana Yaslama (Float ve Clear) Günümüzde modern web sayfalarında float özelliği bir çok yerde kullanılmaktadır. Örnek vermek gerekirse navbar yapımında genellikle listeler sola veya sağa yaslanmış durumda kullanılır. Resimli bir makalenin içinde paragraflar ve resimler ile ilgili olarak birçok yerde kullanılır. Float özelliğinin en çok left veya right hizalaması kullanılır. Aldığı değerler; Float: left | […]

Aşağıda temel olarak html dosyasında tablo oluşturulmuş ve aşağıdaki tüm anlatım ve örnekler bu dosya üzerinden verilmiştir. Tablo Kenarlıkları (Border) / Sınırları Kenarlıklar konusunda anlatılan tüm özellikler tablo işlemlerinde de kullanılabilir. Kenarlık (Border) ve Özellikleri adlı yazıma ulaşmak için tıklayınız. Tablo Kenarlıklarını Daraltma (border-collapse) Tablo ögelerinden tablo başlığı (<th> table head), hüçre içeriklerine (<td> table […]

CSS Listeler Bu konumuzda CSS ile liste stil atamalarını göreceğiz. HTML derslerimizden hatırlarsak kullandığımız 3 çeşit liste etiketi bulunuyordu. Sayılabilen Listeler (Ordered Lists <ol>) Sayılamayan Listeler (Unoredered Lists <ul>) Açıklama Listeleri (Description Lists <dl>) Açıklama listelerinin çok fazla kullanılmamasına rağmen sayılabilen veya sayılamayan listeler HTML tasarımlarında çokça kullanılırlar. Sadece liste olarak düşünmeyin CSS ile bir navbar yapımında dahi […]

CSS’de Hyperlink Bağlantı Stilleri Hyperlinklerin bilindiği üzere varsayılan stil atamaları mevcuttur. Normal hiç ziyaret edilmemiş bir link mavi renkte, ziyaret edilen link mor renkli olur. Ayrıca her hyperlink yaratıldığında altı çizili bir görünüm alır. Üzerine basılı tutulduğunda aktif halde kırmızı rengi alacaktır. İşte bu stilleri biz kendimize göre tasarlayabiliriz. Bahsettiğim üzere bir hyperlink’in 4 çeşit […]

Fontlar ve Özellikleri Bu bölümümüzde CSS üzerinden web sayfalarında kullanılan fontlar, yazı şekillerinden bahsedeceğiz. Genelde yeni başlayanlar için bu konu biraz soru işaretleriyle doludur. Başınıza gelmiştir, siteniz için bir font seçmişsinizdir, harikadır, sanki sizin web siteniz için yaratılmıştır bu fontlar. Local hostunuzda tasarladığınız ve hostinginize yükleyeceğiniz web sayfanızı görüyorsunuz mükemmel, hosting adresinize kopyalıyorsun ve ilk […]

Bu yazımda ve eğitimde CSS dilinin text, yazı  özellikleri ve değerlerinin HTML üzerinde yazılara nasıl etki ettiğini göreceğiz. Aşağıdaki HTML kod bloğuna style.css dosyası external olarak eklenmiştir. Her bir özellik maddesi için yazılmış olan style.css dosyasını ayrı ayrı index.html üzerinde deneyebilirsiniz. index.html Yazı Rengi Özelliği (color:) CSS’de color özelliğini en yaygın olarak kullanılan 3 şekli […]

Kutu Modeli CSS’de tüm HTML etiketleri veya elemanları genişliği ve yüksekliği olan bir kutu (box) olarak düşünülür. CSS Kutu modeli (BoxModel) bu mantıkla, HTML etiketinin etrafını saran katmanlar dizisi olup, içeriğin kendisi (content), dolgu (padding), kenarlıklar (border) ve kenar boşluklarından (margin) oluşur. Bir elementin toplam genişlik ve toplam yüksekliği, box model (kutu modeli) kavramındaki elemanların […]

CSS’de Genişlik ve Yükseklik CSS’de en çok kullanılan özellikler arasındadır genişlik ve yükseklik özellikleri. Web tasarımları genellikle bir tasarımcı tarafından photoshop gibi programlarda tasarlanır ve buna bağlı olarak html ve css kullanılarak büyük oranda aynısı elde edilir. Bu noktada bir web sayfasının genişlik değerine göre ölçme, biçme ve hesaplama gerekir. Bu noktada etiketlerin konumuna göre […]

Padding Türkçe anlamı malumunuz dolgu demektir. Padding özelliğinin mantığı için şunu düşünün, bir arsanız var ve ev yapacaksınız. Arsanızın bir kare olduğunu ve her bir kenarının 10 metre olduğunu düşünün. Bu arsanın alanı doğal olarak 100metre kare yapar. Bu arsaya bir ev yaptığınızda net daire alanı hiç bir zaman 100metre kare olamaz. Çünkü kullandığınız tuğla, […]

Bu dersimizde CSS’de arkaplan özelliklerini ve alabileceği değerleri öğreneceğiz. Aşağıdaki tüm stil özelliklerini HTML sayfası üzerinde kendi editörünüzde deneyebilirsiniz. Arkaplan Rengi (background-color) Bu özelliğin alacağı değerler doğrudan yazılacağı gibi (Ör: red, white, purple, black) HEX renk kodları ve RGB renk skalası kullanılabilir. Arkaplan Resmi (background-image) Örneklerde kullanılan arkaplan resimlerini indirmek için tıklayınız. Arka plan stil […]