Tüm Css Kodları ve Anlamları – Detaylı Anlatım

Yazıları italik yapmak için kullanılır. font-style özelliğine şu değerleri verebiliriz:

• italic
• normal
• oblique : İtalic değerine çok benzer ama daha az tarayıcı tarafından desteklenir.

font-variant özelliğine şu değerleri verebiliriz:

• small-caps : Küçük harfleri büyük harflere dönüştürür.
• normal

Bu özellik ile yazıların kalınlık incelik durumlarını ayarlayabiliriz. font-weight özelliğine şu değerleri verebiliyoruz:

• bold
• bolder
• lighter
• normal
• 100’den 900’e kadar 100’ün katları olacak şekildede verilebilir. 900 en kalını iken, 100’e doğru incelir ve 100’de en ince halini alır.  

Satır sonlarındaki kelimeleri, satırı tam kaplayacak şekilde bölmek için kullanılır. word-break özelliğine şu değerleri verebiliriz:

• keep-all : Varsayılan olarak gelen değer.Satır sonundaki kelimeler bölünmez.
• break-word : Satır sonundaki sığmayan kelimeler bölünür.

Yazılardaki boşlukların nasıl değerlendirileceğini belirlemek için kullanılır. white-space özelliğine şu değerleri verebiliriz:

• normal
• nowrap
• pre
• pre-line
• pre-wrap

Bulunduğu alana sığmayacak kadar uzun olan kelimeleri satır sonundan bölmek için kullanılır. word-wrap özelliğine şu değerleri verebiliriz:

• normal : Varsayılan olarak gelen değer.
• break-word : Sığmayan kelimeyi böler.

Yatay şekilde olan yazıları dikey hale getirmek için kullanılır. writing-mode özelliğine şu değerleri verebiliriz:

• horizontal-tb : Yazı yatay halde olur.
• vertical-lr : Yazı dikey halde olur.
• vertical-rl : Yazı dikey halde olur.

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-transform özelliğine şu değerleri verebiliriz:

• uppercase : Küçük harfleri büyük harfe dönüştürür.
• lowercase : Büyük harfleri küçük harfe dönüştürür.
• capitalize : İlk harf büyük diğer harfler küçük olacak şekilde dönüştürür.

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-align özelliğine şu değerleri verebiliriz:

• right
• left
• center
• justify
• end
• start

Yazıların altını, üstünü, üzerini çizmek veya çizili olanları kaldırmak için kullanılır. text-decoration özelliğine şu değerleri verebiliriz:

• underline : Yazının altını çizer.
• line-through : Yazının üzerini çizer.
• overline : Yazının üstünü çizer.
• none : Varolan etkileri kaldırır.

Yazılara gölge efekti vermek için kullanılır. Vereceğimiz değerler ile gölgenin x ve y eksenindeki konumunu, bulanıklığını ve rengini belirleriz.

İlk verilen değer x ekseni, ikinci verilen değer y ekseni, üçüncü verilen değer bulanıklık, dördüncü verilen değer de rengi için uygulanır.

Bu özellik ile yazılarımızın sığmadığı durumlarda yazının devamının olduğunu belirtmek için “…” (üç nokta) koyabiliriz. text-overflow özelliğine şu değerleri verebiliriz:

• clip : Varsayılan olarak gelen değer.
• ellipsis : Yazının taştığını belirten “…” (üç nokta) koyar.

Html öğelerine iç boşluk vermek için kullanılır. Padding değeri verirken bunu 3 farklı yol ile yapabiliriz. Bunlar:

• length ( padding: 10px; ) : px, pt, cm vb. bir değer verebiliriz.
• % ( padding: 20%; ) : İçerisinde bulunduğu etiketin genişliğinin yüzdesi olarak değer verebiliriz.
• inherit ( padding: inherit; ) : inherit değeri verirsek, ebeveyn etiketinin padding değeri ne ise onu miras alır ve aynı değer uygulanır.

Html öğelerine dış boşluk vermek için kullanılır. Margin değeri verirken bunu 4 farklı yol ile yapabiliriz. Bunlar:

• length ( margin: 10px; ) : px, pt, cm vb. bir değer verebiliriz.
• % ( margin: 20%; ) : İçerisinde bulunduğu etiketin genişliğinin yüzdesi olarak değer verebiliriz.
• inherit ( margin: inherit; ) : inherit değeri verirsek, ebeveyn etiketinin margin değeri ne ise onu miras alır ve aynı değer uygulanır.
• auto ( margin: auto; ) : auto değeri verirsek, etiketin kenar boşluklarını tarayıcı otomatik olarak belirler. Bu özelliğin düzgün çalışması için etiketin width özelliğine bir genişlik değeri vermelisiniz.

Bir Html öğesinin 4 tarafına birden kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.

border-style özelliğine şu değerleri verebiliyoruz:

• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• none
• hidden

Bir Html öğesinin 4 tarafına birden (üst, sağ, alt, sol) dış kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.

outline-style özelliğine şu değerleri verebiliyoruz:

• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset

Animasyonlar ile ilgili Css kodlarımızı yazmak için kullanılır. @keyframes özelliği içerisindeki from ve to blokları içerisine kodlarımızı yazabiliriz.

Animasyon, belirtilen sürede from içerisindeki Css kodlarından başlar ve kademeli olarak to içerisindeki Css kodlarına dönüşünceye kadar devam eder.

Tüm animasyon özelliklerini toplu olarak tek özellikle belirtmek için kullanılır. Bir animasyon örneğini hem uzun hem de kısa şekliyle yazacak olursak:

** Ayrı ayrı yazarak animasyon örneği **

animation-name: example;

animation-duration: 3s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

** Tek satırda yazarak animasyon örneği **

animation: example3s linear 2s infinite alternate;

Animasyonun yönünü belirtmek için kullanılır. 4 değer alabilir. Bunlar:

• normal : Varsayılan değerdir.
• reverse : Animasyonun ters yönde çalışmasını sağlar.
• alternate : Animasyonun önce normal sonra tam tersi yönde çalışmasını sağlar ve bu şekilde devam eder.
• alternate-reverse : Animasyonun önce ters yönde sonra normal yönde çalışmasını sağlar ve bu şekilde devam eder.

Animasyonun bittikten sonraki durumunu belirtmek için kullanılır. animation-fill-mode özelliğine şu değerleri verebiliyoruz:

• none : Animasyon bittikten sonra başlangıç değerlerine döner. (Varsayılan değerdir.)
• forwards : Animasyon bittikten sonraki son durumunda kalır ve o son durumdaki değerler uygulanır.
• backwards : Animasyon bittikten sonra veya durdurulduğunda, başlangıç özellikleri uygulanır.
• both : forwards ve backwards değerleri birlikte uygulanır.

paused değeri vererek animasyonları durdurmak için kullanılır. animation-play-state özelliğine şu değerleri verebiliyoruz:

• running : Varsayılan değerdir ve animasyon normal bir şekilde çalışır.
• paused : Animasyonu durdurmamızı sağlar.

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.

animation-timing-function özelliğine şu değerleri verebiliyoruz:

• ease : Animasyon, yavaş başlar sonra hızlanır en son tekrar yavaşlar. (Varsayılan değerdir.)
• linear : Animasyon, baştan sona aynı hızda devam eder.
• ease-in : Animasyonun yavaş başlamasını sağlar.
• ease-out : Animasyonun yavaş bitmesini sağlar.
• ease-in-out : Animasyon, yavaş başlar ve yavaş biter.

Diğer arkaplan Css özelliklerini tek seferde background özelliği ile kullanabiliriz. Kullanımı şu şekildedir:

background: background–color background–image background–position/background–size background–repeat background–origin background–clip background–attachment ;

Arkaplana vermiş olduğumuz rengin başlangıç alanını belirtmek için kullanılır. Bu özelliğe 3 değer verebiliyoruz. Bunlar:

• padding-box : Varsayılan değerdir. Rengin padding alanından başlamasını sağlar.
• border-box : Rengin border alanından başlamasını sağlar.
• content-box : Rengin içerik alanından başlamasını sağlar.

Arkaplana yerleştirdiğimiz resmin başlangıç alanını belirtmek için kullanılır. Bu özelliğe 3 değer verebiliyoruz. Bunlar:

• padding-box : Varsayılan değerdir. Resmin padding alanından başlamasını sağlar.
• border-box : Resmin border alanından başlamasını sağlar.
• content-box : Resmin içerik alanından başlamasını sağlar.

