Fulya Hazan

Creative Graphic Designer & Motion Graphic Artist

Mini Css Sözlüğü

Fulya Hazan

Creative Graphic Designer & Motion Graphic Artist

 

Benim gibi yeni başlayanlar için faydalı olacağını düşündüğüm yalın ve net anlatılmış mini css sözlüğü.

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

Diğer Makaleler

Şehrin Fark Edilmeyen Demirbaşları Tişört Tasarımlarına Yansıdı.

Sanatçı kolektifi Raubdruckerin, her gün farkına bile varmadan üzerinden geçtiğimiz rögar ...

Fotoğrafçılıkta 'Çoklu Pozlama' Büyüsü

Norveçli sanatçi Andreas Lie'nin çoklu pozlama teknigi kullanarak yakaladigi muhtesem kareler... ...

Ünlü Aktörleri Özetleyen 10 Gif

Dijital sanatçı Prasad Bhat hayranı olduğu aktörleri yaratıcılığını kullanarak tüm kariyerlerini ...

Fin Dac İmzalı Kadın İllüstrasyonları

Popüler kültürden geyşa kültürüne nefis kadın figürleri… Son fresklerini ‘Wild Roses’ adıyla ...

Angel Boligan'ın Günümüz İnsanları...

Her biri üzerinde ayrı düşünülmesi gereken, insanların sorun ve kusurlarını gözümüze ...

Jonathan Calugi 'Bir Çizgi Bir Dünya'

  İtalyan sanatçı Jonathan Calugi'den muhteşem ilüstrasyonlar.