TÜM CSS KODLARI VE ANLAMLARI

Bu yazımızda Css kodları nelerdir? Css3 ile gelen yeni Css özellikleri nelerdir? ve bu kodların ne işe yaradığını yani anlamlarını öğreneceğiz. 

Tüm kodları gruplayarak listeledim. Gruplamış olduğum her tabloda kodun açıklamasını kısaca özetlemeye çalıştım. Eğer o kod ile ilgili detaylı yazmış olduğum bir yazım bulunuyorsa, tablonun altında o yazılara link verdim. Kısa açıklamaların yeterli olmadığını düşündüğünüz yerlerde daha detaylı anlatım için yazılarımı okuyabilirsiniz. 

FONTLAR İÇİN KULLANDIĞIMIZ CSS KODLARI VE ANLAMLARI

@font-faceFont face özelliği, bilgisayarımızda hazır olarak gelen yazı tiplerinin ( Arial, Verdana vb..) dışında istediğimiz yazı tiplerini kullanmamıza olanak sağlar.
fontDiğer font özelliklerini tek Css özelliği (font) ile tanımlamamızı sağlar.
font-familyYazıların tipini yani hangi font ailesinden olmasını istiyorsak onu belirtmek için kullanılır.
font-sizeYazı boyutunu değiştirmek için kullanılır.
font-styleYazıları italik yapmak için kullanılır.
font-variantYazılarda küçük harfleri büyük harflere çevirmek için kullanılır.
font-weightYazıları kalın veya ince yapmak için kullanılır.

Css Font Özellikleri ve Kullanımı

Css Font Face Kullanımı

YAZILARA STİL VERMEK İÇİN KULLANDIĞIMIZ CSS KODLARI VE ANLAMLARI

colorYazılara renk vermek için kullanılır.
letter-spacingYazıların karakterleri arasındaki boşluğu arttırmak veya azaltmak için kullanılır.
line-heightSatır yüklekliğini belirlemek için kullanılır.
word-breakSatır sonlarındaki kelimeleri, satırı tam kaplayacak şekilde bölmek için kullanılır.
word-spacingYazıların kelimeleri arasındaki boşluğu arttırmak veya azaltmak için kullanılır.
white-spaceYazılardaki boşlukların nasıl değerlendirileceğini belirlemek için kullanılır.
word-wrapBulunduğu alana sığmayacak kadar uzun olan kelimeleri satır sonundan bölmek için kullanılır.
writing-modeYatay şekilde olan yazıları dikey hale getirmek için kullanılır.
text-transformYazılarda küçük harfleri büyük harfe, büyük harfleri küçük harfe dönüştürmek için kullanılır. Aynı zamanda sadece ilk harfleri büyük diğerleri küçük olacak şekilde kelime ve cümlelerde oluşturabiliriz.
text-alignYazıları yatayda hizalamak için kullanılır. Yani yazının sağda, solda, ortada veya sağa ve sola dayalı şekilde olmasını sağlayabiliriz.
text-decorationYazıların altını, üstünü, üzerini çizmek veya çizili olanları kaldırmak için kullanılır.
text-decoration-colorYazıların altını, üstünü ve üzerini hangi renk ile çizeceğimizi belirtmek için kullanılır.
text-decoration-styleYazıların altını, üstünü ve üzerini hangi stil ile çizeceğimizi belirtmek için kullanılır. Örneğin d düz çizgi, kesikli çizgi vb..
text-indentParagrafın ilk cümlesinin vereceğimiz değer ölçüsünde içeriden yani girintili olarak başlaması için kullanılır.
text-shadowYazılara gölge efekti vermek için kullanılır.

Css Text (Metin) Özellikleri ve Kullanımı

Css Text Shadow Kullanımı

İÇ VE DIŞ BOŞLUK VERMEK İÇİN KULLANDIĞIMIZ CSS KODLARI VE ANLAMLARI

paddingİç boşluk vermek için kullanılır.
padding-bottomAşağı iç boşluk vermek için kullanılır.
padding-leftSola iç boşluk vermek için kullanılır.
padding-rightSağa iç boşluk vermek için kullanılır.
padding-topYukarı iç boşluk vermek için kullanılır.
marginDış boşluk vermek için kullanılır.
margin-bottomAşağı dış boşluk vermek için kullanılır.
margin-leftSola dış boşluk vermek için kullanılır.
margin-rightSağa dış boşluk vermek için kullanılır.
margin-topYukarı dış boşluk vermek için kullanılır.

