| Arka Plan Stilleri | |
|---|---|
| background–color | Arka plan rengini belirler, renk ismi veya renk kodu girilir. |
| background-image | Arka plan resmi için kullanılır. background-image: url(images/bg.jpg); |
| background-repeat | Arka plan resminin hangi yönlerde döşenerek tekrarlanacağı.
Repeat-x, repeat-y, no-repeat, repeat |
| background-position | Arka plan resminin sayfa içinde döşenmeye, nereden başlanacağı. Center center, top center gibi… |
| background-attachment | Arkaplan resminin sayfayla birlikte nasıl hareket edeceği. Fixed yaparsak sabitlenir ve sayfa kaysa da resim kaymaz. |
| Font ve Metin Stilleri | |
|---|---|
| color | Metin rengini belirler. Renk adı veya renk kodu girilir.
color: red; color: #999; color: rgb(255, 255, 255); |
| font-family | Yazı tipini belirler.
font-family: Arial; |
| font–size | Yazı boyutunu (px, pt, em) belirler.
font-size: 10pt; |
| font-weight | Yazı kalın veya normal yapılabilir. bold, normal… |
| font-style | Yazı italik veya normal yapılabilir. italic, normal… |
| line-height | Satırlar arası mesafeyi belirler. 10 px gibi… |
| text-align | Metin yatay hizalamasını belirler (left, right, center) |
| text-decoration | Metnin altına, üstüne veya üzerine çizgi çizer.
underline altı çizili yapmak için, none çizgiyi kaldırmak için |
| text-indent | İlk satır girintisini ayarlar.
text-indent:15px; |
| letter-spacing | Karakterler arası boşluğu ayarlar.
letter-spacing: 5px; |
| word-spacing | Kelimeler arası boşluğu ayarlar. |
| vertical-align | Dikey hizalamayı ayarlar. |
| İç Alan ve Dış Alan Boşluk Stilleri | |
|---|---|
| margin | margin (kenar dışı boşluğu).
margin:5px; Bu şekilde kullandığımızda tüm yönlerden aynı miktarda boşluk bırakılır. Sadece altan, üstten, soldan veya sağdan boşluk ayarlamak istersek aşağıdaki gibi kullanabiliriz: margin-top (üst kenar dışı boşluğu) margin-right (sağ kenar dışı boşluğu) margin-bottom (alt kenar dışı boşluğu) margin-left (sol kenar dışı boşluğu) |
| padding | padding (kenar içi boşluğu).
padding: 5px; Bu şekilde kullandığımızda tüm yönlerden aynı miktarda boşluk bırakılır. Sadece altan, üstten, soldan veya sağdan boşluk ayarlamak istersek aşağıdaki gibi kullanabiliriz: padding-top (üst kenar içi boşluğu) padding -right (sağ kenar içi boşluğu) padding -bottom (alt kenar içi boşluğu) padding -left (sol kenar içi boşluğu) |
| Kenarlık Stilleri | |
|---|---|
| border-style | Kenarlık stilini ayarlaryabiliriz. Solid, dotted, dashed gibi. Sadece sol, sağ, alt veya üst kenarlık stilini ayarlamak istersek aşağıdaki özellikleri kullanabiliriz:
border-top-style border-right-style border-bottom-style border-left-style |
| border-width | Kenarlık kalınlığını ayarlayabiliriz. Sadece sol, sağ, alt veya üst kenarlık kalınlığını ayarlamak istersek aşağıdaki özellikleri kullanabiliriz:
border-top-width border-right-width border-bottom-width border-left-width |
| border-color | Kenarlık rengini ayarlayabiliriz. Sadece sol, sağ, alt veya üst kenarlık kalınlığını ayarlamak istersek aşağıdaki özellikleri kullanabiliriz:
border-top-color border-right-color border-bottom-color border-left-color |
| border | border: 2px dotted #022163;
şeklinde bir kullanım ile kenarlığın hem kalınlığı, hem stili, hem de rengi tek satırda belirlenebilir. |
| border-collapse | Border-collapse:collapse;
şeklinde kullanarak, hücrelerin kendi çizgileri kaldırılabilir. Yani tablo kenarlıkları iki çizgi yerine tek çizgiden oluşur. |
| Yerleşim Stilleri | |
|---|---|
| Float | Özellikle div elemanları için kullanılır. Div elemanları normalde alt alta yerleşirler. Float özelliklerini “left, right” şeklinde ayarlayarak istediğimiz gibi yerleştirebiliriz.
Float:left; Float:right; |
| Clear | Uygulandığı div elemanı ve arkasından gelecek div elemanlarının, normal şekilde yerleşime devam etmelerini, önceki divlere uygulanmış float özelliklerinden etkilenmemelerini sağlar. Bunun için clear özelliği şu şekilde kullanılır:
Clear:both; |
| Display | Html etiketleri inline ve blok elemanlar olmak üzere ikiye ayrılırlar. Blok elemanlar sayfa içerisinde alt alta yerleşirler. Yani o elemandan sonraki etiketler alt satırdan devam ederler. Örneğin table, h1, p, div gibi etiketlerden sonra alt satıra geçilir.
İnline elemanlar ise satır içinde yerleştirilirler. Örneğin b, i, u, a, font gibi etiketler, aynı satırdan yerleşime devam ederler. İstenilen etiketlerin bu özellikleri şu şekilde değiştirilebilir: display:block; display:inline ; |
| Listeleme Stilleri | |
|---|---|
| List-style-type | Ol veya ul ile oluşturulan listelerde, satır başlarındaki numara ya da işareti belirlemek için kullanırız. Örneğin büyük roma rakamlarını kullanmak istersek:
ul { List-style-type:upper-roman; } None değeri verilerek madde işareti kaldırılabilir. |
| List-style-image | ul etiketi ile oluşturduğumuz madde işaretli listelerde, satır başına işaret yerine belirttiğimiz bir resmi koymak istersek, bu özelliği kullanabiliriz:
ul { List-style-image:url(işaret.jpg); } |