Arkaplana yerleştirdiğimiz resmin konumunu belirtmek için kullanılır. Bu özelliğe 4 değer verebiliyoruz. Bunlar:

• top : Üstte
• bottom : Altta
• right : Sağda
• left : Solda
• center : Ortada

Arkaplana yerleştirdiğimiz resmin yatayda ve dikeyde tekrar edip etmeme durumunu belirtmek için kullanılır. Bu özelliğe 4 değer verebiliyoruz. Bunlar:

• repeat-x : Resim x ekseninde tekrar eder.
• repeat-y : Resim y ekseninde tekrar eder.
• no-repeat : Resim tekrar etmez.
• repeat : Varsayılan değerdir.Resim x ve y eksenlerinde tekrar eder.

Arkaplana yerleştirdiğimiz resmin boyutlarını belirtmek için kullanılır. Bu özelliğe 5 değer verebiliyoruz. Bunlar:

• auto : Varsayılan değerdir. Resim orjinal boyutlarında yerleştirilir.
• uzunluk değerleri : İki değer verilirse, birinci değer genişlik için ikinci değer ise yükseklik için uygulanır. Tek değer verilirse, hem genişlik hemde yükseklik için bu değer uygulanır.
• yüzde olarak değer : İki değer verilirse, birinci değer genişlik için ikinci değer ise yükseklik için uygulanır. Tek değer verilirse, hem genişlik hemde yükseklik için bu değer uygulanır.
• contain : Resmin genişlik ve yükseklik değerlerinden büyük olanı, uygulandığı etiketi kapsayacak şekilde yerleştirilir. Diğer küçük olanıda buna göre en boy oranı bozulmayacak şekilde değişir.
• cover : Resmin genişlik ve yükseklik değerlerinden küçük olanı, uygulandığı etiketi kapsayacak şekilde yerleştirilir. Diğer küçük olanıda buna göre en boy oranı bozulmayacak şekilde değişir.

Yazıya vermiş olduğumuz başlığın nerede konumlanacağını belirtmek için kullanılır.

Varsayılan olarak none değeri alır ve başlık ilk sütunda bulunur. column-span özelliğine all değeri vererek başlığın tüm sütunlara uygulanmasını sağlayabiliriz.

Bu özellik ile sütun sayısı (column-count) ve genişlik değerini (column-width) birlikte vererek çoklu sütunları oluşturabiliriz. Kullanımı şu şekildedir:

columns: column–width column–count;

Bu özellik ile kutuların hangi yönde (yatay veya dikeyde) sıralanacağını belirleriz. 4 farklı değer verebiliriz. Bunlar:

• column : Kutular, dikeyde yukardan aşağı doğru yerleştirilir.
• column-reverse : Kutular, dikeyde aşağıdan yukarı doğru yerleştirilir.
• row : Kutular, yatayda soldan sağa doğru yerleştirilir. ( Varsayılan değerdir. )
• row-reverse : Kutular, yatayda sağdan sola doğru yerleştirilir.

Kapsayıcı etikete sığmayan kutuların alt veya üst satırdan devam edip etmeme durumunu belirleriz. 3 farklı değer verebiliriz. Bunlar:

• wrap : Satıra sığmayan kutuların bir alt satıra kaydırılmasını sağlar.
• nowrap : Satıra sığmayan kutuların bir alt satıra kaydırılmasını engeller. Aynı satırdan devam eder.
• wrap-reverse : Satıra sığmayan kutuların bir üst satıra kaydırılmasını sağlar. wrap değerinin tam tersi yönde uygulanır.

Kapsayıcı içerisindeki kutuların yatayda nasıl hizalanacağını belirleriz. 5 farklı değer verebiliriz. Bunlar:

• center : Kutular, kapsayıcı içerisinde yatayda ortalanır. 
• flex-end : Kutular, kapsayıcının sonundan (sol taraf) başlayarak yerleştirilir.
• flex-start : Kutular, kapsayıcının başından (sağ taraf) başlayarak yerleştirilir. (Varsayılan değerdir.)
• space-around : Kutular arası boşluk eşit olacak şekilde yerleştirilir.
• space-between : Kutular bulundukları alana aralarında eşit mesafe olacak şekilde yerleştirilir.