Css Padding Kullanımı

Css Margin Kullanımı

KENARLIK VERMEK VEYA KÖŞELERİ YUVARLAMAK İÇİN KULLANDIĞIMIZ CSS KODLARI VE ANLAMLARI

border4 tarafa birden kenarlık vermek için kullanılır.
border-leftSola kenarlık vermek için kullanılır.
border-rightSağa kenarlık vermek için kullanılır.
border-bottomAşağı kenarlık vermek için kullanılır.
border-topYukarı kenarlık vermek için kullanılır.
border-color4 tarafa birden kenarlık rengi vermek için kullanılır.
border-left-colorSola kenarlık rengi vermek için kullanılır.
border-top-colorYukarı kenarlık rengi vermek için kullanılır.
border-right-colorSağa kenarlık rengi vermek için kullanılır.
border-bottom-colorAşağı kenarlık rengi vermek için kullanılır.
border-style4 tarafa birden kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.
border-right-styleSağa kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.
border-top-styleYukarı kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.
border-left-styleSola kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.
border-bottom-styleAşağı kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.
border-width4 tarafa birden kenarlık genişliği vermek için kullanılır.
border-top-widthYukarı kenarlık genişliği vermek için kullanılır.
border-right-widthSağa kenarlık genişliği vermek için kullanılır.
border-left-widthSola kenarlık genişliği vermek için kullanılır.
border-bottom-widthAşağı kenarlık genişliği vermek için kullanılır.
border-radius4 köşeyi birden yuvarlamak için kullanılır.
border-top-left-radiusÜst sol köşeyi yuvarlamak için kullanılır.
border-top-right-radiusÜst sağ köşeyi yuvarlamak için kullanılır.
border-bottom-left-radiusAlt sol köşeyi yuvarlamak için kullanılır.
border-bottom-right-radiusAlt sağ köşeyi yuvarlamak için kullanılır.
outline4 tarafa birden dış kenarlık vermek için kullanılır.
outline-color4 tarafa birden dış kenarlık rengi vermek için kullanılır.
outline-style4 tarafa birden dış kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.
outline-width4 tarafa birden dış kenarlık genişliği vermek için kullanılır.

Css Border Kullanımı

Css Border Radius Kullanımı

Css Outline Kullanımı

ANİMASYONLAR İÇİN KULLANDIĞIMIZ CSS KODLARI VE ANLAMLARI

@keyframesAnimasyonlar ile ilgili Css kodlarımızı yazmak için kullanılır.
animationTüm animasyon özelliklerini toplu olarak tek özellikle belirtmek için kullanılır.
animation-delayAnimasyonu belli bir süre sonra başlatmak için kullanılır.
animation-directionAnimasyonun yönünü belirtmek için kullanılır.
animation-durationAnimasyonun ne kadar sürede tamamlanacağını belirtmek için kullanılır.
animation-fill-modeAnimasyonun bittikten sonraki durumunu belirtmek için kullanılır.
animation-iteration-countAnimasyonun kaç defa tekrar edeceğini belirtmek için kullanılır.
animation-nameAnimasyona bir isim vermek için kullanılır.
animation-play-statepaused değeri vererek animasyonları durdurmak için kullanılır.
animation-timing-functionAnimasyonun gerçekleşme biçimini belirtmek için kullanılır. Örneğin gerçekleşecek animasyon, hızlı bir şekilde başlayıp sonlara doğru yavaşlayabilir. Yavaş bir şekilde başlayıp sonlara doğru hızlanabilir veya sabit bir hızda gerçekleşebilir.

Css Animation Kullanımı

ARKAPLAN İÇİN KULLANDIĞIMIZ CSS KODLARI VE ANLAMLARI

