Elementlerin genişliğini ayarlamak için kullanılır.
div {
background :red;
color: white;
width: 300px;
height: 300px;
text-align:center;
}
| Değer | Açıklama |
| auto | Genişlik tarayıcı genişliğine göre otomatik ayarlanır. |
| length | Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 3.0 | 1.0 | 3.5 |
Beyaz boşluk tanımlaması için kullanılır.
p {
white-space: nowrap;
}
| Değer | Açıklama |
| normal | Birden fazla olan boşlukları tek boşluk gibi sayar. |
| nowrap | etiketi hariç alt satıra geçişe izin vermez. |
| pre | Birden fazla boşluğu birleştirmez. |
| Pre-line | |
| Pre-wrap | |
| İnital | |
| İnherit |
| 1.0 | 3.5 | 8.0 | 3.0 | 9.5 |
Visibility özelliği, iki farklı işleve sahiptir. Bir tablonun satırları ve sütunları gizler ve aynı zamanda diğer HTML elemanların görünür olup olmadığını belirler. Bu görünmezliği, elementin kendisini görünmez yaparken, web sayfa üzerinde kapladığı alanı boş alan olarak göstererek gerçekleştirir.
.visibility {
visibility: visible;
}
.hidden {
visibility: hidden;
}
| Değer | Açıklama |
| visible | Nesne normal olarak gösterilir. |
| hidden | Nesne görünmez olur. Fakat döküman üzerinde kapladığı alanda değişlik olmaz. Kapladığı alan boş olarak gösterilir. |
| collapse | Tablonun tüm satır veya sütunu ekrandan kaldırılmasına neden olur. Bu değer satır, satır grubu, sütun ve sütun grubu elemanları için kullanılır |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 4.0 |
Metnin yatay olarak nasıl hizalanacağını belirler. Bir elementin içeriğinin dikey hizalaması için kullanılır.
p {
font-size: 30px;
}
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
| Değer | Açıklama |
| baseline | Çerçevenin taban çizgisi ile ebeveyn çerçevenin taban çizgisi hizalanır. Eğer çerçevelerin taban çizgileri yoksa çerçevelerin alt sınırları hizalanır |
| length | Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir. |
| sub | Çerçevenin taban çizgisi, ebeveyn çerçevenin alt indisi için uygun yüksekliğe düşürülür. (Bu değerin elemanın yazı tipi yüksekliği üzerinde bir etkisi yoktur.) |
| super | Çerçevenin taban çizgisi, ebeveyn çerçevenin üst indisi için uygun yüksekliğe yükseltilir. (Bu değerin elemanın yazıtipi yüksekliği üzerinde bir etkisi yoktur.) |
| top | Çerçevenin tepesi ile satır çerçevesinin tepesi hizalanır. |
| text-top | Çerçevenin tepesi ile ebeveyn elemanın yazı tipinin tepesi hizalanır. |
| bottom | Çerçevenin altı ile satır çerçevesinin altı hizalanır. |
| text-bottom | Çerçevenin altı ile ebeveyn elemanın yazı tipinin altı hizalanır. |
| middle | Çerçevenin düşeyde orta noktası ebeveyn çerçevenin taban çizgisinin yarım x-yüksekliği yukarısına hizalanır. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 4.0 |
Eğer aynı sayfa da hem soldan sağa hem sağdan sola metin kullanma ihtiyacınız varsa unicode-bidi özelliğini kullanmanız gerekmektedir. unicode-bidi ile birden fazla yazılma yönü oluşturabiliriz.
.unicode {
direction: rtl;
unicode-bidi: bidi-override;
}
| Değer | Açıklama |
| normal | Eleman, çift yönlülük algoritması ile ilgili olarak ek bir iç içelik seviyesi açmaz. Satır içi seviyeden elemanlar için yeniden sıralama eleman sınırları boyunca örtük olarak çalışır. |
| embed | Eğer eleman bir satır içi seviyeden elemansa çift yönlülük algoritması ile ilgili olarak ek bir iç içelik seviyesi açılır. Bu iç içelik seviyesinin yönü direction niteliği ile belirtilir. Elemanın içinde yeniden sıralama örtük olarak yapılır. |
| bidi-override | Eğer eleman, sadece satır içi seviyeden elemanlar içeren bir satıriçi veya blok seviyesinden bir elemansa bu bir üstün gelme durumu oluşturur. Yani, elemanın içindeki yeniden sıralama kesin olarak direction niteliği ile belirtilen yöne göre yapılır; algoritmanın örtük kısmı yok sayılır. |
| İnital | |
| İnherit |
| 2.0 | 1.0 | 5.5 | 1.3 | 9.2 |
Oluşturacağımız geçişlere daha estetik geçişler sağlamak için kullanılan fonksiyonlardır.
div {
background: green;
width: 200px;
height: 20px;
-webkit-transition-property: height; /* Safari */
transition-property: height;
-webkit-transition-duration: 3s; /* Safari */
transition-duration: 3s;
transition-timing-function: ease;
}
div:hover {
height: 100px;
}
| Değer | Açıklama |
| ease | Animasyonun yavaş başlayıp hızlanması ve yavaş bitmesi ile sonuçlanan animasyon tipidir. |
| linear | Başlangıç ve Bitiş hızı aynı olan geçiş tipidir. |
| Ease-in | Animasyonun yavaş başlamasını sağlayan geçiş tipi. |
| Ease-out | Animasyonun yavaş bitmesini sağlayan geçiş tipi. |
| Ease-in-out | Yavaş başlayıp yavaş biten cublic-bezier eş değer bir geçiş tipi. |
| Cublic-bezier | Manuel olarak ayarladığımız geçiş tipidir.0 ve 1 arasında değerler alabilir. |
| İnital | |
| İnherit |
| 26.0 4.0-webkit |
16.0 4.0-moz |
10.0 | 6.1 3.1-webkit |
12.1 10.5-o |
Uygulanan geçiş efektinin elemanın hangi özelliği üzerinden yapılacağını belirlemek için transition-property özelliğini kullanırız.
Not: Her zaman geçiş özelliğinin süresini belirtin yoksa varsayılan süre o olduğu için hiçbir geçiş göremezsiniz.
İpucu: Bir geçiş özelliği bir elementin üzerinin üzerindeyken genellikle kullanıcı elementin üzerine gelmeden hiçbir geçiş gözükmez.
div {
background: green;
width: 200px;
height: 20px;
-webkit-transition-property: height; /* Safari */
transition-property: height;
-webkit-transition-duration: 3s; /* Safari */
transition-duration: 3s;
}
div:hover {
height: 100px;
}
| Değer | Açıklama |
| none | Hiçbir geçiş efektinin gözükmemesini sağlar. |
| all | Tüm özellikleri almış bir geçiş efekti uygulanır. |
| property | Uygulanan geçiş efektinin elemanın hangi özelliği üzerinden yapılacağını belirlemek için transition-property özelliğini kullanırız. |
| İnital | |
| İnherit |
| 26.0 4.0-webkit |
16.0 4.0-moz |
10.0 | 6.1 3.1-webkit |
12.1 10.5-o |
Geçiş efektlerini uygularken verdiğimiz efektin ne kadar süre ile devam edeceğini belirlemek için kullanılır.
div {
background: green;
width: 200px;
height: 20px;
transition: height;
-webkit-transition: height; /* Safari 3.1 to 6.0 */
-webkit-transition-duration: 3s; /* Safari */
transition-duration: 3s;
}
div:hover {
height: 100px;
}
| Değer | Açıklama |
| Time | Geçiş efektinin ne kadar saniye veya milisaniye devam edeceğini belirtir. Varsayılan süre 0s olduğu için süre ayarı yapılmazsa hiçbir geçiş gözükmez. |
| İnital | |
| İnherit |
| 26.0 4.0-webkit |
16.0 4.0-moz |
10.0 | 6.1 3.1-webkit |
12.1 10.5-o |
Uygulanan geçiş efektinin ne kadar zaman sonra başlayacağını belirler. Belirlenen zamana kadar animasyonu durdurur ve sonra animasyon başlar. Geçiş-gecikme değeri saniye (s) veya milisaniye (ms) tanımlanır.
div {
background: green;
width: 200px;
height: 20px;
transition: height 2s;
-webkit-transition: height 2s; /* Safari 3.1 to 6.0 */
-webkit-transition-delay: 3s; /* Safari */
transition-delay: 3s;
}
div:hover {
height: 100px;
}
| Değer | Açıklama |
| Time | Geçiş efekti başlamadan önce beklenecek saniye ya da milisaniye sayısını belirlemek için kullanılır. |
| İnital | |
| İnherit |
| 26.0 4.0-webkit |
16.0 4.0-moz |
10.0 | 6.1 3.1-webkit |
12.1 10.5-o |
Geçiş efektleri uygulamak için kullanılır.
div {
background: green;
width: 200px;
height: 20px;
transition: height 2s;
-webkit-transition: height 2s; /* Safari 3.1 to 6.0 */
}
div:hover {
height: 100px;
}
| Değer | Açıklama |
| transistion-property | Uygulanan geçiş efektinin elemanın hangi özelliği üzerinden yapılacağını belirlemek için bu özelliği kullanırız. |
| Transistion-duration | Geçiş efektlerini uygularken verdiğimiz efektin ne kadar süre ile devam edeceğini ayarlamak için kullanılır. |
| Transistion-timing-function | Oluşturacağımız geçişlere daha estetik geçişler sağlamak için kullanılan fonksiyonlardır. |
| Transistion-delay | Uygulanan geçiş efektinin ne kadar zaman sonra başlayacağını belirler. Belirlenen zamana kadar animasyonu durdurur ve sonra animasyon başlar. |
| İnital | |
| İnherit |
| 26.0 4.0-webkit |
16.0 4.0-moz |
10.0 | 6.1 3.1-webkit |
12.1 10.5-o |