6 hizmet ayı
| box-shadow | 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 | Display özelliği, Html etiketlerinin sayfa üzerinde yerleştirilmesini ve düzenlenmesini sağlar. display özelliğine şu 4 değeri verebiliyoruz:
|
| position | 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:
|
| 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-position özelliğine 2 değer verebiliyoruz. Bunlar:
|
| list-style-type | 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:
|
| 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. 2 değer alır. Bunlar:
|
| empty-cells | Html tablolarında tablonun boş hücrelerinin görünüp görünmemesini ayarlamak için kullanılır. 2 değer alır. Bunlar:
|
| width | Bir Html öğesine genişlik değeri vermek için kullanılır. |
| height | Bir Html öğesine yükseklik değeri vermek için kullanılır. |
| max-height | Bir Html öğesine max yükseklik değeri vermek için kullanılır. |
| max-width | Bir Html öğesine max genişlik değeri vermek için kullanılır. |
| min-height | Bir Html öğesine min yükseklik değeri vermek için kullanılır. |
| min-width | Bir Html öğesine 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. 4 değer alır. Bunlar:
|
| 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. Süre belirtilmezse, varsayılan değer 0 olduğundan transition özelliği uygulanmaz. |
| transition-property | Html öğesinin hangi Css özelliğine uygulamak istiyorsak onu belirtmek için kullanılır. Örneğin width, color vb. bir özelliğine uygulayabiliriz. |
| 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. transition-timing-function özelliği şu değerleri alabilir:
|
| cursor | Fare imlecinin görünümünü değiştirmek için kullanılır. Yaklaşık 35 farklı değer vererek farklı görünümler elde edebiliyoruz. |
| filter | 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:
|
| z-index | Hangi Html öğesinin daha üstte olacağını belirtmek için kullanılır. |
| @media | Web tasarımlarımızın responsive özellikte 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 | Opacity özelliği ile Html öğelerine şeffaflık verebiliriz. Bu özellik 0 ile 1 arasında bir değer alır. |
| resize | 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:
|
| 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. scroll-behavior özelliği 2 değer alır. Bunlar:
|
| user-select | Bu özellik sayesinde yazıların fare ile seçimini engelleyebiliyoruz. user-select özelliği 4 değer alır. Bunlar:
|
| visibility | Bir Html öğesinin 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ş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:
|
| @import | Dışarıdan Css dosyalarını sayfalarımıza eklemek için kullanılır. |