Css outline, anahat veya dış çizgi diyebiliriz. Bazen anahat bazen de dış çizgi diye karşılaşabilirsiniz. Border ile margin arasındaki hatta veya sınıra denir. Border ile farkı ise border kutu modelinin içinde bir alan oluştururken outline dışına bir alan oluşturur.
Css de bu özelliğin genişliğine, stilini ve rengine parametreler atarız.
Örnek kullanımı:
div{
/* outline: genişlik stil renk; */
outline: 2px solid red;
}Kullanımı border kullanımı gibidir.
Genişlik ile ilgili parametreler:
length : Uzunluk değeri.
thin : İnce.
medium : Orta.
thick : Kalın.
initial : HTML elementi varsayılan değerine döndürür.
inherit : HTML elementi üst elementinin biçimlendirme değerini alır yani miras alır.
Stili ilgili parametreler:
none : Değer yok.
hidden : Gizli.
solid : Düz çizgi.
double : Çift çizgi.
dashed : Kesikli çizgi.
dotted : Noktalı çizgi.
groove : İçe dönük gölgeli çizgi.
ridge : Dışa dönük gölgeli çizgi.
inset : İçe dönük derin çizgi.
outset : Dışa dönük derin çizgi.
Renk ile ilgili parametreler:
color : Renk. ( Vaesayılan değer black)
invert : Ters Çevir. */ Çok kullanılmayan bir özelliktir.
Tek parametre ile atama yaparsak sadece çizgi tipine parametre veririz. Renk (black) ve genişlik ( medium ) varsayılan değerler gelir.
outline : solid;Çift parametre verirsek genişliğine ve çizgi tipine parametre veririz. Renk (black) varsayılan değerler gelir.
outline : 4px solid;Üç parametre verirsek genişlik, çizgi tipi ve renk parametrelerinin hepsine değer vermiş oluruz.
outline: 2px solid red;Border ile outline arasında önemli farklardan biri border sayfa yapısını etkilerken outline etkilemez. border genişliğini artırdığınızda etrafınfaki diğer etiketleri de kaydırır. Ama outline kaydırmaz. Diğer bir fark ise border da top, bottom, left ve right özelliklerine ayrı ayrı değerler atabiliyorduk ama outline özelliğinde bunu yapamıyoruz.
Örnek :
<!doctype html>
<html lang="tr-TR">
<head>
<style>
div{
width:1000px;
height:50px;
border:4px solid blue;
outline:4px solid red;
margin-bottom:10px;/*div ler arasında boşluk olması için*/
}
.bir { outline : thin dashed; background-color: gray; }
.iki { outline : medium dotted green; background-color: lightblue; }
.uc { outline : initial dashed #ff3355; background-color: lightcyan; }
.dort { outline : 10px dashed rgba(125, 125, 125, .5); background-color: lightgreen; }
</style>
</head>
<body>
<div class="bir"> 1 </div>
<div class="iki"> 2 </div>
<div class="uc"> 3 </div>
<div class="dort"> 4 </div>
</body>
</html>Html Çıktısı:
outline-width nedir? Nasıl kullanılırız?
outline-width özelliği anahatta sadece genişlik vermek için kullanılırız. Genel olarak length parametresi tercih edilir ve pixel cinsinden değer verilir.
Aldığı parametreler :
length : Uzunluk değeri.
thin : İnce.
medium : Orta.
thick : Kalın.
initial : HTML elementi varsayılan değerine döndürür.
inherit : HTML elementi üst elementinin biçimlendirme değerini alır yani miras alır.
Örnek :
<!doctype html>
<html lang="tr-TR">
<head>
<style>
div{
width:500px;
height:50px;
background-color: lightgreen;
outline:4px solid red;
margin-bottom:20px;/*div ler arasında boşluk olması için*/
}
.bir { outline-width : thin; }
.iki { outline-width : medium; }
.uc { outline-width : initial; }
.dort { outline-width : 10px; }
</style>
</head>
<body>
<div class="bir"> 1 </div>
<div class="iki"> 2 </div>
<div class="uc"> 3 </div>
<div class="dort"> 4 </div>
</body>
</html>Html Çıktısı:
css outline-color nedir? Nasıl kullanılırız?
css outline-color özelliği anahatta sadece renk vermek için kullanılır. Rengi ana renk kodları, hexadecimal, rgb, rgba, hsl ve hsla kodları ile değer verilir ve renk özelliğinde varsayılan renk siyahtır.
Örnek :
<!doctype html>
<html lang="tr-TR">
<head>
<style>
div{
width:500px;
height:50px;
background-color: lightgreen;
outline:4px solid red;
margin-bottom:20px;/*div ler arasında boşluk olması için*/
}
.bir { outline-color : darkgoldenrod; }
.iki { outline-color : #223344; }
.uc { outline-color : rgba(123, 134, 145, .8); }
</style>
</head>
<body>
<div class="bir"> 1 </div>
<div class="iki"> 2 </div>
<div class="uc"> 3 </div>
</body>
</html>
Html Çıktısı:
css outline-style nedir? Nasıl kullanılırız?
Outline-style anahattın sadece stilini değiştirmede kullanırız. Bu özellik tek başına değer verildiğinde sonuç verir. Anahattın diğer özellikleri varsayılan olarak gelir ve genel olarak solid tercih edilir.
Aldığı parametreler :
length : Uzunluk değeri.
thin : İnce.
medium : Orta.
thick : Kalın.
initial : HTML elementi varsayılan değerine döndürür.
inherit : HTML elementi üst elementinin biçimlendirme değerini alır yani miras alır.
Örnek :
<!doctype html>
<html lang="tr-TR">
<head>
<style>
div{
width:500px;
height:50px;
background-color: lightgreen;
outline:4px solid red;
margin-bottom:20px;/*div ler arasında boşluk olması için*/
}
.bir { outline-style : solid; }
.iki { outline-style : dashed; }
.uc { outline-style : dotted; }
</style>
</head>
<body>
<div class="bir"> 1 </div>
<div class="iki"> 2 </div>
<div class="uc"> 3 </div>
</body>
</html>Html Çıktısı:
outline-offset Nedir? Nasıl kullanılırız?
Bir elemanın anahat (outline) ile kenarlık (border) arasındaki alana denir.
Aldığı parametreler:
length : Uzunluk değeri.
initial : HTML elementi varsayılan değerine döndürür.
inherit : HTML elementi üst elementinin biçimlendirme değerini alır yani miras alır.
Örnek :
<!doctype html>
<html lang="tr-TR">
<head>
<style>
div{
width:500px;
height:50px;
background-color: lightgreen;
border: 4px solid blue;
outline:4px solid red;
margin-bottom:20px;/*div ler arasında boşluk olması için*/
}
.bir { outline-offset : 2px; }
.iki { outline-offset : 4px; }
</style>
</head>
<body>
<div class="bir"> 1 </div>
<div class="iki"> 2 </div>
</body>
</html>Html Çıktısı:
Başka bir yazımızda görüşmek üzere…
