Css Stilleri ve İşlevleri & Css Sözlüğü


 

Css Stilleri ve İşlevleri & Css Sözlüğü
Böyle bir yazı uzun zamandır öğrencilerimizden gelen bir istekti aslında.Elimden geldiğince derslerimizde /**/ içerisine yazdığımız açıklamaları bir araya getirdim ve aşağıdaki mini css sözlüğünü oluşturdum.Umarım Faydalı olur.

Emrah Kozan/Web & Graphic instructor

 

ARKAPLAN ÖZELLİKLERİ

background-color: Zeminin rengini belirler.

  • #color : Renk adı.
  • transparent: Zeminin saydam olmasını sağlar.

background-image: Zemine resim yerleştirilmesini sağlar.

  • url : Zemine yerleştirilen resmin adresi.

background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler.

  • repeat : Resmin bütün zemine yayılmasını sağlar.
  • repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.
  • repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar.
  • no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.

background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket  ettirildiğindeki durumunu belirler.

  • scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.
  • fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar
  • background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.
  • top : Resmi yukarı yerleştirir.
  • center : Resmi ortalar.
  • bottom : Resmi aşağı yerleştirir.
  • left : Resmi sola yerleştirir.
  • right: Resmi sağa yerleştirir.
  • …px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.

LİNK ÖZELLİKLERİ
a :Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur.

  • a:hover :Linkin imleç üzerine getirildiğindeki durumudur.
  • a:active :Linkin tıklandığı andaki durumudur.
  • a:visited :Linkin tıklandıktan sonraki durumudur.

 

BİÇİMLENDİRME:
color:Linkin rengini belirler.
background-color:Linkin zemin rengini belirler.
background-image:Linkin zeminine resim ekler(Bu animated-gif de olabilir.)
text-decoration:Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.
font-weight:Yazının kalınlık veya inceliğini belirler.
border:Linkin etrafına kenarlık ekler.
display:Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.

 

LİSTE ÖZELLİKLERİ
list-style-type:Listelerin sıralama türlerini belirler

  • disk:Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.
  • circle : Liste biçiminin çember şeklinde olmasını sağlar.
  • square : Liste biçiminin kare olmasını sağlar.
  • decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
  • lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.
  • upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.
  • lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.
  • upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.
  • none : Listenin simgesiz olmasını sağlar.
  • inside : Listenin ikinci satırının en soldan başlamasını sağlar.
  • Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.

list-style-image : Liste biçiminin resim olmasını sağlar.

 

KATMAN ÖZELLİKLERİ
position:Katmanın yerinin belirlenmesini sağlar.

  • absolute:Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.
  • relative: Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar.
  • static:Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.
  • top:Katmanın üstten ne kadar aşağıda olması gerektiğini belirler.
  • left:Katmanın soldan ne kadar içeride olması gerektiğini belirler.
  • width:Katmanın genişliğinin ne kadar olacağını belirler.
  • height:Katmanın yüksekliğinin ne kadar olacağını belirler.

overflow:Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.

  • auto:Otomatik olarak belirlenir.
  • scroll:Kaydırma çubuğu ekleyerek görünmesini sağlar.
  • visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar.
  • hidden:Sığmayan yerleri gizler.

visibility:Katmanın görünebilirlik ayarını yapar.

  • visible : Katmanın görünür olmasını sağlar.
  • hidden:Katmanı gizler.

z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.

 

FONT ÖZELLİKLERİ
font-family:Yazı türünü belirler.(Arial , Verdana gibi.)
font-style:Yazının normal veya sağa eğik olmasını sağlar.
font-variant:Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.
font-weight:Yazının kalınlık-inceliğini belirler.
font-size:Yazının büyüklüğünü belirler.

 

TEXT ÖZELLİKLERİ
word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.
letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.

  • underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.
  • overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
  • line-through : Kelimenin ortasından çizili olmasını sağlar.

blink : Kelimenin yanıp sönmesini sağlar.(Netscape için)
vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.
text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.

  • capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
  • uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
  • lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.
  • none : Kelimelerin orjinal metindeki gibi olmasını sağlar.