backgroundDiğer arkaplan Css özelliklerini tek seferde background özelliği ile kullanabiliriz.
background-attachmentArkaplana yerleştirdiğimiz resmin sabit kalmasını sağlamak için kullanılır.
background-clipArkaplana vermiş olduğumuz rengin başlangıç alanını belirtmek için kullanılır.
background-colorArkaplan rengi vermek için kullanılır.
background-imageArkaplan resmi vermek için kullanılır.
background-originArkaplana yerleştirdiğimiz resmin başlangıç alanını belirtmek için kullanılır.
background-positionArkaplana yerleştirdiğimiz resmin konumunu belirtmek için kullanılır.
background-repeatArkaplana yerleştirdiğimiz resmin yatayda ve dikeyde tekrar edip etmeme durumunu belirtmek için kullanılır.
background-sizeArkaplana yerleştirdiğimiz resmin boyutlarını belirtmek için kullanılır.

Css Background Kullanımı

ÇOKLU SÜTUN OLUŞTURMAK İÇİN KULLANDIĞIMIZ CSS KODLARI VE ANLAMLARI

column-countYazımızı vereceğimiz değer kadar sütunlara ayırmak için kullanılır.
column-gapSütunlar arasındaki mesafeyi belirtmek için kullanılır.
column-ruleSütunlar arasında çizgi oluşturmak için kullanılır.
column-rule-colorSütunlar arasındaki çizginin rengini belirtmek için kullanılır.
column-rule-styleSütunlar arasındaki çizginin stilini belirtmek için kullanılır.
column-rule-widthSütunlar arasındaki çizginin genişliğini belirtmek için kullanılır.
column-spanYazıya vermiş olduğumuz başlığın nerede konumlanacağını belirtmek için kullanılır.
column-widthSütunlara genişlik değeri vermek için kullanılır.
columnsBu özellik ile sütun sayısı (column-count) ve genişlik değerini (column-width) birlikte vererek çoklu sütunları oluşturabiliriz.

Css Column Kullanımı

RESPONSİVE (ESNEK) TASARIMLAR OLUŞTURMAK İÇİN KULLANDIĞIMIZ CSS KODLARI VE ANLAMLARI

flex 
flex-basis 
flex-direction 
flex-flow 
flex-grow 
flex-shrink 
flex-wrap 
order 
justify-content 
align-content 
align-items 
align-self 

Css Flex Kullanımı

RESİMLİ KENARLIK VERMEK İÇİN KULLANDIĞIMIZ CSS KODLARI VE ANLAMLARI

border-imageBorder image özelliği, bir Html öğesinin kenarlıklarına resim yerleştirmek için kullanılır.
border-image-repeatHtml öğesinin kenarlarına uygulanacak parçaların tekrarlanması veya uzatılması gibi durumları belirtmek için kullanılır.
border-image-sliceKullanmak istediğimiz resmin hangi boyutlarda parçalara ayrılacağını ve bu parçaların köşelere ve kenarlara nasıl yerleştirileceğini belirtmek için kullanılır. 
border-image-sourceKullanmak istediğimiz resmin url’ini vermek için kullanılır.

Css Border Image Kullanımı

DİĞER CSS KODLARI VE ANLAMLARI

