HTML CSS JAVASCRIPT ANGULAR

CSS Outline Kullanımı


CSS outline özelliği dış çizgi için renk, genişlik gibi özellikleri belirler.

outline denen dış çizgi border yani sınırın dışında tüm elementi saran bir çizgidir.

outline özelliği border özelliğinden farklıdır. outline özelliği elementin genişliğinin ve yüksekliğinin bir parçacı değildir.

outline belirlediğinizde elementin genişliği ve yüksekliği değişmez.

outline verilmiş element

Örnekte siyah çizgi border, hemen onun dışındaki kesik mavi çizgi outline tarafından çizilmiştir.

Örnek

div {
  height:100px;
  background-color:#4CAF50;
  border:5px solid #000; 
  color:#fff;
  outline:4px dashed #0069FC; 
  width:50%; 
  text-align:center; 
  padding:25px
}

Kendin Dene »


CSS outline-style Özelliği

outline-style özelliği ile çizginin şekli belirlenir.

outline-style şu değerlere sahip olabilir:

  • dotted - Noktalı çizgi tanımlar
  • dashed - Kesik çizgilerden oluşan çizgi tanımlar
  • solid - Düz çizgi tanımlar
  • double - Çift çizgi tanımlar
  • groove - 3 boyutlu oluklu çizgi. Bu efekt outline rengine göre ortaya çıkar.
  • ridge - Çıkıntılı çizgi. Bu efekt outline rengine göre ortaya çıkar.
  • inset - İçe doğru 3 boyutlu görünen çizgi. Bu efekt outline rengine göre ortaya çıkar.
  • outset - Dışa doğru 3 boyutlu çizgi. Bu efekt outline rengine göre ortaya çıkar.
  • none - Dış çizgisi yok
  • hidden - Gizli dış çizgisi tanımlar

Aşağıda farklı stillerde outline - dış çizgi örneklerini bulabilirsiniz:

Örnek

p {
    border: 1px solid black;
    outline-color: #0069FC;
}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Bu kodun çıktısı şu şekilde olacaktır:

Örnek

dotted outline.

dashed outline.

solid outline.

double outline.

groove outline

ridge outline

inset outline

outset outline.

Kendin Dene »

Not: outline-style özelliği verilmezse, aşağıdaki özelliklerden hiç birinin etkisi görülmez.


CSS outline-color Özelliği

outline-color özelliği dış çizginin rengini belirler.

Renk aşağıdaki değerlerden biri ile tanımlanır:

  • Renk adı kullanılarak (background-color:red)
  • RGB değer vererek (background-color:rgb(255,0,0))
  • Hex değer vererek (background-color:#ff0000)

Örnek

p {
    border: 1px solid black;
    outline-style: double;
    outline-color: #9900CC;
}

Kendin Dene »


CSS outline-width Özelliği

outline-width özelliği dış çizginin kalınlığını belirler.

Bu değer px, cm,pt, em gibi birimler ile verilir.

Aynı zamanda thin (ince), medium(orta) ve thick(kalın)  gibi ön tanımlı genişlikler de kullanılabilir.

Örnek

p.bir {
    outline-style: double;
    outline-color: red;
    outline-width: thick;
}

p.iki {
    outline-style: double;
    outline-color: green;
    outline-width: 3px;
}

Kendin Dene »


CSS outline Özelliğinin Kısa Yazımı

Yukarıda bahsedilen tüm özellikler tek bit satırda kısa olarak yazılabilir.

Sadece outline özelliği ile dış çizginin kalınlık, renk ve biçimi belirlenebilir.

Örnek

div { 
  outline:4px dashed #0069FC;  
}

Kendin Dene »

Kısa yazım outline outline:genişlik still renk şeklindedir: outline: 10px solid red


Anlamadığınız bir konu mu var?

Konu ile ilgili sorunuzu uzmanim.net'e sorabilirsiniz: uzmanim.net'e sor!