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önderme

Bu blogdaki popüler yayınlar

HTML progress Etiketi

<progress> Etiketi Örnek Dosya indiriliyor göstergesi: < progress value= "38" max= "100">< /progress > 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 <!DOCTYPE html><html> <body> İndiriliyor: <progress value="38" max="100"></progress> <p><strong>Not:</strong> Progress etiketi Internet Explorer 9 ve önceki versiyonlarında desteklenmiyor.</p> </body> </html> HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com <progress> Tanımı ve Kullanımı <progress> etiketi bir işlemin ilerleme durumunu gösterge ile göstermek
Devamı

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ürümlerini gösterir. CSS Kodu:
Devamı

HTML section Etiketi

<section> Etiketi Örnek Belgede section etiketini açıklayan bir bölüm: < section >    < h1 > Section Etiketi < /h1 >    < p > Section etiketi üstbilgi (header), altbilgi (footer), içerik bölümü, menü bölümü ve sayfanın diğer bölümleri gibi bir belge içindeki bölüm olarak tanımlanır. < /p > < /section > 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 <!DOCTYPE html><html> <body> <section> <h1>Section Etiketi</h1> <p>Section etiketi üstbilgi (header), altbilgi (footer), içerik bölümü, menü bölümü ve sayfanın diğer bölümleri gibi bir belge içindeki bölüm olarak tanımlanır.</p> </section> </body> </html>
Devamı

CSS transition-delay Özelliği

CSS transition-delay Css transition-delay özelliği ile css animasyonlarının gecikme süresi belirlenebilir. Örnek: Bu örnekte genişliği 90px olan bir div elemanının genişliği6 saniyede 360px olacaktır. Fakat transition-delay: 3s; değeri verildiği için 3 saniye gecikmeli başlayacaktır. div { width: 90px; height: 90px; background: yellow; border: 1px solid black; -webkit-transition-property: width; -webkit-transition-duration: 6s; -webkit-transition-delay: 3s; transition-property: width; transition-duration: 6s; transition-delay: 3s; overflow; auto; } div:hover { width: 360px; } Kendiniz deneyin » CSS transition-delay nedir nasıl kullanılır Css ile oluşturulan animasyonların gecikme süresi bu özellik ile tanımlanabilir. CSS transition-delay CSS transition-delay özellikleri &nbsp Varsayılan Değer: 0s   Kalıtsallık: yok   Animasyon
Devamı

CSS align-items özelliği

CSS align-items özelliği Css align-content özelliği ile bir HTML elemanının içerisindeki alt elemanlarını hizalama ve konumlandırma işlemleri için kullanabiliriz Örnek: Align-items özelliğini kullanarak esnek kutu modülü ("flex") uygulanan bir kapsayıcı div içerisindeki elemanların konumlarına center değerini uygulayalım ! div { width: 220px; height: 350px; border: 2px solid black; display: -webkit-flex; -webkit-align-items: center; display: flex; align-items: center; } Kendiniz deneyin » CSS align-items nedir nasıl kullanılır Flex ile (esnek kutu modeli) ile yapılandırılmış bir div kutusundaki elemanları hizalamak için kullanılır. CSS align-items CSS align-items özellikleri &nbsp Varsayılan Değer: stretch   Kalıtsallık: yok   Animasyon Özelliği: yok   Ver
Devamı

CSS justify-content Özelliği

CSS justify-content Css justify-content özelliğini esnek kutu modelinde kapsayıcı kutunun elemanlarının genişliği kabı doldurmadığında değişik hizalama seçenekleri sunar. Örnek: Bu örnekte bir esnek kutu içerisinde genişlikleri kabı doldurmayan elemanlar vardır.Kapsayici kutuya justify-content özelliğinin space-between değeri verildiğindeki etkisini görmek için aşağıdaki kendiniz deneyin tuşuna tıklayınız. #anakutu { width: 300px; height: 250px; border: 2px solid black; display: -webkit-flex; -webkit-justify-content: space-between; display: flex; justify-content: space-between; } #anakutu div { width: 50px; height: 50px; } Kendiniz deneyin » CSS justify-content nedir nasıl kullanılır Esnek kutu içerisindeki elemanlar yatay eksende tüm genişliği kaplamadığı zaman justify-content özelliği elemanları hizalamak için kullanılabilir. CSS justify-content CSS justify-content özellikleri
Devamı

CSS text-justify Özelliği

CSS text-justify Css text-justify ile paragrafların sayfanın sağ ve sol kenarına yaslanmasını sağlayabiliriz. Örnek: div { text-align: justify; text-justify: inter-word; } Kendiniz deneyin » CSS text-justify nedir nasıl kullanılır Bu özellik metnin hangi hizada ve hangi aralıklıolması gerektiğini düzenler. CSS text-justify CSS text-justify özellikleri &nbsp Varsayılan Değer: auto   Kalıtsallık: var   Animasyon Özelliği: yok   Versiyon: CSS3   JavaScript text-justify: object.style.textJustify="inter-word" Oynat CSS text-justify Tarayıcı Desteği Tablodaki sayılar özelliği destekleyen ilk tarayıcı versiyonlarını belirtir. CSS Kodu: text-justify Desteklenmiyor 5.5 Desteklenmiy
Devamı

CSS overflow Özelliği

CSS overflow Boyutları belirlenen bir html elemanın içeriği kutu boyutunu aştığı durumlarda css overflow özelliği ile gösterimler kontrol edilebilir.Kaydırma çubuklarının çıkıp çıkmayacağını veya çıkacaksada x yönünde mi y yönünde mi kaydırma çubuğu istiyoruz gibi sorularımızı cevaplayan ve çözen bir özelliktir. Örnek: Bu css örneğinde iki tane div elemanından bir tanesine scroll diğerine ise hidden değeri verilmiştir. div.scroll { background-color: yellow; width: 150px; height: 150px; overflow: scroll; } div.hidden { background-color: pink; width: 150px; height: 150px; overflow: hidden; } Kendiniz deneyin » CSS overflow nedir nasıl kullanılır Overflow özelliği ile birlikte içeriğin elementin boyutlarını aşması durumunda kaydırma çubuğunun gösterilip gösterilmeyeceğini kontrol edebiliriz. CSS overflow CSS overflow özellikleri   Varsayılan Değer: visible  
Devamı

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 canvas
Devamı

CSS top Özelliği

CSS top Css top özelliği ile durağan halde bulunmayan html elementlerinin konumları düzenlenebilir. Örnek: Bu örnekte kapsayıcısı içinde bulunan küçük kutu büyük kutuya göre 150px uzaklıktadır. div.relative { position: relative; width: 250px; height: 280px; border: 2px solid yellow; } div.absolute { position: absolute; top: 150px; width: 100px; height: 100px; border: 2px solid blue; } Kendiniz deneyin » CSS top nedir nasıl kullanılır Css top özelliğini kullanırken dikkat edilmesi gereken elementin position değeridir.Bu değer varsayılan olarak relative dir.Yani eleman durağan haldedir.Top değeri girilse bile eleman konum değiştirmez. CSS top CSS top özellikleri &nbsp Varsayılan Değer: auto   Kalıtsallık: yok   Animasyon Özelliği: var Oynat Versiyon: CSS2   JavaScript t
Devamı