CSS Kenarlıklar

Ana sayfa Forumlar WEBMASTER CSS CSS Kenarlıklar

Bu konu 0 yanıt ve 1 izleyen içeriyor ve en son  Bahadir tarafından 6 yıl 8 ay önce tarihinde güncellendi.

1 yazı görüntüleniyor (toplam 1)
  • Yazar
    Yazılar
  • #16442

    Bahadir
    Üye

    Bir HTML elementinin kenarlarına çizgi çekerken kullanacağımız kodlar şunlardır:

    border-style
    border-width
    border-color

    border-style: Kenarlık Stili
    Kenarların görünüşünün nasıl olacağı ile ilgili bilgi vermemizi sağlar.

    Kullanabileceğiniz stiller:

    none - Kenarlık yok
    dotted - Noktalı
    dashed - Kesik çizgili
    solid - Çizgi
    double - Çift çizgi
    groove
    ridge
    inset
    outset

    Örnek bir kullanım:

    .kutum { border-style: dotted; }

    border-width: Kenarlık Boyutu
    Kenar genişliğini belirtmemizi sağlar. ÖNCELİKLE MUTLAKA border-style belirtmemiz gerekir, aksi takdirde görüntülenmeyecektir.

    Örnek bir kullanım:

    .kutum { border-style: solid; border-width: 1px; }

    border-color: Kenarlık Rengi
    Kenarlık rengini bu komutla değiştirebiliriz. ÖNCELİKLE MUTLAKA border-style belirtmemiz gerekir, aksi takdirde görüntülenmeyecektir.

    Renk kullanımı hakkında bilgi için buraya tıklayın.

    Örnek bir kullanım:

    .kutum {
    border-style: solid;
    border-width: 1px;
    border-color: #0000CC;
    }

    Kenarları Ayrı Ayrı Şekillendirmek
    İstiyorsak yukarı (top), aşağı (bottom), sağ (right) ve sol (left) kenarları ayrı ayrı biçimlendirebiliriz.

    border-left-style - Sol kenarın şekli.
    border-right-style - Sağ kenarın şekli.
    border-top-style - Üst kenarın şekli.
    border-bottom-style - Alt kenarın şekli.

    Ayrıca border-style dört kenarın değerini de alacak şekilde yazılabilir. Örneğin:

    border-style: dotted solid double dashed;

    Üst kenar - dotted,
    Sağ kenar - solid,
    Alt kenar - double,
    Sol kenar - dashed.

    Farkettiyseniz border-style yazdıktan sonra sırasıyla saat yönünde kenarları ayrı ayrı belirttik.

    border-style: dotted solid double;

    Üst kenar - dotted,
    Sağ ve Sol kenar - solid,
    Alt kenar - double,

    Bu kullanımda 4. kenarı yazmadık. Bu kenar solu işaret ettiği için tam tersi olan Sağ taraftaki özelliği alacaktır.

    border-style: dotted solid;

    Üst kenar ve alt kenar - dotted,
    Sağ ve Sol kenar - solid,
    Bu kullanımda Yukarı - Aşağı kenarlar ilk yazılan dotted, Sol ve Sağ kenarlar ikinci yazılan solid biçiminde olacaktır.

    Kenar Belirtmenin Kısa Yolu
    Sadece border kullanarak da border-width, border-color ve border-style değerlerini belirtmemiz mümkün. Örneğe bakalım:

    .kutum {
    border: 1px #0000CC solid;
    }

    Buradaki örnekte yer alan üç kodu tek bir kodda birleştirdik. Sırasıyla önce border-width değerini yazdık, sonra border-color ve en son border-style ile üç özelliği birlikte kullandık.

    Bu kısayolu da kenarlara ayrı ayrı uygulamanız mümkün. Bu komutlar:


    border-left - Sol kenar
    border-right - Sağ kenar
    border-top - Üst kenar
    border-bottom - Alt kenar

1 yazı görüntüleniyor (toplam 1)

Bu konuyu yanıtlamak için giriş yapmış olmalısınız.

Bana Ders Anlat © 2008-2017