Kenarlıklar

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 36 / 76.

CSS'te kenarlık (border), bir öğeyi çevreleyen, onu diğer öğelerden ayıran ve sınırlarını belirleyen bir çizgidir.

border özelliğini kullanmak için temel sözdizimi şöyledir:

selector {
    border-width: value;
    border-style: value;
    border-color: value;
}

border-width: Kenarlığın kalınlığıdır; piksel (px), em (em) veya diğer geçerli CSS birimleri cinsinden belirtilebilir. Ayrıca thin, medium ve thick gibi anahtar kelimeleri de kullanabilirsiniz.

border-style: Kenarlığın stili, aşağıdakilerden biri olabilir:
- dotted: Bir dizi nokta
- dashed: Bir dizi kesik çizgi
- solid: Düz bir çizgi
- double: İki düz çizgi

border-color: Kenarlığın rengi; isimlendirilmiş renkler, onaltılık (hexadecimal) değerler, RGB değerleri veya HSL değerleri kullanılarak belirtilebilir.

Her üç kenarlık özelliğini aynı anda ayarlamak için kısa yazım notasyonunu da kullanabilirsiniz:

selector {
    border: width style color;
}

Örneğin:

p {
    border: 2px solid blue;
}

Bu örnekte, tüm <p> (paragraf) öğeleri 2px genişliğinde düz mavi bir kenarlığa sahiptir.

Görev

Kolay

Size, her biri Cuma, Cumartesi ve Pazar günleri için bir sinema programını temsil eden üç <div> öğesi içeren bir HTML belgesi verilmiştir. Göreviniz, bunları stillendirmek için border özelliğini kullanmaktır.

Cuma programını 3px solid black bir kenarlıkla stillendirin.
Cumartesi programını 4px dashed blue bir kenarlıkla stillendirin.
Pazar programını 5px dotted green bir kenarlıkla stillendirin.

Kopya kağıdı

Bir kenarlık (border), bir öğeyi çevreleyen, onu diğer öğelerden ayıran ve sınırlarını belirleyen bir çizgidir.

Kenarlık özellikleri:

border-width: Kalınlık (px, em veya thin, medium, thick gibi anahtar kelimeler)
border-style: Stil (dotted, dashed, solid, double)
border-color: Renk (isimlendirilmiş renkler, hex, RGB, HSL)

Bireysel özellikler:

selector {
    border-width: value;
    border-style: value;
    border-color: value;
}

Kısa yazım (shorthand) gösterimi:

selector {
    border: width style color;
}

Örnek:

p {
    border: 2px solid blue;
}

Kendin dene

<html>
<head>
    <title>Borders</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="friday">
        <h3>Friday</h3>
        <p>7:00 PM - The Inception</p>
    </div>
    <div class="saturday">
        <h3>Saturday</h3>
        <p>8:00 PM - The Matrix</p>
    </div>
    <div class="sunday">
        <h3>Sunday</h3>
        <p>9:00 PM - Interstellar</p>
    </div>
</body>
</html>