CSS Özellikleri

Çok kullanılan Css özellikleri

Css ile stil oluşturma işi, css özelliklerine değer verilerek yapılır. Aşağıdaki tabloda en önemli css özellikleri ve alabilecekelri değerlerden bahsedilmiştir.

 

Arka Plan Özellikleri
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 Özellikleri
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.

 

İç ve Dış Boşluk
Ayrıca şu sayfamızı inceleyiniz.
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 Özellikleri
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.

 

Kutular ve Yerleşim
Bu konuda ayrıntılı bilgi şu sayfamızda.
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 ;

 

Liste Özellikleri
Bu konuda ayrıntılı bilgi şu sayfamızda.
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); }

 

çok kullanılan css özellik ve değerleri, css örnekleri, önemli css özellikleri, display nedir, float örnekleri, clear both ne işe yarar

KONU İLE İLGİLİ ÖRNEKLER

Css background fixed ve resmin ekranı kaplaması örneği Kendin Dene

Kendin Dene butonuna tıkla ve kodları gör, değiştir, incele...

body {
    background: url('../Images/arkaplan.png') no-repeat fixed center top;
/* alttaki 4 satır resmin ekranı kaplaması için */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 0;
    padding: 0;
}
Css kenarlık örnek uygulamalar Kendin Dene

Kendin Dene butonuna tıkla ve kodları gör, değiştir, incele...

Css liste (ol ve ul etiketlerini) biçimlendirme Kendin Dene

ul {     

list-style-type:circle;

}

li {    

width:80%;

margin:5px;

padding:4px;

}

li:hover {     

color:yellow;

background-color:#003366;

list-style-type:disc;

}



YORUMLAR




24406  kez okundu.

Online Kullanıcı Sayısı 337



CSS-Özellikleri