text-align: Metnin dikey olarak nasıl hizalanacağını belirler.

  • left : Metni sola yaslar.
  • right : Metni sağa yaslar.
  • center : Metni ortalar.
  • justify : Metni iki yana yaslar.

text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.
line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)
first-line : Metnin ilk satırının biçimlendirilmesini sağlar.
first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.

 

İMLEÇ ÖZELLİKLERİ

cursor:Fare imlecinin görünümünü ayarlar

  • crosshair:İmlecin artı işareti şeklinde olmasını sağlar.
  • auto:İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar.
  • default:İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar.
  • hand:İmlecin linkte olduğu gibi el şeklinde olmasını sağlar.
  • move:İmlecin taşıma işareti şeklinde olmasını sağlar.
  • ne-resize:İmlecin sağa yatık normal ok olmasını sağlar.
  • nw-resize:İmlecin sola yatık normal ok olmasını sağlar.
  • se-resize:İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar.
  • sw-resize:İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar.
  • n-resize:İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar.
  • s-resize:İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar.
  • w-resize:İmlecin sola doğru ince ok şeklinde olmasını sağlar.
  • e-resize:İmlecin sağa doğru ince ok şeklinde olmasını sağlar.
  • text:İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar.
  • wait:İmlecin meşgul animasyonuna dönüşmesini sağlar.
  • help:İmlecin yardım-soru işaretine dönüşmesini sağlar

KUTU (BOX,DIV)ÖZELLİKLERİ
margin : KUTU ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
margin-top : KUTU ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.
margin-right : KUTU ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.
margin-bottom : KUTU ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.
margin-left : KUTU ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.

padding : KUTU kenarları ile KUTU içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler.
padding-top : KUTUnun üst kenarı ile KUTU içeriği arasında bırakılacak boşluğu belirler.
padding-right : KUTUnun sağ kenarı ile KUTU içeriği arasında bırakılacak boşluğu belirler.
padding-bottom : KUTUnun alt kenarı ile KUTU içeriği arasında bırakılacak boşluğu belirler.
padding-left : KUTUnun sol kenarı ile KUTU içeriği arasında bırakılacak boşluğu belirler.

border : KUTUnun kenarlarının şekillendirilmesini sağlar.

  • border-top : KUTUnun üst kenarının şekillendirilmesini sağlar.
  • border-left : KUTUnun sol kenarının şekillendirilmesini sağlar.
  • border-bottom : KUTUnun alt kenarının şekillendirilmesini sağlar.
  • border-right : KUTUnun sağ kenarının şekillendirilmesini sağlar.
  • border-width : KUTUnun kenarlarının kalınlığını belirler.
  • border-top-width : KUTUnun üst kenarının kalınlığını belirler.
  • border-right-width : KUTUnun sağ kenarının kalınlığını belirler.
  • border-bottom-width : KUTUnun alt kenarının kalınlığını belirler.
  • border-left-width : KUTUnun sol kenarının kalınlığını belirler.
  • border-style : KUTUnun kenarlık türünü belirler.
  • border-top-style : KUTUnun üst kenarlık türünü belirler.
  • border-right-style : KUTUnun sağ kenarlık türünü belirler.
  • border-bottom-style : KUTUnun alt kenarlık türünü belirler.
  • border-left-style : KUTUnun sol kenarlık türünü belirler.
  • border-color : KUTUnun kenarlarının rengini belirler.
  • border-top-color : KUTUnun üst kenarının rengini belirler.
  • border-right-color : KUTUnun sağ kenarının rengini belirler.
  • border-bottom-color : KUTUnun alt kenarının rengini belirler.
  • border-left-color : KUTUnun sol kenarının rengini belirler.

color : KUTUda geçen metnin rengini belirler.
width : KUTUnon genişliğini belirler.
height : KUTUnun yüksekliğini belirler.

EMRAH KOZAN

Web&Grafik Bölüm Başkan Yardımcısı

 

5 Responses to “Css Stilleri ve İşlevleri & Css Sözlüğü

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>