Bu yazımda CSS’te kenarlık belirleme, kenarlıkların biçimini ve rengini ayarlama gibi konulara değineceğim.

border-width: 5px; /* Kenarlık genişliği */
border-style: solid; /* Kenarlık stili */
border-color: #ccc;/* Kenarlık rengi */

Bu şekildeki kullanımda verdiğiniz değerler bütün kenarlara etki edecektir. Her kenar için ayrı ayrı düzenleme yapmak istiyorsak şu kodları kullanmalıyız:

border-top-style: dashed; /* Üst kenar için kenarlık stili */
border-top-width: 3px; /* Üst kenar için kenarlık yüksekliği */
border-top-color: #fff; /* Üst kenar için kenarlık rengi */

border-left-style: dotted; /* Sol kenar için kenarlık stili */
border-left-width: 5px; /* Sol kenar için kenarlık yüksekliği */
border-left-color: #ccc; /* Sol kenar için kenarlık rengi */

border-bottom-style: double; /* Alt kenar için kenarlık stili */
border-bottom-width: 6px; /* Alt kenar için kenarlık yüksekliği */
border-bottom-color: #ff4400; /* Alt kenar için kenarlık rengi */

border-right-style: groove; /* Sağ kenar için kenarlık stili */
border-right-width: 4px; /* Sağ kenar için kenarlık yüksekliği */
border-right-color: #eee; /* Sağ kenar için kenarlık rengi */

Bu kullanım pek tercih edilmez. Tercih edilen kullanım şu şekildedir:
Yazinin devamini oku »

CSS’te padding ve margin arasındaki fark genelde tam olarak bilinmez. Bu iki benzer kodun arasındaki fark aslında çok basittir.

• Padding kullanırsanız html etiketinin kenarlarından içeriye doğru bir kaydırma olur.
• Margin kullanırsanız html etiketinin kenarlarından dışarıya doğru bir kaydırma olur. Kullandığımız etiket belirlediğimiz ölçülerde kayar (yer değiştirir).

Aşağıdaki genişlik ve yükseklikleri aynı iki kutudan birincisinde padding ikincisinde margin kodu kullanılarak kaydırma yapılmıştır.

Resimde görülen kutular 100px*100px boyutlarındaydılar. İlk kutuya padding: 20px; değerini verdiğimizde, yazıdan dışarıya doğru her kenardan 20px arttığı için, kutunun boyutları 140px*140px oldu. İkinci kutuya margin: 20px; değerini verdiğimizde ise kutu dört kenardan da 20px uzunluğunda uzaklaştı.

*Etiketin içerisindeki yazıyı kenarlardan uzaklaştırmak istiyorsak padding kullanmalıyız. Eğer etiketi kenarlıkları ile birlikte komple kaydırmak istiyorsak margin kullanmalıyız.

Kullanım şekilleri

1.

padding: 10px;
margin: 10px;

Bu tip kullanımda verdiğiniz değer sağ, sol, üst ve alt kenarların hepsine etki edecektir.
2.

padding: 10px 12px;
margin: 10px 12px;

Bu tip kullanımda verdiğiniz ilk değer (10px) üst ve alt kenarlara, ikinci değer (12px) ise sağ ve sol kenarlara etki edecektir.
3.

padding: 10px 12px 6px 4px;
margin: 10px 12px 6px 4px;

Bu tip kullanımda verdiğiniz ilk değer (10px) üst kenara, ikinci değer (12px) sağ kenara, üçüncü değer (6px) alt kenara ve dördüncü değer (4px) sol kenara etki edecektir.

Dilerseniz hepsini bir satırda halletmek yerine ayrı ayrı da yapabilirsiniz.

padding-top: 10px;
padding-right: 12px;
padding-bottom: 6px;
padding-left: 4px;
margin-top: 10px;
margin-right: 12px;
margin-bottom: 6px;
margin-left: 4px;

top: üst, right: sağ, bottom: alt, left: sol kenarı belirtir.

Negatif padding ve margin

padding: -10px;
margin: -10px;

Eğer padding veya margini üstteki gibi kullanırsanız kenarlara tersi yönde etki eder. Örneğin margin-bottom: -10px yazdığınızda, kodu kullandığınız alan alttan 10px yukarı doğru çıkar.

CSS ile yazıları biçimlendirebilmek için font ve text özelliklerini inceleyeceğiz.

Font ile ilgili kodlar: font-family, font-weight, font-size, font-style, font-variant

Text ile ilgili kodlar: text-align, text-decoration, text-transform, text-indent, word-spacing, letter-spacing, line-height

Yazinin devamini oku »