12css outline

Css Ders 12 | Outline

CSS’de “outline” özelliği, bir HTML öğesi etrafında bir çerçeve oluşturmak için kullanılır. Bu özelliğin nasıl kullanılacağı ve örneklerini aşağıda görebilirsiniz:

Outline Özelliği

“outline” özelliği, bir HTML öğesinin etrafında bir çerçeve oluşturmak için kullanılır.

  • “outline-style”: Çerçevenin stili
  • “outline-width”: Çerçevenin kalınlığı
  • “outline-color”: Çerçevenin rengi

Aşağıdaki örnek kodda, “outline” özelliği kullanılarak bir “div” öğesi etrafında bir çerçeve oluşturulmuştur:

<div style="outline: 2px solid red;">
  Bu bir örnek div öğesidir.
</div>

Yukarıdaki kod, “div” öğesi etrafında 2 piksel kalınlığında kırmızı bir çerçeve oluşturur. Tarayıcıda bu kodu çalıştırdığınızda, “div” öğesi kırmızı bir çerçeveyle çevrelenir.

Outline-Style Özelliği

“outline-style” özelliği, çerçevenin stiline (kesikli, noktalı, vb.) karar vermek için kullanılır.

  • “none”: Çerçeve yok
  • “dotted”: Noktalı çerçeve
  • “dashed”: Kesikli çerçeve
  • “solid”: Kesintisiz çerçeve
  • “double”: Çift çizgili çerçeve
  • “groove”: Oluklu çerçeve
  • “ridge”: Yükseltilmiş çerçeve
  • “inset”: İçe doğru çerçeve
  • “outset”: Dışa doğru çerçeve

Aşağıdaki örnek kodda, “outline-style” özelliği noktalı bir çerçeve stili belirler:

<div style="outline: 2px dotted blue; outline-style: dotted;">
  Bu bir örnek div öğesidir.
</div>

Yukarıdaki kod, “div” öğesi etrafında 2 piksel kalınlığında mavi ve noktalı bir çerçeve oluşturur. Tarayıcıda bu kodu çalıştırdığınızda, “div” öğesi mavi ve noktalı bir çerçeveyle çevrelenir.

Outline-Width Özelliği

“outline-width” özelliği, çerçevenin kalınlığını belirlemek için kullanılır. Aşağıdaki örnek kodda, “outline-width” özelliği 5 piksel kalınlığında bir çerçeve belirler:

<div style="outline: 5px solid green; outline-width: 5px;">
  Bu bir örnek div öğesidir.
</div>

Yukarıdaki kod, “div” öğesi etrafında 5 piksel kalınlığında yeşil bir çerçeve oluşturur. Tarayıcıda bu kodu çalıştırdığınızda, “div” öğesi yeşil bir çerçeveyle çevrelenir.

Outline-Color Özelliği

“outline-color” özelliği, çerçevenin rengini belirlemek için kullanılır. Aşağıdaki örnek kodda, “outline-color” özelliği siyah bir çerçeve rengi belirler:

<div style="outline: 2px solid; outline-color: black;">
  Bu bir örnek div öğesidir.
</div>

Yukarıdaki kod, “div” öğesi etrafında 2 piksel kalınlığında siyah bir çerçeve oluşturur. Tarayıcıda bu kodu çalıştırdığınızda, “div” öğesi siyah bir çerçeveyle çevrelenir.

Özet

“outline” özelliği, bir HTML öğesi etrafında belirgin bir çerçeve oluşturmak için kullanılır. “outline-style”, “outline-width” ve “outline-color” özellikleri, çerçevenin stiline, kalınlığına ve rengine karar vermek için kullanılabilir. Bu özellikler genellikle HTML formlarında, düğmelerde ve bağlantılarda kullanılır ve web sayfasındaki kullanıcı etkileşimlerini vurgulamak için yararlıdır.

İletişim: admin@herseymi.com
Yazı oluşturuldu 110

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Benzer yazılar

Aramak istediğinizi üstte yazmaya başlayın ve aramak için enter tuşuna basın. İptal için ESC tuşuna basın.

Üste dön