201: HTML5 & CSS Başlangıç seviyesi derslerde Web Programlama uygulama geliştirme ortamını detaylı olarak inceliyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

CSS Dış Çizgileri

Kategori : Mobil | Lisans : Creative Commons (by-nc-sa) | En son 12.09.2019 tarihinde güncellendi
Eğitmen : Geleceği Yazanlar Ekibi
Etiketler : css-dis-cizgi css-outline outline web-programlama

Dış çizgi (outline) denilince, elemanların etrafına (sınır çizgileri dışına) çizilecek çizgiler anlaşılır; bundan amaç dikkati buraya çekmektir. Atanacak olan outline özellikleri, bir dış çizginin genişliği, rengi ve stilini belirler.

Örneğimizle konu daha iyi anlaşılacaktır:

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                border: 2px solid red;
                outline: yellow dotted thick;
            }
        </style>
    </head>
    <body>
        
        <p><b>Not</b> IE8 SADECE DOCTYPE KULLANILMIS ISE DESTEKLER</p>
        
    </body>
</html>

Outline / Border / Content ilişkisi ise aşağıdaki şekilde görülmektedir:

Yukarıdaki koda ait çıktı ise aşağıdaki gibidir: