CSS Pseudo Sınıfları – Özel Efektler

CSS pseudo-classes bazı seçicilere özel efekt vermemizi sağlayan bir sınıftır. Bu verilen adın Türkçe açıklaması olmadığı ya da tam karşılanmadığı için orjinal ismini yazdım.. CSS içerisinde bazen özel efektlere ihtiyac duyarız.. Bunlar pseudo sınıfları içerisinde XHTML’e atayacağımız bazı seçicilerin kendi özelliklerinin dışına vurulmuş halidir.

Söz Dizimi

pseudo-classes söz dizimi şu şekilde oluşturulur;

seçici:pseudo-class {özellik:değer;}

Continue reading

CSS Floating – Sabit Olmayan Nesneler

Merhaba arkadaşlar.. CSS Advanced kategorisinde CSS Floating adındaki WordPresste bir nevi Thumb olarak da adlandırılabilecek olan resimlerimizi yazılarımız ile bir kullanabileceğimiz ve bununla da sınırlı olmayan birkaç CSS float özelliğini göstereceğim.

CSS Float Nedir?

CSS Float özelliği ile birlikte, bir elemanı diğerlerinden bağımsız olarak sağ ya da solda gösterip, elemanın gerisinde kalan alanları (aşağı ya da yukarı gibi) boşluk olarak değerlendirip oaralarıda kullanabileceğimiz sayfalar yapabiliriz. Continue reading

CSS Padding Özelliği

CSS Margin e bir alternatif olarak düşünülen fakat aslında bambaşka bir özellik olan padding ise kullanımı margin gibi olan fakat bu çerçevede ayıracağımız boşluğu, çerçeve, başka bir katmandan uzaklaşma, bir nesneye olan uzaklık olarak değer katılır.. Padding özelliği ile, örneğin; bir yazınınza çerçeve eklediyseniz yada background color özelliği verdiyseniz, bu background’unuzu ya da çerçeveyi dilediğiniz kadar uzatma, ya da o belirlediğiniz çerçeveyi yazıdan uzaklaştırma işlevi gibi düşünülebilir.

Olası Değerler

Değer Açıklama
length pixex, pt, em gibi değerler kullanılır.
% Değer % olarak kullanılır.

Continue reading

CSS Margin Özelliği

Margin özelliğini çoğunuz duymuş olmalısınız.. Bilindiği gibi margin bir elementin etrafını temizlemeye yarar.. Bu ne demek? Şöyle bir örnek ile açıklayalım; eğer bir katman ya da her hangi bir objeniz mevcut.. Bu objeyi diğer objelerden ayrı tutmak, yukarı da yada aşağıda boşluk bırakmak  yada diğer bir elementten uzaklaştırmak için kullanılır..

top, right, bottom, ve left Margin özellikleri, sizin isteğinize göre dıştan, içten, sağ ve soldan belirleyeceğiniz alanları destekler.. Ayrıca margin özelliğinde negatif değerler kullanılarak boşluk verme özelliğini tam ters fonksiyonda gerçekleştirebilirsiniz..İlk olarka olası değerlere bir göz atalım; Continue reading

CSS Outline – Dış Çizgiler

CSS Border özelliğinden sonra ufak bir bilgi daha vermek istiyorum.. Bu aşamada, CSS içerisinde aslında border gibi kullanabileceğimiz bir örnek daha mevcut ki buna da outline diyoruz.

Outline özelliği içerisinde; border‘da kullandığımız gibi, style, color ve width ayarlarını kullanarabiliriz.Örnek;

p
{
border:1px solid red;
outline:green dotted thick;
}

Continue reading

CSS Tablo Stilleri

CSS Stillerinin Son başlığı olan tablo stillerinden bahsedeceğim.. Bu konu bir kaç başlıktan oluşacaktır, her başlık CSS Tablo Stillerinin bir parçası olarak düşünülebilir.

Tablo Kenarlıkları

CSS Tablo Stillerinin Kenarlıklarını ayarlarken CSS border özelliği kullanılır.Aşağıda bir örnek göstererek border özelliğini açıklayalım; Continue reading

CSS Listeleme Stilleri

CSS Listeleme özellikleri aşağıdaki maddeleri sağlar;

  • Sıralı listeler için Farklı liste öğesi şeklinde gösterim
  • Sırasız listeler için farklı listeleme öğeleri
  • Listeleme işlemini küçük resimlerle gösterebilme

Liste

Listeleme işlemi HTML içerisinde iki ayrı biçimde kullanılır:

  • Sırasız listeler – liste öğeleri mermi ile işaretlenir
  • Sıralı  listeler – liste öğeleri sayı veya harf ile işaretlenir

CSS ile bu listeleme işini mermi yada sayıların dışında dilediğimiz bir resmi de girebiliriz. Continue reading

CSS Link Stilleri

CSS Link stilleri diğer yazı stillerinden ayrıcalıklı olarak CSS stillendirmeleri alabilir.. (örneğin;color, font-family, background-color)

Özel durumlar olmadıkça, anonim bir değer atanmayan bir HTMl link tagına 4 ayrı özellik eklenebilir. Bunlar;

  • a:link – a normal, ziyaret edilmemiş link
  • a:visited – a linki ziyaret edilmiş linkleri
  • a:hover – a linkine mouse ile üzerine gelince oluşacak stil
  • a:active – a linkine seçildiğinde oluşacak stil

Hemen bir örnek yapalım; Continue reading

CSS ile Yazı Stilleri

[dropcap]M[/dropcap]erhaba Zingocan.com Takipçileri.. Dün bahsettiğim gibi en basitten alarak CSS derslerine başlamıştık.. Bu kısa dersimizde de CSS Text Stilling denilen Yazı stilleri, yazılara stil kazandırma özelliklerini göstereceğim.. Bu özellik bir kaç bölümden oluşacaktır. İlk olarak;

Yazı Renkleri (Text Color):

CSS üzerinde çalışırken renk ayarlarını 3 şekilde gösteririz. Bunlar;

  • İsim – Rengin ingilizce ismi, Örneğin; red, green, black gibi.
  • RGB – RGB Değeri girerek, Örneğin;”rgb(255,0,0)”
  • Hex – Hex değeri olarak geçen, türkçeye çevirdiğimizde tam karşılamasa da renk kodlarını kullanarak, Örneğin;”#ff0000″ Continue reading

CSS Baştan Alalım?

Merhaba arkadaşlar.. jQuery Derslerime gösterdiğiniz ilginiz için hepinize çok teşekkür ederim.. Aldığım birkaç mail ve istek sonucunda benim de bildiğim kadarıyla CSS konusuna da el atmaya karar verdim.. İlk olarak basit bir kaç bilgi vereceğim.. Bu bilgilerde video çekmeye ihtiyaç duymadım zaten gerek de yok gibi..

[dropcap]C[/dropcap]SS konusunda aslında hiç bilmeyenler için birkaç ders eklemiştim fakat gördüğüm kadarıyla yine birkaç arkadaş CSS kullanımında zorluk çekmekte.. Bu konu itibariyle CSS’i daha kolay anlama ve uygulama konusunda sizlerinde desteğiyle baştan başlayalım dedim.. Continue reading