metin hizalaması için kullanılır.
.sag{
text-align: right;
}
.sol {
text-align: right;
}
.orta {
text-align: center;
}
| Değer | Açıklama |
| left | Metni sola hizalar. |
| right | Metni sağa hizalar. |
| center | Metni ortalar. |
| justify | Metindeki her satırı eşit genişliğe ayarlar. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 3.0 | 1.0 | 3.5 |
Tablo düzeninin ayarlamasında kullanılır.
table {
table-layout: fixed;
}
| Değer | Açıklama |
| auto | Tablo düzeni içeriğine göre otomatik olarak ayarlanır. |
| fixed | Tablo düzenini sabitlemek için kullanılır. |
| İnital | |
| İnherit |
| 14.0 | 3.0 | 1.0 | 1.0 | 7.5 |
sekme karakteri için kullanılan alanın uzunluğunu belirlersekme karakteri genellikle tek bir uzay-karakter olarak, dışında bazı < pre > ve < textarea > gibi öğeleri için görüntülenir ve tab-size özelliği sonucu sadece bu öğeler için görünür olacaktır.
pre {
-moz-tab-size: 8; /* Firefox */
-o-tab-size: 8; /* Opera 10.6-12.1 */
tab-size: 8;
}
| Değer | Açıklama |
| number | Her sekme karakteri için gözükmesini istediğimiz alanın karakter sayısını belirleriz. |
| length | px, cm, % gibi değerler alabilir. Bu işlemi hiç bir tarayıcı desteklemez. |
| İnital | |
| İnherit |
| 21.0 | 4.0-moz | Desteklenmiyor. | 6.1 | 15.0 10.0-o |
Position: absolute olarak konumlandırılmış elementler için position: relative’li elementin right değerine göre ayarlanır.
Position: relative li elementli nesneler için ise kendi bulunduğu konumuna göre right değerini kazanır.
Not: position: static te hiçbir etkisi yoktur.
.relative {
position: relative;
border :1px solid red;
width: 300px;
height: 300px;
}
.absolute {
position : absolute;
width: 150px;
height: 150px;
border : 1px solid green;
right: 40px;
}
| Değer | Açıklama |
| auto | otomatik olarak ayarlanır. |
| length | Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 5.0 | 1.0 | 6.0 |
bir elementin kullanıcı tarafından yeniden boyutlandırılabilir olup olmadığını belirlemek için kullanılır.
div {
width: 500px;
height: 200px;
overflow: hidden;
resize: vertical;
border : 1px solid red;
}
| Değer | Açıklama |
| none | Elementin yeniden boyutlandırılamayacağını belirtir. |
| both | Elementin genişliği ve yüksekliğinin yeniden boyutlandırılabilir. |
| horizontal | Elementin sadece genişliği yeniden boyutlandırılabilir. |
| vertical | Elementin sadece yüksekliği yeniden boyutlandırılabilir. |
| İnital | |
| İnherit |
| 4.0 | 5.0 4.0-moz |
Desteklenmiyor | 4.0 | 15.0 |
Belirlenen tırnak işareti üretmek için kullanılır.
q {
quotes: "<"">" ;
}
| Değer | Açıklama |
| none | Herhangi bir tırnak işareti üretilmeyeceği belirtilir. |
| string | İki farklı tırnak işareti eklenmek için kullanılır |
| İnital | |
| İnherit |
| karakter | Numarası |
| “ | " |
| ‘ | ' |
| ‹ | ‹ |
| > | › |
| « | « |
| » | » |
| ‘ | ‘ |
| ’ | ’ |
| “ | “ |
| ” | ” |
| 11.0 | 1.5 | 8.0 | 5.1 | 4.0 |
Elementin pozisyonunu belirlemek için kullanılır.
p{
position: relative;
left: 50%;
top: 100px;
}
| Değer | Açıklama |
| static | Elementin yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar. |
| absolute | Elementin yerinin pencere esas alınarak belirlenmesini sağlar. |
| fixed | Elementin sabit bir şekilde konumlandırılmasında kullanılır. |
| relative | Elementin yerinin bir önceki elemente esas alınarak belirlenmesini sağlar. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 7.0 | 1.0 | 4.0 |
Elemanın perspektif görüntüsünün açısını değiştirir. x ve y değerleri alır. Başlangıç değeri kapsayıcının orta noktası olan 50% 50%’dir.
Not: Bu özellik perspektif özelliğini ile birlikte kullanılması gerekir ve yalnızca 3D dönüştürülmüş elementleri etkiler.
.div1 {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding: 10px;
border: 1px solid black;
-webkit-perspective: 100px; /* Chrome, Safari, Opera */
perspective: 100px;
perspective-origin: 50% 50%;
}
.div2 {
padding: 50px;
position: absolute;
border: 5px solid red;
background-color: green;
-webkit-transform: rotateX(50deg); /* Chrome, Safari, Opera */
transform: rotateX(50deg);
color: white;
}
| Değer | Açıklama |
| x-axisy | Görünümün x eksenine yerleştirildiği tanımlamanın olası değerleri: left/center/right/lenght/% |
| y-axisy | Görünümün y eksenine yerleştirildiği tanımlamanın olası değerleri: left/center/right/lenght/% |
| İnital | |
| İnherit |
| 36.0 12.0-webkit |
16.0 10.0-moz |
10.0 | 9.0 4.0.3-webkit |
23.0 15.0-o |
Perspective özelliği elemanların görüntüsünün bakış açısını değiştirmek(derinlik hissi) için kullanılır. perspective özelliği 3 Boyutlu Dönüştürme işlemleri için önemli bir özelliktir. perspective özelliği kolay kullanımı vardır, tabi karışık yapılı alanlardaki kullanımı hariç.
Not: perspektif özelliği yalnızca 3D dönüştürülmüş öğeleri etkiler !İpucu: 3D elemanları alt konumunu değiştirmek için izin verir. perspective-origin özelliğiyle birlikte kullanın.
.div1 {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding: 10px;
border: 1px solid black;
-webkit-perspective: 100px; /* Chrome, Safari, Opera */
perspective: 100px;
}
.div2 {
padding: 50px;
position: absolute;
border: 5px solid red;
background-color: green;
-webkit-transform: rotateX(45deg); /* Chrome, Safari, Opera */
transform: rotateX(45deg);
color: white;
}
| Değer | Açıklama |
| none | Hiç bir değer almaz. |
| length | px, cm, % gibi değerler alabilir. |
| İnital | |
| İnherit |
| 36.0 12.0-webkit |
16.0 10.0-moz |
10.0 | 9.0 4.0.3-webkit |
23.0 15.0-webkit |
Basılacak dökümanın öncesinden ne kadar kenar boşluğu verileceğini belirlemek için kullanılır.
@media print {
h1 {page-break-before: always;}
}
| Değer | Açıklama |
| auto | Üretilen çerçeveden önce/sonra/içinde bir sayfa kesmesini ne yasaklar ne de zorlar |
| always | Üretilen çerçeveden önce/sonra bir sayfa kesmesi daima yapılır. |
| avoid | Üretilen çerçeveden önce/sonra/içinde bir sayfa kesmesini yasaklar. |
| left | Sonraki sayfanın bir sol sayfa olarak biçimlenmesini sağlamak için üretilen çerçeveden önce/sonra bir veya iki sayfa kesmesi yapılır. |
| right | Sonraki sayfanın bir sağ sayfa olarak biçimlenmesini sağlamak için üretilen çerçeveden önce/sonra bir veya iki sayfa kesmesi yapılır. |
| length | px, cm, % gibi değerler alabilir. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.2 | 7.0 |