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-face Font 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.
font Diğer font özelliklerini tek Css özelliği (font) ile tanımlamamızı sağlar.
font-family Yazıların tipini yani hangi font ailesinden olmasını istiyorsak onu belirtmek için kullanılır.
font-size Yazı boyutunu değiştirmek için kullanılır.
font-style Yazıları italik yapmak için kullanılır.
font-variant Yazılarda küçük harfleri büyük harflere çevirmek için kullanılır.
font-weight Yazı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

color Yazılara renk vermek için kullanılır.
letter-spacing Yazıların karakterleri arasındaki boşluğu arttırmak veya azaltmak için kullanılır.
line-height Satır yüklekliğini belirlemek için kullanılır.
word-break Satır sonlarındaki kelimeleri, satırı tam kaplayacak şekilde bölmek için kullanılır.
word-spacing Yazıların kelimeleri arasındaki boşluğu arttırmak veya azaltmak için kullanılır.
white-space Yazılardaki boşlukların nasıl değerlendirileceğini belirlemek için kullanılır.
word-wrap Bulunduğu alana sığmayacak kadar uzun olan kelimeleri satır sonundan bölmek için kullanılır.
writing-mode Yatay şekilde olan yazıları dikey hale getirmek için kullanılır.
text-transform Yazı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-align Yazı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-decoration Yazıların altını, üstünü, üzerini çizmek veya çizili olanları kaldırmak için kullanılır.
text-decoration-color Yazıların altını, üstünü ve üzerini hangi renk ile çizeceğimizi belirtmek için kullanılır.
text-decoration-style Yazı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-indent Paragrafın ilk cümlesinin vereceğimiz değer ölçüsünde içeriden yani girintili olarak başlaması için kullanılır.
text-shadow Yazı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-bottom Aşağı iç boşluk vermek için kullanılır.
padding-left Sola iç boşluk vermek için kullanılır.
padding-right Sağa iç boşluk vermek için kullanılır.
padding-top Yukarı iç boşluk vermek için kullanılır.
margin Dış boşluk vermek için kullanılır.
margin-bottom Aşağı dış boşluk vermek için kullanılır.
margin-left Sola dış boşluk vermek için kullanılır.
margin-right Sağa dış boşluk vermek için kullanılır.
margin-top Yukarı 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

border 4 tarafa birden kenarlık vermek için kullanılır.
border-left Sola kenarlık vermek için kullanılır.
border-right Sağa kenarlık vermek için kullanılır.
border-bottom Aşağı kenarlık vermek için kullanılır.
border-top Yukarı kenarlık vermek için kullanılır.
border-color 4 tarafa birden kenarlık rengi vermek için kullanılır.
border-left-color Sola kenarlık rengi vermek için kullanılır.
border-top-color Yukarı kenarlık rengi vermek için kullanılır.
border-right-color Sağa kenarlık rengi vermek için kullanılır.
border-bottom-color Aşağı kenarlık rengi vermek için kullanılır.
border-style 4 tarafa birden kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.
border-right-style Sağa kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.
border-top-style Yukarı kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.
border-left-style Sola kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.
border-bottom-style Aşağı kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.
border-width 4 tarafa birden kenarlık genişliği vermek için kullanılır.
border-top-width Yukarı kenarlık genişliği vermek için kullanılır.
border-right-width Sağa kenarlık genişliği vermek için kullanılır.
border-left-width Sola kenarlık genişliği vermek için kullanılır.
border-bottom-width Aşağı kenarlık genişliği vermek için kullanılır.
border-radius 4 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-radius Alt sol köşeyi yuvarlamak için kullanılır.
border-bottom-right-radius Alt sağ köşeyi yuvarlamak için kullanılır.
outline 4 tarafa birden dış kenarlık vermek için kullanılır.
outline-color 4 tarafa birden dış kenarlık rengi vermek için kullanılır.
outline-style 4 tarafa birden dış kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.
outline-width 4 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

@keyframes Animasyonlar ile ilgili Css kodlarımızı yazmak için kullanılır.
animation Tüm animasyon özelliklerini toplu olarak tek özellikle belirtmek için kullanılır.
animation-delay Animasyonu belli bir süre sonra başlatmak için kullanılır.
animation-direction Animasyonun yönünü belirtmek için kullanılır.
animation-duration Animasyonun ne kadar sürede tamamlanacağını belirtmek için kullanılır.
animation-fill-mode Animasyonun bittikten sonraki durumunu belirtmek için kullanılır.
animation-iteration-count Animasyonun kaç defa tekrar edeceğini belirtmek için kullanılır.
animation-name Animasyona bir isim vermek için kullanılır.
animation-play-state paused değeri vererek animasyonları durdurmak için kullanılır.
animation-timing-function Animasyonun 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

