CSS border-style Özelliği

CSS border-style

Css border-style özelliği bir html elemanının kenar çeşidini düzenler.

Örnek:

Bu örnekte farklı div kutularına farklı border-style değerleri uygulayarak özelliğin etkisini öğreneceğiz.

div.none { border-style: none; } div.dotted { border-style: dotted; } div.dashed { border-style: dashed; } div.solid { border-style: solid; } div.double { border-style: double; } div.groove { border-style: groove; } div.ridge { border-style: ridge; } div.inset { border-style: inset; } div.outset { border-style: outset; } div.hidden { border-style: hidden; }

CSS order-style nedir nasıl kullanılır

Css border-style özelliği bir html elemanının dört kenarına sitil vermemizi sağlayan kısa bir bildirimdir.

  • dotted solid double dashed;
    • Üst kenar "noktalı"
    • Sağ kenar "sürekli çizgi"
    • Alt kenar "çift çizgili"
    • Sol kenar "kesikli çizgi"
  • border-style:dotted solid double;
    • Üst kenar "noktalı"
    • Sağ ve sol kenar "sürekli çizgi"
    • Alt kenar "çift çizgili"
  • border-style:dotted solid;
    • Üst ve alt kenar "noktalı"
    • Sağ ve sol kenar "sürekli çizgi"
  • border-style:solid ;
    • Bütün kenarlar "sürekli çizgi"
CSS border-style CSS border-style özellikleri  
Varsayılan Değer: none  
Kalıtsallık: yok  
Animasyon Özelliği: yok  
Versiyon: CSS1  
JavaScript border-style: object.style.borderStyle="dotted double"

CSS border-style Tarayıcı Desteği

CSS Kodu:
border-style 1.0 4.0 1.0 1.0 3.5

CSS border-style Değerleri

border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

CSS border-style özelliği değerleri

CSS border-style değerleri CSS border-style değerleri tanımları CSS örnek uygulamalar
none Kenarlık yoktur.
hidden Kenarlık bu değer ile gizli olur.
dotted Kenar çeşidi "noktalı" şeklinde görülür.
dashed Kesikli kenar çeşididir.
solid Sürekli çizgi değeridir.
double Çift çizgi şeklinde görünür.
groove Çatı oluğu şeklide bir kenar tipi oluşturur.(3 boyutlu)
ridge Tümsek şeklinde bir kenarlık oluşturur.(3 boyutlu)
inset İçeriye doğru bir kenar tipi oluşturan değerdir.(3 boyutlu)
outset Dışarıya doğru eğimli kenarlık tipi oluşturur.(3 boyutlu)
initial Özelliğin varsayılan başlangıç değeridir.
inherit Soybağından gelen değeri kullanır.  

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

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 »

HTML main Etiketi

<main> Etiketi Örnek main etiketi örnek kullanım: < main >    < h1 > İnternet Tarayıcıları < /h1 >    < p > Google Chrome, Firefox, ve Internet Explorer günümüzün en çok kullanılan tarayıcılarıdır. < /p >    < article >      < h1 > Google Chrome < /h1 >      < p > Google Chrome, 2008 yılında Google tarafından geliştirilen açık kaynaklı, ücretsiz bir internet tarayıcısıdır. < /p >    < /article >    < article >      < h1 > Internet Explorer < /h1 >      < p > Internet Explorer, 1995 yılında Microsoft tarafından kullanıma sunulan ücretsiz bir internet tarayıcısıdır. < /p >    < /article >    < article >      < h1 > Mozilla Firefox < /h1 >      < p > Firefox, 2004 yılında Mozilla tarafından kullanıma sunulan açık kaynaklı, ücretsiz bir internet tarayıcısıdır. < /p >    < /article > < /main > Kendiniz deneyin »
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ı sü
Devamı Oku »

javascript açıklama satırı

Resim
Javascript  dersleri serimizde açıklama satırlarını inceleyeceğiz..Bir web sitesini kodlamaya kalktığınızda bir yerde kodlar birikiyor ve nerede hangi kodu uygulamıştık, niçin o kodu yazmıştık kafamız karışabilir.Bu gibi durumlarda  js uzantılı dosyamızda ya da html içerisindeki script tagları arasına  açıklama satırıları ve yorumlar yazabiliriz. javascript-aciklama-satiri Javascript açıklama satırı örneği   Diyelim ki ben bugünün günlerden ne olduğunu javascript ile yazmak istiyorum.Javascripti html içersine gömdüğüm için // çift slash işaretiyle bir açıklama satırı yorum bloğu ekleyebilirim.Sonradan çalışmama döndüğüm zaman ne işe yaradığını hızlıca anlayabilirim. // Javascript ile bugünün tarihini yazdıracağım var t = new Date(); Javascript derslerimizin ilerleyen safhalarında daha çok örneklerle ve uygulamalarla destekleyeceğiz. Javascript hakkında bir kaç hatırlatma Kullanıcı taraflı bir script dili olduğun
Devamı Oku »

Html belgesi yapısını anlama uygulaması

Resim
Html  dersi uygulama örneğimizde  html belgesinde temel etiketler ve kullanımını öğreneceğiz.Bu uygulama çok basit bir web sayfasının kodlarıdır.Sizlerde başlığı değiştirerek ya da paragraf etiketlerini değiştirerek kod yazmaya başlayabilirsiniz.Bir web sitesi yapmak için temel kurgu iyi bilinmelidir. <!DOCTYPE HTML> <html> <head> <title>Belge Başlığı</title> </head> <body> <h1>İçerik Başlığım</h1> <p>İlk paragrafım.....</p> </body> </html> Html belgesi uygulama videosu Bir html dökümanının uzantısı html'dir.Aşağıda izleyeceğiniz videoda sıfırdan html derslerine uygulamalarla başlamış olacağız.Videoyu izlemeden önce son hatırlatmaları yapalım. Doctype bildirimi ile tarayıcıya sitemizin html5 ile yapıldığını bildiriyoruz. Sitemiz html kodları içerisinde her elemanı kapsayan en önemli etikettir. Bizler kullanıcı olarak web sitelerinde sadece body kodları arasındaki
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 kullanacağın
Devamı Oku »

CSS background-size Özelliği

CSS3 background-size Css background-size özelliği arka plana eklenen resimlerin boyutlarını kontrol etmek için kullanılır. Örnek: Bu örnekte, arka plan olarak eklenecek resmin boyutlarını background-size özelliği ile boyutlandırılacaktır. body { background: url("html.png"); background-size: 80px 80px; background-repeat: no-repeat; } Kendiniz deneyin » CSS3 background-size nedir nasıl kullanılır Css background özelliği özelliği:Arka plan olarak kullanılacak resmin boyutlarını değiştirmek için kullanılır. CSS background-size CSS background-size özellikleri   Varsayılan Değer: auto   Kalıtsallık: yok   Animasyon Özelliği: var Oynat Versiyon: CSS3   JavaScript background-size: object.style.backgroundSize="60px 120px" Oynat
Devamı Oku »

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 »