Kenarlıklar

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 36 / 76.

CSS'te kenarlık, 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

Cuma, Cumartesi ve Pazar günleri için bir sinema programını temsil eden üç <div> öğesi içeren bir HTML belgeniz var. Göreviniz, bunları biçimlendirmek için border özelliğini kullanmaktır.

Cuma programını 3px solid black kenarlıkla biçimlendirin.
Cumartesi programını 4px dashed blue kenarlıkla biçimlendirin.
Pazar programını 5px dotted green kenarlıkla biçimlendirin.

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>