background Diğer arkaplan Css özelliklerini tek seferde background özelliği ile kullanabiliriz.
background-attachment Arkaplana yerleştirdiğimiz resmin sabit kalmasını sağlamak için kullanılır.
background-clip Arkaplana vermiş olduğumuz rengin başlangıç alanını belirtmek için kullanılır.
background-color Arkaplan rengi vermek için kullanılır.
background-image Arkaplan resmi vermek için kullanılır.
background-origin Arkaplana yerleştirdiğimiz resmin başlangıç alanını belirtmek için kullanılır.
background-position Arkaplana yerleştirdiğimiz resmin konumunu belirtmek için kullanılır.
background-repeat Arkaplana yerleştirdiğimiz resmin yatayda ve dikeyde tekrar edip etmeme durumunu belirtmek için kullanılır.
background-size Arkaplana 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-count Yazımızı vereceğimiz değer kadar sütunlara ayırmak için kullanılır.
column-gap Sütunlar arasındaki mesafeyi belirtmek için kullanılır.
column-rule Sütunlar arasında çizgi oluşturmak için kullanılır.
column-rule-color Sütunlar arasındaki çizginin rengini belirtmek için kullanılır.
column-rule-style Sütunlar arasındaki çizginin stilini belirtmek için kullanılır.
column-rule-width Sütunlar arasındaki çizginin genişliğini belirtmek için kullanılır.
column-span Yazıya vermiş olduğumuz başlığın nerede konumlanacağını belirtmek için kullanılır.
column-width Sütunlara genişlik değeri vermek için kullanılır.
columns Bu ö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-image Border image özelliği, bir Html öğesinin kenarlıklarına resim yerleştirmek için kullanılır.
border-image-repeat Html öğesinin kenarlarına uygulanacak parçaların tekrarlanması veya uzatılması gibi durumları belirtmek için kullanılır.
border-image-slice Kullanmak 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-source Kullanmak istediğimiz resmin url’ini vermek için kullanılır.

Css Border Image Kullanımı

DİĞER CSS KODLARI VE ANLAMLARI

box-shadow Gölge efekti vermek için kullanılır.
display Display özelliği, Html etiketlerinin sayfa üzerinde yerleştirilmesini ve düzenlenmesini sağlar.
position Position özelliği ile Html sayfamızdaki nesnelerin konumları değiştirebilir ve dilediğimiz gibi yerleştirmeler yapabiliriz.
bottom Html öğesinin, altındaki öğeyle arasındaki mesafeyi belirtmek için kullanılır.
top Html öğesinin, üstündeki öğeyle arasındaki mesafeyi belirtmek için kullanılır.
right Html öğesinin, sağındaki öğeyle arasındaki mesafeyi belirtmek için kullanılır.
left Html öğesinin, solundaki öğeyle arasındaki mesafeyi belirtmek için kullanılır.
list-style Diğer liste özelliklerini ayrı ayrı tanımlamak yerine tek seferde list-style özelliği ile tanımlayabiliriz.
list-style-image Bu özellik ile listelerin başlarındaki işaretler yerine resimler kullanabiliriz.
list-style-position Bu özellik ile listelerin başlarındaki işaretlerin pozisyonlarını belirleyebiliriz.
list-style-type Bu özellik ile listelerin başındaki işaretler değiştirilebilir veya tamamen kaldırılabilir.
border-collapse Html 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-spacing Html tablolarında hücreler arası boşlukları ayarlamak için kullanılır.
caption-side Html tablolarında tablonun başlığının konumunu ayarlamak için kullanılır.
empty-cells Html tablolarında tablonun boş hücrelerinin görünüp görünmemesini ayarlamak için kullanılır.
width Genişlik değeri vermek için kullanılır.
height Yükseklik değeri vermek için kullanılır.
max-height Max yükseklik değeri vermek için kullanılır.
max-width Max genişlik değeri vermek için kullanılır.
min-height Min yükseklik değeri vermek için kullanılır.
min-width Min genişlik değeri vermek için kullanılır.
float Html öğelerini birbiri ardına hizalamak için kullanılır.
clear Float özelliği uygulanan Html öğelerinden, float özelliğinin etkisini kaldırmak için kullanılır.
overflow X ve Y eksenindeki taşma durumları için kullanılır.
overflow-x X eksenindeki taşma durumları için kullanılır.
overflow-y Y eksenindeki taşma durumları için kullanılır.
transition Diğer transition özelliklerini toplu şekilde yazmak için kullanılır.
transition-delay Transition’ın gerçekleşmesini belirtilen süre kadar geciktirmek için kullanılır.
transition-duration Transition’ı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-function Transition’ı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.
cursor Fare imlecinin görünümünü değiştirmek için kullanılır.
filter Filter özelliği ile bir Html etiketi üzerinde photoshop benzeri efektleri (bulanıklaştırma, parlaklık, şeffaflık vb..) uygulayabiliriz.
z-index Hangi öğenin daha üstte olacağını belirtmek için kullanılır.
@media Tasarımların responsive olması için gerekli kodların içerisine yazılacağı özelliktir.
object-fit Object 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.
resize Resize özelliği ile bir Html etiketinin yeniden boyutlandırılabilmesini sağlayabiliriz. Yada boyutlandırılabilmesini engelleyebiliriz.
scroll-behavior Html 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-select Bu özellik sayesinde yazıların mouse ile seçilebilmesini engelleyebiliyoruz.
visibility Öğenin görünürlüğünü ayarlamak için kullanılır.
transform Transform özelliği ile bir Html öğesi üzerinde döndürme, boyutlandırma, eğme gibi işlemleri  gerçekleştirebiliriz.
@import Dış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.

2 Yorum

  1. Lokman Ağustos 5, 2019 Cevapla
    • admin Ağustos 5, 2019

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link