Kapsayıcı içerisinde iki veya daha fazla satırdan oluşan kutuların dikeyde nasıl hizalanacağını belirleriz. 6 farklı değer verebiliriz. Bunlar:

• center : Satırlar, kapsayıcı içerisinde dikeyde ortalanır. 
• flex-start : Satırlar, kapsayıcı içerisinde yukardan başlayarak yerleştirilir. 
• flex-end : Satırlar, kapsayıcı içerisinde aşağıdan başlayarak yerleştirilir. 
• space-around : Satırlar arası boşluk eşit olacak şekilde yerleştirilir.
• space-between : Satırlar arası boşluk eşit olacak şekilde yerleştirilir. 
• stretch : Satırlar, kapsayıcı etiket içerisini tamamen doldurur. Yani her birinin yüksekliğinin 100% olmasını sağlar.

Kapsayıcı içerisindeki kutuların dikeyde nasıl hizalanacağını belirleriz. justify-content özelliğinin tam tersi diyebiliriz. 5 farklı değer verebiliriz. Bunlar:

• center : Kutular, kapsayıcı içerisinde dikeyde ortalanır. 
• flex-start : Kutular, kapsayıcı içerisinde yukardan başlayarak yerleştirilir. 
• flex-end : Kutular, kapsayıcı içerisinde aşağıdan başlayarak yerleştirilir. 
• stretch : Kutuların yüksekliğinin, kapsayıcı etiket yüksekliğinde yani 100% olmasını sağlar. (Varsayılan değerdir.)
• baseline : Kutular, yazı boyutlarına göre dikeyde yerleştirilir.

Her bir kutuyu özel olarak hizalamak için kullanılır. Bu özellik ile kutulara verilen genel özelliklerinin dışına çıkılabilir. 6 farklı değer verebiliriz. Bunlar:

• flex-start
• flex-end
• center
• auto
• stretch
• baseline

Border image özelliği, bir Html öğesinin kenarlıklarına resim yerleştirmek için kullanılır. Kullanımı şu şekildedir:

border–image: border–image–source border–image–slice 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-repeat özelliğine 3 değer verebiliyoruz. Bunlar:

• round
• repeat
• stretch

Html öğelerine gölge efekti vermek için kullanılır. Vereceğimiz değerler ile gölgenin x ve y eksenindeki konumunu, bulanıklığını ve rengini belirleriz.

İlk verilen değer x ekseni, ikinci verilen değer y ekseni, üçüncü verilen değer bulanıklık, dördüncü verilen değer de rengi için uygulanır.

Display özelliği, Html etiketlerinin sayfa üzerinde yerleştirilmesini ve düzenlenmesini sağlar.

display özelliğine şu 4 değeri verebiliyoruz:

• block
• inline
• inline-block
• none

Position özelliği ile Html sayfamızdaki nesnelerin konumları değiştirebilir ve dilediğimiz gibi yerleştirmeler yapabiliriz.

position özelliği 5 değer alır. Bunlar:

• static : Html etiketleri varsayılan olarak static değer alır ve sayfanın normal akışına göre konumlandırılırlar.
• relative : Bu durumda Html etiketleri yine sayfanın normal akışına göre konumlandırılırlar. Fakat top, right, bottom ve left özelliklerinden etkilenirler.
• fixed : Bir Html etiketine fixed değeri verdiğimiz zaman o etiketin sayfanın belli bir noktasında sabitlenmesini sağlayabiliriz.
• absolute : Bir Html etiketine absolute değeri verdiğimiz zaman, o etiket normal akış içerisinden çıkar. Relative’den farkı normal akış içerisinden çıkmasıdır.
• sticky : Bir Html etiketine sticky değeri verdiğimiz zaman, o etiketin istediğimiz değerlerde sabit kalmasını sağlayabiliriz.

Bu özellik ile listelerin başlarındaki işaretlerin pozisyonlarını belirleyebiliriz.

list-style-position özelliğine 2 değer verebiliyoruz. Bunlar:

• inside
• outside

Bu özellik ile listelerin başındaki işaretler değiştirilebilir veya tamamen kaldırılabilir.

list-style-type özelliği şu değerleri alabilir:

• circle
• decimal
• disc
• lower-alpha
• lower-greek
• lower-latin
• lower-roman
• none
• square
• upper-alpha
• upper-latin
• upper-roman
• initial
• inherit
• unset

