Satır arası yüksekliği belirlemek için kullanılır.
.lineHeight {
line-height: 50px;
}
| Değer | Açıklama |
| normal | normal olarak ayarlanır. |
| number | Direk ‘3’ yada ‘5’ gibi değerler alabilir. Buda font-size’ ın çarpımı manasına gelmektedir. |
| length | Harfler arasındaki boşluğu açacak değerdir. Negatif olarak tanımlanabilir. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 7.0 |
Bir metindeki harflerin arasındaki boşluğunu ayarlar. Negatif değerler alabilir.
.pozitif{
letter-spacing: 30px;
}
.negatif{
letter-spacing: -4px;
}
| Değer | Açıklama |
| normal | Normal olarak ayarlanır. |
| length | Harfler arasındaki boşluğu açacak değerdir. Negatif olarak tanımlanabilir. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 7.0 |
Position: absolute olarak konumlandırılmış elementler için position: relative’li elementin left değerine göre ayarlanır.
Position: relative li elementli nesneler için ise kendi bulunduğu konumuna göre left değerini kazanır.
div {
border: 3px solid red;
}
.relative {
width: 300px;
height: 300px;
position: relative;
}
.absolute {
position: absolute;
width: 150px;
height: 150px;
left: 50%;
top: 50%;
margin-left: -75px;
margin-top:-75px;
}
| Değer | Açıklama |
| auto | Konum otomatik olarak ayarlanır. |
| length | Yüzdeli, px, em, cm gibi değerler alabilir. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 5.5 | 1.0 | 5.0 |
Animasyon kuralıdır. Animasyonun adımlarını girerek oluşturursunuz. Tıpkı çizgifilm animasyonlarının kare kare oluşturulması gibidir. Bu adımlar % yüzdelelerle ifade edilir. %0 ‘ dan 100% kadar adımları siz belirlersiniz. En iyi tarayıcı desteğini sağlamanız için %0 başlangıç değeri ve 100% bitiş değeri girilmelidir.
.keyframes {
width: 200px;
height: 200px;
background: red;
position :relative;
-webkit-animation: mymove 6s infinite; /* Chrome, Safari, Opera */
animation: mymove 6s infinite;
text-align: center;
color: white;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
0% {left: 0px;}
25% {left: 500px;}
75% {left: 50px}
100% {left: 200px;}
}
/* Standard syntax */
@keyframes mymove {
0% {left: 0px;}
25% {left: 500px;}
75% {left: 50px}
100% {left: 100px;}
}
| Değer | Açıklama |
| animationname | Bu kısma bir animasyon ismi girilmelidir. |
| Keyframes-selector | %0-100% arası adımlar girilerek oluşturulur. %0 ve 100% değerlerinin girilmesi önerilir. |
| Css-style | Bir veya daha fazla değişecek css özelliği. |
| 43.0 4.0-webkit |
16.0 5.0-moz |
10.0 | 9.0 4.0-webkit |
30.0 15.0-webkit 12.0-o |
Elementleri ana obje içerisinde yatay olarak hizalanmasını sağlar.
#justify {
width: 300px;
height: 200px;
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
}
#justify div {
width: 100px;
height: 100px;
}
| Değer | Açıklama |
| flex-start | Elementler ana objenin başında konumlandırılmıştır |
| flex-end | Elementler ana objenin sonunda konumlandırılmıştır. |
| center | Elementler ana objenin ortasında konumlandırılmıştır. |
| space-between | Elementler ana objenin kenarlarından hizalanır |
| space-around | Elementler kenarlara bitişik olmayacak şekilde hizalanır. |
| İnital | |
| İnherit |
| 29.0 21.0-webkit |
28.0 18.0-moz |
11.0 | 6.1-webkit | 12.10 |
Bir objenin yüksekliğini ayarlar.
.height {
height: 150px;
width: 150px;
background: red;
color: white;
}
| Değer | Açıklama |
| auto | Yükseklik otomatik olarak ayarlanır. |
| length | Yüzdeli, px, em, cm gibi değerler alabilir. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 7.0 |
Asılı-noktalama özelliği bir noktalama işareti başlangıcında ya da metnin tam bir satır sonunda, hat kutunun dışında yerleştirilebileceğini belirtir.
.font {
hanging-punctuation: first;
}
| Değer | Açıklama |
| none | Değer almaz. |
| first | Noktalama ilk satırın başlangıç kenarından dışında askıda kalabilir. |
| last | Noktalama son satırın bitiş kenarından dışında askıda kalabilir |
| allow-end | Noktalama tüm çizgilerin uç kenarı dışında askıda kalabilir. |
| force-end | Noktalama tüm çizgilerin uç kenarı dışında askıda kalabilir. |
| İnital | |
| İnherit |
| Desteklenmiyor | Desteklenmiyor | Desteklenmiyor | Desteklenmiyor | Desteklenmiyor |
Metnin kalın yada ince olarak gözükmesini sağlar.
.font {
font-weight: bold;
font-size: 45px;
}
| Değer | Açıklama |
| normal | Metin kendi font özelliklerinde görünür. |
| bold | Metin kalın görünür. |
| bolder | Metin kalın görünür. |
| lighter | Metin hafif kalınlıkta görünür. |
|
100 200 300 400 500 600 700 800 900 |
Sıralama inceden kalına doğrudur. |
| İnital | |
| İnherit |
| 2.0 | 1.0 | 4.0 | 1.3 | 3.5 |
Küçük harflere sahip metinin küçük harflerini büyütür. Fakat normal büyük harfinden biraz daha küçük olur.
.font {
font-variant: small-caps;
}
| Değer | Açıklama |
| normal | Metin normal gözükmesini sağlar.. |
| small-caps | Küçük yazılmış harflerin büyük gözükmesini sağlar. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 3.5 |
Metnin yazı tipi stilini belirler.
.font {
font-style: italic;
font-size: 50px;
}
| Değer | Açıklama |
| normal | Yazı stilini normal olarak ayarlamak için kullanılır. |
| İtalic | Yazı stilini italik olarak ayarlamak için kullanılır. |
| ablique | Tarayıcı eğik bir yazı stili görüntüler. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 7.0 |