box-shadowGölge efekti vermek için kullanılır.
displayDisplay özelliği, Html etiketlerinin sayfa üzerinde yerleştirilmesini ve düzenlenmesini sağlar.
positionPosition özelliği ile Html sayfamızdaki nesnelerin konumları değiştirebilir ve dilediğimiz gibi yerleştirmeler yapabiliriz.
bottomHtml öğesinin, altındaki öğeyle arasındaki mesafeyi belirtmek için kullanılır.
topHtml öğesinin, üstündeki öğeyle arasındaki mesafeyi belirtmek için kullanılır.
rightHtml öğesinin, sağındaki öğeyle arasındaki mesafeyi belirtmek için kullanılır.
leftHtml öğesinin, solundaki öğeyle arasındaki mesafeyi belirtmek için kullanılır.
list-styleDiğer liste özelliklerini ayrı ayrı tanımlamak yerine tek seferde list-style özelliği ile tanımlayabiliriz.
list-style-imageBu özellik ile listelerin başlarındaki işaretler yerine resimler kullanabiliriz.
list-style-positionBu özellik ile listelerin başlarındaki işaretlerin pozisyonlarını belirleyebiliriz.
list-style-typeBu özellik ile listelerin başındaki işaretler değiştirilebilir veya tamamen kaldırılabilir.
border-collapseHtml tablolarına kenarlık değeri verdikten sonra tablo kenarlığı ile hücreler arasındaki boşluğu kapatmak için kullanılır.
border-spacingHtml tablolarında hücreler arası boşlukları ayarlamak için kullanılır.
caption-sideHtml tablolarında tablonun başlığının konumunu ayarlamak için kullanılır.
empty-cellsHtml tablolarında tablonun boş hücrelerinin görünüp görünmemesini ayarlamak için kullanılır.
widthGenişlik değeri vermek için kullanılır.
heightYükseklik değeri vermek için kullanılır.
max-heightMax yükseklik değeri vermek için kullanılır.
max-widthMax genişlik değeri vermek için kullanılır.
min-heightMin yükseklik değeri vermek için kullanılır.
min-widthMin genişlik değeri vermek için kullanılır.
floatHtml öğelerini birbiri ardına hizalamak için kullanılır.
clearFloat özelliği uygulanan Html öğelerinden, float özelliğinin etkisini kaldırmak için kullanılır.
overflowX ve Y eksenindeki taşma durumları için kullanılır.
overflow-xX eksenindeki taşma durumları için kullanılır.
overflow-yY eksenindeki taşma durumları için kullanılır.
transitionDiğer transition özelliklerini toplu şekilde yazmak için kullanılır.
transition-delayTransition’ın gerçekleşmesini belirtilen süre kadar geciktirmek için kullanılır.
transition-durationTransition’ın kaç saniyede gerçekleşmesini istiyorsak onu belirtmek için kullanılır.
transition-propertyÖğenin hangi Css özelliğine uygulamak istiyorsak onu belirtmek için kullanılır.
transition-timing-functionTransition’ın gerçekleşme biçimini belirtmek için kullanılır. Gerçekleşecek değişim, hızlı bir şekilde başlayıp sonlara doğru yavaşlayabilir. Yavaş bir şekilde başlayıp sonlara doğru hızlanabilir veya sabit bir hızda gerçekleşebilir.
cursorFare imlecinin görünümünü değiştirmek için kullanılır.
filterFilter özelliği ile bir Html etiketi üzerinde photoshop benzeri efektleri (bulanıklaştırma, parlaklık, şeffaflık vb..) uygulayabiliriz.
z-indexHangi öğenin daha üstte olacağını belirtmek için kullanılır.
@mediaTasarımların responsive olması için gerekli kodların içerisine yazılacağı özelliktir.
object-fitObject fit özelliği, resim veya videolarımızı ebeveyn etiketleri içerisinde uygun bir şekilde boyutlandırmamızı sağlar.
opacityŞeffaflık değeri vermek için kullanılır.
resizeResize özelliği ile bir Html etiketinin yeniden boyutlandırılabilmesini sağlayabiliriz. Yada boyutlandırılabilmesini engelleyebiliriz.
scroll-behaviorHtml sayfalarımızda hedef olarak vermiş olduğumuz linklere giderken, aniden değil de animasyonlu bir şekilde gitmesini sağlamak için kullanılır.
user-selectBu özellik sayesinde yazıların mouse ile seçilebilmesini engelleyebiliyoruz.
visibilityÖğenin görünürlüğünü ayarlamak için kullanılır.
transformTransform özelliği ile bir Html öğesi üzerinde döndürme, boyutlandırma, eğme gibi işlemleri  gerçekleştirebiliriz.
@importDışardan Css dosyalarını sayfamıza eklemek için kullanılır.

Css Width, Height, Max-Width, Max-Height, Min-Width, Min-Height Kullanımı

Css Liste Özellikleri ve Kullanımı

Css Tablo Özellikleri ve Kullanımı

Css Display Kullanımı

Css Overflow Kullanımı

Css Position Kullanımı

Css Z-index Kullanımı

Css Float ve Clear Kullanımı

Css Opacity Kullanımı

Css Box Shadow Kullanımı

Css Transition Kullanımı

Css Transform Kullanımı

Css Resize Kullanımı

Css Filter Kullanımı

Css Object Fit Kullanımı

Css Media Kullanımı

Css Cursor Kullanımı

Css User Select Kullanımı

Css Scroll Behavior Kullanımı

Css İmport Kullanımı

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Leave a Reply