Liste işaretinin liste akışında mı yoksa dışında mı görüneceğini ayarlamak için kullanılır.
ul {
list-style-position: outside;
}
| Değer | Açıklama |
| inside | İşaretçi liste akışı içinde görünür. |
| outside | İşaretçi liste akışı dışında görünür. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 7.0 |
Bu list style özelliği ile liste işaretini bir görüntü ile değiştirebiliriz.
Not: Her zaman list-style-type özelliğini belirtin.
ul{
list-style-image: url('http://www.w3tr.com/file/list.jpg');
}
| Değer | Açıklama |
| none | Hiçbir özellik almaz. |
| url | Liste işaretinin yerine gösterilecek görüntünün yolunu belirtir. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 7.0 |
Tek özellikle bütün liste özelliklerini ayarlamamızı sağlar. Eksik olan Property için varsayılan değer alınır.
ul {
list-style: square;
}
| Değer | Açıklama |
| list-style-type | Liste işaretinin türünü belirler. |
| list-style-position | Liste işaretinin konumunu ayarlar. |
| list-style-image | Liste işaretinin türünü belirler. Resim atamanızı da sağlar. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 7.0 |
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 |