CSS outline Özelliği Nedir ve Nasıl Kullanılır?

CSS outline özelliği kullanıcının o ana nereye odaklandığını belirlemek için kullanılır. Tarayıcı arayüzünde kullanıcının nereye odaklandığını bilmek bize birçok avantajlar sağlayacaktır.

Dış Hat Çizgisi Biçemi (outline-style)

Dış hattın biçemini belirlemek için kullanırız.

Dış hat biçemi none değeri haricindeki değerler için görüntülenir.

none: Dış hat görünmesin anlamındadır.

dotted: Dış hat belirli aralıklarla dizilmiş noktalardan oluşur.

dashed: Dış hat belirli aralıklarla dizilmiş çizgi parçalarından (tire) oluşur.

solid: Dış hat bir çizgi olarak görünür.

double: İki çizgi seklinde görünür. İki çizginin kalınlıkları ile aralarındaki boşluğun genişliğinin toplamı outline-width değerine eşittir.

groove: Dış hat tuvale oyulmuş gibi görünür.

ridge: Dış hat çizgisi kabartma gibi görünür.

inset: Dış hat çizgisinin kutunun tamamını tuvale gömülü gibi görünmesine sebep olur.

outset: Dış hat çizgisi kutunun tamamının kabartma gibi görünmesine sebep olur.

Dış Hat Çizgisi Genişliği (outline-width)

Atandığı elemanın dışına çizilen hattın kalınlığını belirlemek için kullanırız.

Dış hat çizgisi genişliği border-width gibi CSS uzunluk değerlerini (px, pt, em) ve anahtar kelimeler (thin <= medium <= thick) alır, ancak yüzde değer ve eksi değer almaz.

Dış Hat Çizgisi Rengi (outline-color)

Atandığı elemanın dışına çizilen hattın rengini belirlemek için kullanırız.

CSS’in desteklediği renk değerlerini kullanabiliriz, hatta invert değerini de kullanabiliriz. invert, rengi tersine çevirir.

Dış Hat Çizgisi (outline)

Dış hat çizgisi (outline) özelliği yukarıda gördüğümüz özelliklerin tek seferde kullanılmasını sağlayan bir kısa yoldur.

Kenar çizgisi (border) özelliğine benzer bir yapısı vardır. Ancak ayrıldıkları kısım kenar çizgisinde (border) her kenar için bir atama (border-right, border-bottom vb.) yapılmasına karşın dış hat çizgisinde (outline) böyle bir özellik yoktur. Dış hat çizgisinin (outline) tüm kenarları aynı özellikleri taşır. Dış hat çizgileri (outline) normal akıştaki boşlukları tamamlamaz. (taşma yapmaz.) Diğer elemanların üzerini örter. Dış hat çizgisinin (outline) önemli özelliklerinden biri etrafını çevreleyen elemanlar üzerinde (üzerine örtmek dışında) bir etki yapmamasıdır. Bu sayfa planlamadaki problemlerimizi çözmemiz için önemlidir. Problem olan bir elemana dış hat çizgisi (outline) ataması yaptığımızda tam olarak sorunun ne olduğunu göreceğiz ve elamanın tam yerini öğreneceğiz. Bu kenar çizgisi (border) uygulamaktan farklıdır, dış hat çizgisi (outline) uygulandığında dokümandaki normal akış üzerine bir etki yapmayacaktır. Dış hat çizgileri (outline) satıriçi elemanların etrafına yerleşir. İki satıra kaymış satıriçi elemanlarda dış hat çizgisi dikdörtgen seklinde olmayacaktır. Bu da kenar çizgisi (border) ile arasındaki farklardan biridir.

Dış hat çizgileri elemana odaklanıldığında görsel bir çıkıntı gibi görünmesini sağlayabilir.

CSS outline özellikleri konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.

https://yazilimdelisi.com/category/web-gelistirme/css/

Sosyal Medya Hesaplarımız

Son Eklenen Yazılar