CSS outline Özelliği

CSS outline

Css outline ile ikinci bir kenarlık oluşturulabilir.

Örnek:

Bu örnekte bir div elemanına outline:red dashed thick; değeri uygulanmıştır.

div { border: 2px solid aqua; outline: red dashed thick; padding: 30px; }

CSS outline nedir nasıl kullanılır

İkinci kenarın sitil özelliklerini yazmamızı sağlayan kısa bildirimdir.İkinci kenarın genişliği elementin genişliğine dahil değildir.Ayarlanabilir özellikleri renk, genişlik ve çeşididir.

CSS outline CSS outline özellikleri  
Varsayılan Değer: invert none medium  
Kalıtsallık: yok  
Animasyon Özelliği: var
Versiyon: CSS2  
JavaScript outline: object.style.outline="gray dashed 15px"

CSS outline Tarayıcı Desteği

Tablodaki sayılar özelliği destekleyen ilk tarayıcı sürümleridir.

CSS Kodu:
outline 1.0 8.0 1.5 1.2 7.0

CSS outline Değerleri

outline:syntax

CSS outline özelliği değerleri

CSS outline değerleri CSS outline değerleri tanımları
outline-color İkinci kenarlığın rengi tanımlanır
outline-style Kenarlığın kenar tipi belirlenir.
outline-width Kenarlığın genişliği verilir.
initial Özelliğin varsayılan değeridir.
inherit Kalıtsal olarak aldığı değerdir.

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

HTML yorum etiketi ile öğe gizleme örneği

Resim
Merhaba arkdaşlar , html işaretleme dilinde  yorum etiketini bir webmaster olarak  kulanmamız gerekebilir.Bu bize kodların karışmamasını ve disiplinli bir çalışma yapmamıza olanak sağlar. Bu örneği uygulayarak  nasıl html yorum tagını yani etiketini kullanabileceğinizi öğreneceksiniz. <!DOCTYPE html> <html> <body> <p>Kodu Çalıştır butonuna tıkladığınızda, yorum etiketleri arasındaki öğe tarayıcıda görüntülenmez. Yorum etiketlerini silerek içeriği görüntüleyebilirsiniz.</p> <!-- Aşağıdaki içeriği şimdilik gizle <img border="0" src="http://3.bp.blogspot.com/-NE-3K559zkQ/ViVybTh5YqI/AAAAAAAAAr8/fvJSe7lEA9Y/s320/cennet_papagani.jpg" alt="papagan" /> --> </body> </html> Bu bloğu yazarken html kaynak kodlarında sürekli güncellemeler ve düzenlemeler yapıyorum.Blogger kaynak görünümüne geçtiğiniz de bir çok yorum satırlarımı bulabilirsiniz. bu örneği tamam
Devamı Oku »

Linklerin Renklerini Değiştirme Örnek

<!DOCTYPE html> <html> <head> <style> a:link { color: green; background-color: transparent; text-decoration: none } a:visited { color: brown; background-color: transparent; text-decoration: none } a:hover { color: red; background-color: transparent; text-decoration: underline } a:active { color: orange; background-color: transparent; text-decoration: underline } </style> </head> <body> <p>Linklerin varsayılan renklerini değiştirebilirsiniz.</p> <a href="http://htmlvecssegitimi.blogspot.com/2016/01/html-link-rengi-degistirme-ornek.html" target="_blank">HTML Link Rengi Değiştirme Örneği</a> </body> </html>
Devamı Oku »

YouTube Reklam Engelleyici

Resim
YouTube reklam engelleyici ile internetten hem para kazan abilir hem de internetteki Google reklamlarını yani YouTube reklamlarını da engelleyebilir, kapatabilirsiniz .Nasıl mı ? Okumaya devam edin bundan sonra  kendinize daha çok zaman ayırabilecek hızlı güvenli bir internet keyfi yaşayacaksınız. Reklamları sonsuza kadar kaldıran Uygulamayı Hemen Keşfet YouTube Music gibi ücretli hizmetlere hiç girişmeyin derim. Acelem var diyorsanız hemen Brave  Mobil Uygulama | YouTube Reklam Engelleyici 'ı indirin ben de o sırada size reklamları kaldıran uygulama | tarayıcı hakkında bilgi vereyim. Ücretsiz YouTube Reklam Engelleyici  YouTube 'da dizi izlerken film izlerken sürekli yerinizden kalkıp reklamı geç butonuna bastığınız oldu mu ? Eminim bu ve benzeri bir çok anınız vardır reklamları kapatma ile ilgili.İşte artık reklamları kapatmayı veya engellemeyi öğrenmenize gerek yok. YouTube Reklam Engelleyici İndir YouTube Reklam Engelleyici Mobil Uygulama yı'ı indirmek için  sitesini
Devamı Oku »

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript

Resim
Merhaba arkadaşlar bu yazımda  eski tarayıcılarda çalışmayan kodları nasıl gizleyebileceğimizi ve  uzunca yazılan  javascript kod satırlarını bölme yi öğreteceğim. Web tasarım ve kodlama dersleri adı altında  başlatmış olduğum javascript dersleri makalelerimin hepsini okumanızı istiyorum ve sizler için hazırlanan uygulamaların hepsini dikkatle uygulayarak öğrenin.Bir önceki yazımda javascript ile neler yapılabilir  konusunu işledim. Js de eski tarayıcılarda çalışma ve kod satırlarını gizleme Bazen web site yapmak istediğimizde  hangi programlama dilini kullanırsak kullanalım kodlar uzayabiliyor bu gibi durumlarda javascript kodlarını bölerek alt satıra rahatlıkla geçişler yapabiliriz.Aşağıdaki örnekte javascript kodunu  ters slash (\) ile bölerek rahatça kod yazımına devam edeceğiz.Örneği inceleyiniz. <!DOCTYPE HTML> <html lang="tr"> <head> <meta charset="UTF-8"> <title>Js ile kod satırını bölme</title
Devamı Oku »

HTML Resimler

Resim
HTML Resimler <img> Etiketi HTML'de resimler <img> etiketi ile gösterilir. <img> etiketi boş etiket olarak tanımlanır, yani kapanış etiketi yoktur ve sadece özellikler (parametreler) içerir. src özelliği resmin URL'sini (web adresini) belirtir. alt özelliği ise, resmin görüntülenmediği durumlar için alternatif metni tanımlar: <img src="URL" alt="alternatif metin"> Örnek <!DOCTYPE html> <html> <body> <h2>HTML Resimler - Örnek</h2> <img src="cennet_papagani.jpg" alt="Papagan" width="150px" height="150px"> </body> </html> Kendiniz deneyin » Resimlerin yükseklik ve genişlik değerlerini her zaman belirtin. Yükseklik ve genişlik değerleri belirtilmediğin
Devamı Oku »

HTML bdo Etiketi Örnek

<!DOCTYPE html> <html> <body> <p>Tarayıcınız bi-directional override (bdo), yani çift yönlü yazımı destekliyorsa, aşağıdaki satır right-to-left (rtl) sağdan sola doğru yazılmış olarak görüntülenecektir:</p> <bdo dir="rtl">Bu satır sağdan sola doğru yazılacak</bdo> </body> </html>
Devamı Oku »