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 s Etiketi

<s> Etiketi Örnek Artık doğru olmayan, geçersiz veya ilgisiz metni işaretleme: < p > < s > Arabamın markası Renault < /s > < /p > < p > Yeni arabamın markası Toyota < /p > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI Arabamın markası Renault Yeni arabamın markası Toyota HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com <s> Tanımı ve Kullanımı <s> etiketi artık doğru, net veya ilgili olmayan metni işaretlemek için kullanılır. <s> etiketi değiştirilmiş ya da silinmiş metni işaretlemek için kullanılmamalıdır. Değiştirilmiş vey...
Devamı Oku »

HTML link Etiketi

<link> Etiketi Örnek Harici bir stil dosyasına bağlanma: < head > < link   rel= "stylesheet" type= "text/css" href= "googledrive.css"/> < /head > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI Bu başlık link verilmiş bir stil dosyasıyla biçimlendirildi. Bu paragraf ve sayfa arka planı da aynı şekilde biçimlendirildi. HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com <link> Tanımı ve Kullanımı <link> etiketi bir belge ile harici kaynak arasındaki bağlantıyı belirtir. <link> etiketi harici kaynaklı stil dosyala...
Devamı Oku »

CSS content Özelliği

CSS content Css content özelliğini sayfaya seçilen elemandan önce veya sonrasında içerik eklemek için kullanılabilir. Örnek: Bu örnekte bir linkin title değerini linkten önce yazmak için content özelliği uygulanmıştır. a:before { content: " (" attr(title) ")"; color: red; font-size: 1.1em; } Kendiniz deneyin » CSS content nedir nasıl kullanılır Css content ile seçilen html elemanından önce veya sonrasında bir url ,resim, içerik, tırnak işareti gibi elemanlar eklenebilir. CSS content CSS content özellikleri   Varsayılan Değer: normal   Kalıtsallık: yok   Animasyon Özelliği: yok   Versiyon: CSS2   JavaScript content: Açıklama Oynat CSS content Tarayıcı Desteği Tablodaki sayılar özelliği tam destekleyen ilk tarayıc...
Devamı Oku »

CSS border-spacing animasyon

htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı 'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI css border-spacing animasyon Numaralar Harfler 1 a 2 b 3 c 4 d 5 e 6 f css border-spacing özelliği ile tablonun "1px" olan hücreler arası uzaklığını animasyon ile "15px" olarak değiştireceğiz ! css border-spacing özelliğinin animasyon özelliği vardır. CSS Animasyonları Internet Explorer 9 ve önceki versiyonlarında çalışmıyor.. ...
Devamı Oku »

HTML header Etiketi

<header> Etiketi Örnek <article> etiketi için bir header (sayfa başlığı) : < article >    < header >      < h1 > Buraya en önemli başlık < /h1 >      < h3 > Buraya daha az önemli başlık < /h6 >      < p > Buraya biraz ek bilgi. < /p >    < /header >    < p > Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. < /p > < /article > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI Buraya en önemli başlık Buraya daha az önemli başlık Buraya biraz ek bilgi. Lorem Ipsum, dizgi ve baskı...
Devamı Oku »

Html dersleri

Resim
Html dersleri ne  kaldığımız yerden devam ediyoruz ve artık bir webmaster ya da kodyazarı olma yolunda adım adım ilerleyeceğiz.Bir önceki derste html konusunda basit bir başlangıç yapmıştık.Şimdi ise bir kaç hatırlatmayla kod editörlerini kullanarak ders anlatımına devam edeceğiz.Kodlama öğrenmek istiyorum mu demiştiniz? HTML' in açılımı H yper T ext M arkup L anguage yani Güçlü metin işaretleme dili de denebilir.Bu kelimeyi sıkça duyacağınız için açılımını bilmekte  yarar var.İnternet sayfaları yapamamızı sağlayan bu dil ile en basit haliyle bir web siteyi aşağıdaki kodlamıştık. <html> <head> <title> Belge başlığı </title> </head> <body> <h1> İçerik Başlığı </h1> <p> Bir paragraf........ </p> <p> Bir başka paragraf........ </p> </body> </html> Şimdi ise yukarıda gördüğünüz kodları editörde çalıştırarak test edin.Eğer kendi kullana...
Devamı Oku »

CSS max-width uygulama

CSS max-width div {     width:auto;<br>    height:auto;<br>    max-width:<span id='rfrnscsscde'>none</span>;<br>} CSS max-width degerleri none 70px 180px 60% 100% initial Sonuç Ekrani Kutunun maksimum genişliğini değerlere tıklayarak değiştiriniz.. Sonuçlari görmek için degerlerin üzerine geliniz. HtmlveCSSEgitimi.blogspot.com
Devamı Oku »

HTML5 Canvas Oyun Yapımı Dersleri

Resim
Html5 canvas etiketi ve Javascript ile nasıl oyun yapılır ? Web oyunu geliştirme ve animasyon teknikleri nelerdir ? Javascript'te yılan oyunu nasıl yapılır ? Siz de kendi canvas oyununuzu geliştirmek istiyorsanız önce videoyu izleyelim . Html5 Canvas oyun yapımı ve Javascript Animasyon Dersleri  Bir web geliştiricisi ya da yazılımla uğraşıyorsanız eminim oyun yapımı ya da oyun programlama ve geliştirme ile ilgili mutlaka bir deneyiminiz  olmuştur.İşte oyun programlama ve Html5 canvas animasyon derslerimizden görüntüler.Bakalım beğenecek misiniz ? İyi seyirler.  "Bu yılan  başka yılan :)" Javascript ile kendi oyununu geliştirmeye hazır mısın ? 6 saatlik dolu dolu uygulamalı Canvas Oyun Yapımı kursuna sadece 24.99TL ye hemen kayıt yaptırabilirsiniz.Harika eğlenceli ve bilgi dolu kursu bitirip  yılan oyunu ile kendinizi ödüllendirin. Kursu içeriğini incelemek için Udemy HTML5 Canvas Animasyon Dersleri ve Javascript Oyun Yapımı   linkine tıklayın. Html5 ca...
Devamı Oku »