Html tablolarında tablonun başlığının konumunu ayarlamak için kullanılır. 2 değer alır. Bunlar:

• top : Tablo başlığı tablonun üstünde yer alır. 
• bottom : Tablo başlığı tablonun altında yer alır.

• hide 
• show

X ve Y eksenindeki taşma durumları için kullanılır. 4 değer alır. Bunlar:

• visible
• hidden
• scroll
• auto

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. 

transition-timing-function özelliği şu değerleri alabilir:

• ease : Geçiş, yavaş başlar sonra hızlanır en son tekrar yavaşlar. (Varsayılan değerdir.)
• linear : Geçiş, baştan sona aynı hızda devam eder.
• ease-in : Geçişin yavaş başlamasını sağlar.
• ease-out : Geçişin yavaş bitmesini sağlar.
• ease-in-out : Geçiş, yavaş başlar ve yavaş biter.
• cublic-bezier : Manuel olarak ayarladığımız geçiş tipidir. 0 ile 1 arasında değerler alabilir.

Filter özelliği ile bir Html etiketi üzerinde photoshop benzeri efektleri (bulanıklaştırma, parlaklık, şeffaflık vb..) uygulayabiliriz. 

filter özelliğine şu değerleri verebiliyoruz:

• none : Varsayılan değerdir. Herhangi bir efekt uygulanmaz.
• blur : Resmin bulanıklığını ayarlar.
• brightness : Resmin parlaklığını ayarlar.
• contrast : Resmin kontrastını ayarlar.
• drop-shadow : Resme gölge efekti verir.
• grayscale : Resmi siyah beyaz yapar.
• hue-rotate : Resme bir ton döndürme efekti verir.
• invert : Resmin terse çevrilmesini sağlar.
• opacity : Resme şeffaflık verir.
• sepia : Resme kahverengi tonlarında bir efekt uygular.

Resize özelliği ile bir Html etiketinin yeniden boyutlandırılabilmesini sağlayabiliriz. Yada boyutlandırılabilmesini engelleyebiliriz.

resize özelliği 4 değer alır. Bunlar:

• none : Yeniden boyutlandırılabilir özelliğini devre dışı bırakmak için kullanılır.
• both : Yatayda ve dikeyde yeniden boyutlandırılabilir yapmak için kullanılır.
• horizontal : Yatayda yeniden boyutlandırılabilir yapmak için kullanılır.
• vertical : Dikeyde yeniden boyutlandırılabilir yapmak için kullanılır.

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.

scroll-behavior özelliği 2 değer alır. Bunlar: 

• auto : Varsayılan değerdir. Kaydırma efekti olmadan hedefe gider.
• smooth : Link ile hedefe giderken kaydırma efekti sağlar.

Bu özellik sayesinde yazıların fare ile seçimini engelleyebiliyoruz.

user-select özelliği 4 değer alır. Bunlar:

• auto : Varsayılan değerdir. Tarayıcı izin verirse metinler seçilebilir.
• none : Metin seçimini engeller.
• text : Metinler kullanıcılar tarafından seçilebilir.
• all : Çift tıklama yerine tek tıklama ile metin seçimi yapılabilir.

Transform özelliği ile bir Html öğesi üzerinde döndürme, boyutlandırma, eğme gibi işlemlerimizi gerçekleştirebiliriz. Bu işlemleri 2D (2 boyutlu) ve 3D (3 boyutlu) olmak üzere 2 farklı şekilde yapabiliyoruz.

transform özelliği şu değerleri alabilir:

• translate : Bir Html öğesinin X ve Y eksenlerindeki konumunu değiştirmek için kullanılır. Birinci parametre X ekseni için, ikinci parametre Y ekseni için uygulanır.
• rotate : Pozitif değer verildiğinde, Html öğesini 2 boyutlu olarak saat yönünde döndürür. Negatif değer verildiğinde, Html öğesini 2 boyutlu olarak saat yönünün tersine döndürür.
• scale : Genişliği ve yüksekliği belirtilen oranda büyütmek veya küçültmek için kullanılır. Birinci parametre genişlik için, ikinci parametre yükseklik için uygulanır.
• skew : X ve Y eksenlerindeki eğilmeyi sağlar. Birinci parametre X ekseni için, ikinci parametre Y ekseni için uygulanır.